【HTML】枠線で囲む(borderとpaddingとmargin)
余白の調整も、太さを変えることも自由自在です!
枠線で囲ってみよう
枠線は、注目して欲しい部分や本文と区切りたい場合に有効です。
さっそくHTMLで書いてみましょう。コピペでいけます。
文字を囲む
spanタグのstyle属性に、'border'を指定します。
枠線のテストです
<span style="border: solid 1px #E65;"> 枠線のテストです </span>
1行を囲む
divタグを用いれば、1行丸ごと囲むこともできます。
先ほどと同じで、spanをdivに書き換えるだけでOKです。
<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で表示されます。
<div style="border: solid 1px #E65; margin: 10px 30px;"> 枠線のテストです。marginを設定してみました! </div>
同じ要領で、paddingも設定してみましょう。paddingは、borderの内側の余白の設定です。
今回は1つしか設定していないので、上下左右全てが「10px」となります。
<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かはてな記法モードで使いましょう!