omachizura

仕事メモ、役に立ったスキルをまとめています。


ボーダーのスタイルで罫線を表示する

pタグとh1タグの段落と見出しで読みやすい文章構成を作成する方法 は段落と見出しを表示して、見た目をわかりやすくしました。

今回は罫線を引いて、より見た目をわかりやすくする方法を紹介します。

文字色を変える時と同じように以下のようにスタイルを設定します。

<p style="border-style:solid; border-color:red; border-width:10px;">太さ10の赤色のボーダーをセットします。</p>

太さ10の赤色のボーダーをセットします。

文字色の場合は色(color)を設定するだけでよかったのですが、ボーダーにはスタイル、色、太さなどの項目を設定する必要があります。

ボーダースタイル/border-style

ボーダーにはシンプルな1本線だけでなく、2重線や点線などの種類があります。border-styleでボーダーの種類を設定します。

none

ボーダーを表示しません。何も指定しない場合はこの値がセットされています(初期値)。

solid

1本線で表示します。

double

2本線で表示します。

dotted

点線で表示します。

dashed

破線で表示します。

groove

立体的に窪んで見えるように表示します。

ridge

立体的に隆起して見えるように表示します。

inset

内側全体が立体的に窪んで見えるように表示します。

outset

内側全体が立体的に隆起して見えるように表示します。

ボーダーの色/border-color

ボーダーの色を設定します。設定方法は文字色の指定方法と同じです。

<p style="border-style:solid; border-color:red;">赤色の1本線のボーダーをセットします。</p>

赤色の1本線のボーダーをセットします。

<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>

太さ10の赤色のボーダーをセットします。

部分的にボーダーを表示する

上記で紹介した方法だと、ボーダーは上下左右の4方向全てに表示されます。

border-top-bottom-left-rightをつけると指定した部分のみにボーダーを表示することができます。例えば、border-bottom-style: solid;とすると、下部分のみに1本線のボーダーが表示されます。

<p style="border-style:solid; border-left-color:blue; border-bottom-width:10px;">左のみ青色、下のみ太いボーダーを表示します。</p>

左のみ青色、下のみ太いボーダーを表示します。

スペースで区切って指定する

以下のように、値をスペースで区切ることにより、上下左右のスタイルを指定できます。

border-color:red;のように、1つだけ値を指定した場合は、上下左右がそのスタイルになります。

border-color:red blue;のように、2つ値を指定した場合は、1つ目が上下、2つ目が左右のスタイルになります。

border-color:red blue green;のように、3つ値を指定した場合は、1つ目が、2つ目が左右、3つ目がのスタイルになります。

border-color:red blue green purple;のように、4つ値を指定した場合は、1つ目が、2つ目が、3つ目が、4つ目がのスタイルになります。

<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>