html5 ボーダーのスタイルで罫線を表示する
pタグとh1タグの段落と見出しで読みやすい文章構成を作成する方法は段落と見出しを表示して、見た目をわかりやすくしました。
今回は罫線を引いて、より見た目をわかりやすくする方法を紹介します。
文字色を変える時と同じように以下のようにスタイルを設定します。
<p style="border-style:solid; border-color:red; border-width:10px;">太さ10の赤色のボーダーをセットします。</p>文字色の場合は色（color）を設定するだけでよかったのですが、ボーダーにはスタイル、色、太さなどの項目を設定する必要があります。
ボーダースタイル/border-style
ボーダーにはシンプルな１本線だけでなく、２重線や点線などの種類があります。border-styleでボーダーの種類を設定します。
none
<p style="border-style: none;">ボーダーを表示しません。何も指定しない場合はこの値がセットされています（初期値）。</p>solid
<p style="border-style: solid;">１本線で表示します。</p>double
<p style="border-style: double;">２本線で表示します。</p>dotted
<p style="border-style: dotted;">点線で表示します。</p>dashed
<p style="border-style: dashed;">破線で表示します。</p>groove
<p style="border-style: groove;">立体的に窪んで見えるように表示します。</p>ridge
<p style="border-style: ridge;">立体的に隆起して見えるように表示します。</p>inset
<p style="border-style: inset;">内側全体が立体的に窪んで見えるように表示します。</p>outset
<p style="border-style: outset;">内側全体が立体的に隆起して見えるように表示します。</p>ボーダーの色/border-color
ボーダーの色を設定します。設定方法は文字色の指定方法と同じです。
<p style="border-style:solid; border-color:red;">赤色の１本線のボーダーをセットします。</p><p style="border-style:dashed; border-color:blue;">青色の破線のボーダーをセットします。</p>ボーダーの太さ/border-width
ボーダーの太さを設定します。指定方法はいろいろありますが、全て紹介すると混乱しそうなので、pxで指定することにします。
<p style="border-style:solid; border-color:red; border-width:10px;">太さ10の赤色のボーダーをセットします。</p>部分的にボーダーを表示する
上記で紹介した方法だと、ボーダーは上下左右の４方向全てに表示されます。 borderに-top、-bottom、-left、-rightをつけると指定した部分のみにボーダーを表示することができます。例えば、border-bottom-style: solid;とすると、下部分のみに１本線のボーダーが表示されます。
<p style="border-style:solid; border-left-color:blue; border-bottom-width:10px;">左のみ青色、下のみ太いボーダーを表示します。</p>スペースで区切って指定する
以下のように、値をスペースで区切ることにより、上下左右のスタイルを指定できます。 border-color:red;のように、１つだけ値を指定した場合は、上下左右がそのスタイルになります。 border-color:red blue;のように、２つ値を指定した場合は、１つ目が上下、２つ目が左右のスタイルになります。 border-color:red blue green;のように、３つ値を指定した場合は、１つ目が上、２つ目が左右、３つ目が下のスタイルになります。 border-color:red blue green purple;のように、４つ値を指定した場合は、１つ目が上、２つ目が右、３つ目が下、４つ目が左のスタイルになります。
<p style="border-style:solid; border-color:blue red; border-width:1px 10px;">上下が青、左右が赤、上下が細く、左右が太いボーダーを表示します。</p>一括での指定方法
-style、-color、-widthを付けずに、borderとすると、一括でスタイル、色、太さを設定することができます。
<p style="border-style:solid; border-color:red; border-width:10px;">太さ10の赤色のボーダーをセットします。</p>上記は下記のように書き換えることができます。
<p style="border:solid red 10px;">太さ10の赤色のボーダーをセットします。</p>