ブログを書いていると
記事中の文章を枠線で囲みたいことがあります。
頻ぱんに使用するようなら
枠線のスタイルを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は外しています)
にしてみました。
このように表示されます。
枠線の種類や色を指定することで表情が変わりますね。
やってみるとおもしろいですよ。
文字だけの文章よりずっとメリハリが出て
記事全体が読みやすくなると思います。
ぜひ、お試しください。