ブログで文章を枠線で囲む方法～htmlで書けちゃうよ！
Content
ブログ書いててふとこう思うことないですか？
「この文、枠線で囲みたいなー」
そうなんですよね、こういうやつですね。
うーん、囲むだけで文章が協調されるし、なによりブログに色があって綺麗に見えますよね。
今回はこの文章を枠線で囲む方法をまとめましたので、参考にしてみてください。
<div>タグを使って書く方法
あまりhtmlに詳しくない人は、コーディングなんてできないと思いがちなんですが、基本的に「こうやれば、あーなる」とだけ覚えとけば簡単に書くことができます。
文章を枠線で囲むには通常<div>タグを使って記載します。
ここではCSSとか難しい話は抜きにして直接、記事内に記載する方法を書いていきますよ。
基本パターンは以下です。
<div style="border-style: solid; border-width: 1px;">枠線で囲む文章</div>
これが↓のようになります。
どうですか？
CSSをいじろうとすると結構、知識が必要なのですが、このように<div>タグを使ってhtmlを直接書いてしまえば、難しい知識なしに、ブログ内の文章を枠線で囲むことができます。
ちなみにここではスタイル（装飾）は次の２こを指定しています。
border-style: solid（枠線の形式⇒実線）
border-width: 1px（枠線の太さ⇒1px）
つまりborder-style属性を変えれば枠線の形式を変えられるし、border-width属性を変えれば枠線の太さを変えることができます。
枠線の形式
枠線の形式には次のようなものがあります。
・solid：実線
・dotted：点線
・dashed：破線
・double：二重線
例えば二重線で太さ2pxにしたければ次のように記載します。
<div style="border-style: double; border-width: 2px;>枠線で囲む文章</div>
こうすると↓のようになります。
枠線内の余白の設定
次に枠線ないの余白の設定方法についてです。
枠線内の余白によって、詰まった感じになったり余裕をもった感じに見えるので、色々と用途に合わせて設定したいですよね。
枠線内の余白はpadding属性で指定します。
padding: 10px 5px 10px 20px;
設定できる余白の数字は左から、上・右・下・左となります。
例えば次のように記載すると
<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;">枠線内の余白が10px 5px 10px 20px</div>
こうなります。
枠線の文字色と枠線内の文章の文字色
枠線の文字色はborder-color属性、枠線内の文字の色はcolor属性で指定します。
border-color: blue;
color: blue;
例えば次のように記載すると
<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;border-color: blue; color: blue">枠線と文字の色が青</div>
こうなります。
枠線内の背景色
枠線内の背景色はbackground-color属性で指定します。
例えば以下のように記載すると
<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;border-color: blue; color: blue; background-color: pink">枠線内の背景色がピンク</div>
こうなります。
もっとおしゃれに
最後にもう少しオシャレにしたいという方向けに角を丸くして影を付けてみます。
このように書きます。
<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;border-color: blue; color: blue; background-color: pink; border-radius: 5px; box-shadow: 5px 5px 5px #AAA;">角を丸くして影を付ける</div>
するとこうなります。
まとめ
いかがでしたか？
ブログ内の文章に枠線を付けていろいろと装飾する方法をまとめました。
htmlは難しいと考えないで、「こう書くと、こうなる」くらいに思っておけば結構簡単に書けるようになると思いますよ。
最後まで読んでいただきありがとうございます！この記事が気に入ったらぜひシェアしていただけるとうれしいです。
