みずー工房

気ままライフを綴るブログです

【HTML】枠線で囲む(borderとpaddingとmargin)

HTMLを利用すれば、こんな感じで枠線を引くことができます。
余白の調整も、太さを変えることも自由自在です!



枠線で囲ってみよう

枠線は、注目して欲しい部分や本文と区切りたい場合に有効です。
さっそくHTMLで書いてみましょう。コピペでいけます。


文字を囲む

spanタグのstyle属性に、'border'を指定します。

枠線のテストです

<span style="border: solid 1px #E65;">
枠線のテストです
</span>


1行を囲む

divタグを用いれば、1行丸ごと囲むこともできます。
先ほどと同じで、spanをdivに書き換えるだけでOKです。

枠線で1行を囲ってみましょう!
<div style="border: solid 1px #E65;">
枠線のテストです
</div>


paddingとmarginも使ってみよう!

これだけだと、ちょっと窮屈ですね。。。 というわけで「padding」と「margin」を使えば、余白を調整できます。
どちらも余白を調整できる機能ですが、paddingはborderの内側、marginはborderの外側の余白を設定できます。


paddingやmargin、border-widthは1から4つの値を設定することで、
上下左右でどのくらいの大きさにするか設定できます。

padding:
margin:
border-width:
1つ[上下左右]
2つ[上下] [左右];
3つ[上] [左右] [下];
4つ[上] [右] [下] [左];

値を複数設定する場合は、カンマ(,)ではなく空白( )を使います。


例えば、こんな感じ。marginは、borderの外側の余白を設定できます。
「magin」に2つの値を設定しているので、上下は10px、左右は30pxで表示されます。

枠線のテストです。marginを設定してみました!
<div style="border: solid 1px #E65; margin: 10px 30px;">
枠線のテストです。marginを設定してみました!
</div>


同じ要領で、paddingも設定してみましょう。paddingは、borderの内側の余白の設定です。
今回は1つしか設定していないので、上下左右全てが「10px」となります。

枠線のテストです。paddingも設定してみました!
<div style="border: solid 1px #E65; padding: 10px; margin: 10px 30px;">
枠線のテストです。paddingも設定してみました!
</div>


枠線の太さを調節

さっきからちょいちょい出てるborder-widthは、枠線の太さを調節できます。
指定の仕方は、marginとpaddingと同じです。


例えば、このように設定してみます。
3つの値を設定したので、上が20px、左右が10px、下が5pxになります。

枠線のテストです。ウィンドウみたい
<div style="border: solid 1px #E65; padding: 10px; border-width:20px 10px 5px; margin: 10px 30px;">
枠線のテストです。ウィンドウみたい
</div>


角を丸めてみよう

枠線の角を丸めるには「border-radius」を利用します!
指定方法は少し複雑なので詳しくは紹介しませんが、1つ指定すると4つの角全てに適用できます。

枠線のテストです。角をまるめた!
<div style="border: solid 1px #E65; padding: 10px; border-width: 2px; border-radius: 10px; margin: 10px 30px;">
枠線のテストです。角をまるめた!
</div>


おわりに

枠線で囲むと記事にまとまりができて読みやすくなると思います。
HTMLでないと利用できないので、markdownはてな記法モードで使いましょう!