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