ブログの文章を枠線で囲むHTML

squares

ブログを書いていると
記事中の文章を枠線で囲みたいことがあります。

頻ぱんに使用するようなら
枠線のスタイルをCSS(スタイルシート)で指定しておく方が便利ですが、
たまに使うくらいなら
編集中の記事にHTMLタグで挿入すれば充分でしょう。

備忘録として残しておきます。

 

引用を示す枠<blockquote>~</blockquote>で
枠線で囲める場合もありますが区別するほうが良いです。
(と言って私も使ったことがありますが^^;)

 

 

文章を枠線で囲むHTML

この時のタグは<div>を使います。
囲みたい文章を<div>~</div>で囲み、styleで指定をしていきます。

  • 枠線=border
  • 枠線の種類 ・・・solid(直線)・dashed(破線)・dotted(点線)
  • 枠線の太さ ・・・1px;(数字は任意)
  • 枠線の色 ・・・カラーコード (#666666のような #英数字)
          又は、カラーネーム(black、 blue、redなど)  
  • 枠内の背景色 ・・・background-color:  カラーコードか、カラーネーム
  • 枠線と文章までの間隔 ・・・padding:20px;(数字は任意)
  • 枠線の外周のスペース ・・・margin (margin:10px;→外周10pxのスペース)
       上下左右 個別に指定 margin-left:20px;  →のスペースを20pxに  

【例】

<div style="border:solid 1px blue; background-color:#ffdab9; padding:20px; margin-left:30px; margin-right:50px; ">
文章・文章・文章・文章・文章・文章・文章・文章・文章・文章・
文章・文章・文章・文章・文章・文章・文章・文章・文章・文章・
</div>

これが表示されると下のようになります。

文章・文章・文章・文章・文章・文章・文章・文章・文章・文章・ 文章・文章・文章・文章・文章・文章・文章・文章・文章・文章・

ブラウザによって違って見える場合もあるようです。

枠線の形態はもっといろいろ変えることができます。

例えば角を丸くしたいというときは
border-radius:10px; を加えます。
10pxは丸みの大きさで、数字を変えて好みの丸さにします。

例えば・・・

<div style="border:dashed 3px green; border-radius:10px; background-color:lightyellow; padding:20px; ">
あ あ あ あ あ あ あ あ あ あ あ あ あ あ</div>

枠線は破線(dashed)に、色はグリーン(green)で太さは3px、角を丸く。
背景はライトイエロー(#ffffe0)
文章と枠線の間隔は20px。 (marginは外しています)

にしてみました。

 

あ あ あ あ あ あ あ あ あ あ あ あ あ あ

 

このように表示されます。

 

枠線の種類や色を指定することで表情が変わりますね。
やってみるとおもしろいですよ。

文字だけの文章よりずっとメリハリが出て
記事全体が読みやすくなると思います。

ぜひ、お試しください。

にほんブログ村 その他日記ブログ 日々の気になることへ

 

今すぐ使えるかんたん ホームページ HTML&CSS入門

今すぐ使えるかんたん ホームページ HTML&CSS入門

 
ブログ飯 個性を収入に変える生き方

ブログ飯 個性を収入に変える生き方