Webページに使用されている見出しや段落に枠線や下線をつけることで大事な部分の強調や他要素からの区別といった効果が効果が期待できます。これは内容の読みやすさ、分かりやすさにもつながり、Webページの幅が広がります。今回は枠線、下線を引くために使用するborderプロパティについて解説します。
borderプロパティとは？
borderプロパティを使用するとpaddingの外側を囲むように線を引くことができます。下の例ではコンテンツとpaddingのまわりに太さ10pxの灰色の枠線を引いています。
See the Pen
border: solid; by そーたろう (@soh-files)
on CodePen.
〇〇 (セレクタ) { border: (線の種類) (線の太さ) (線の色); }
例）div { border: solid 10px #888; }
このようにborderプロパティを使用すると「線の種類」、「線の太さ」、「線の色」を一括で指定できます。種類、太さ、色を個別に設定することもでき、その場合border-styleプロパティ、border-widthプロパティ、border-colorプロパティをそれぞれ指定します。
border-top(上側の線)、border-bottom(下側の線)、border-left(左側の線)、border-right(右側の線)を使用することで上下左右の線を個別に引くこともできます。下線を引いて目立たせたいときはborder-bottom、見出しの左に線を引きたいときはborder-leftというように使用することができますね。
線の種類、太さ、色の指定方法についても見ていきましょう。
線の種類の指定
線の種類として8種類指定することができます。solidはもっとも使用するものなので必ず覚えましょう。double、dashed、dottedもsolidほどではありませんが、使用する場面もあると思います。下の4つはあまり使用しませんが、立体的な枠線を引くことができるので、ボタンなどのレイアウトに使用できそうです。
| 値 | 解説 |
|---|---|
| solid | 実線 |
| double | 二重線 |
| dashed | 破線 |
| dotted | 点線 |
| groove | 立体的にへこんだように見える線。ridgeの逆。 |
| ridge | 立体的に飛び出たように見える線。grooveの逆。 |
| inset | 線の上と左の線が暗く、下と右の線が明るく表示され、要素全体が立体的にくぼんだように見える線。outsetの逆。 |
| outset | 線の上と左の線が明るく、下と右の線が暗く表示され、要素全体が立体的に盛り上がったように見える線。outsetの逆insetの逆 |
border-style: solid;
solidを指定すると線を実線にできます。一番よく使用する値なので必ず覚えましょう。
See the Pen
border: solid; by そーたろう (@soh-files)
on CodePen.
border-style: double;
doubleを指定すると二重線を引くことができます。
See the Pen
border: double; by そーたろう (@soh-files)
on CodePen.
border-style: dashed;
dashedを指定すると破線を引くことができます。
See the Pen
border: dashed; by そーたろう (@soh-files)
on CodePen.
border-style: dotted;
dottedを指定すると点線を引くことができます。
See the Pen
border: dotted; by そーたろう (@soh-files)
on CodePen.
border-style: groove;
立体的にへこんだように見える枠線を引くことができます。
See the Pen
border: groove; by そーたろう (@soh-files)
on CodePen.
border-style: ridge;
立体的に飛び出たように見える枠線を引くことができます。
See the Pen
border: ridge; by そーたろう (@soh-files)
on CodePen.
border-style: inset;
枠線の下側と右側は指定された色で表示され、上側と左側はそれよりも暗い色で表示されます。これによって要素全体が立体的にくぼんだように見えます。
See the Pen
border: inset; by そーたろう (@soh-files)
on CodePen.
border-style: outset;
枠線の上側と左側は指定された色で表示され、下側と右側はそれよりも暗い色で表示されます。これによって要素全体が立体的に盛り上がったように見えます。
See the Pen
border: outset; by そーたろう (@soh-files)
on CodePen.
border-style: none; と border-style: hidden;
borderプロパティでは指定しませんが、border-styleプロパティとしては「none」と「hidden」も指定できます。どちらも枠線の太さを0にし、枠線を非表示にするプロパティです。
noneを設定すると枠線は非表示になりますが、重なり合った他の線にborderの設定がある場合、他の線の設定が優先されて表示されます。またnoneはborderの初期値となっているため、設定をしない場合には常にnoneが設定されている状態となります。
hiddenを設定すると他のborderの設定がされている線が重なってもhiddenの設定が優先され、枠線は表示されなくなります。
線の太さの指定
数値で指定
線の太さは「1px」、「5em」というように数値と単位で指定できます。単位については過去の記事で解説していますのでそちらも合わせてご覧ください。
See the Pen
border-width -1 by そーたろう (@soh-files)
on CodePen.
1px、5px、10pxと設定することでだんだん線が太くなっているのが分かります。このように太さを自由に設定することができます。
キーワードで指定
線の太さは「thin」、「medium」、「thick」の3つで指定することもできます。大まかな細い、普通、太いの設定となるため細かい太さの設定はできません。
See the Pen
border-width -2 by そーたろう (@soh-files)
on CodePen.
線の色の指定
線の色は「red」、「white」などのカラーネーム、「#FF0000」などのカラーコード、「rgb(255, 0, 0)」などのRGBカラーモデルで指定することができます。カラーネーム、カラーコード、RGBカラーモデルの詳細については過去に文字色の指定の部分で詳しく解説していますので、そちらをご覧ください。
線の色には「transparent」を指定することもできます。transparentを指定すると枠線の色が透明になります。
まとめ
今回は要素に枠線を引く方法としてborderプロパティを解説しました。線の種類や太さを効果的に使用し読みやすいWebページを作成できるようにしましょう。
ボーダー関係のプロパティは他にもあります。この記事だけでは収まりそうにないので別の記事で紹介できればと思います。
コメント