CSSには便利なプロパティが様々ありますが、今回は要素の境界線、上下左右の幅をまとめて設定できるプロパティをご紹介します！
HTMLもCSSもそれ以外の言語も、とにかくコードが短いほうが分かりやすく、かつエラーも少なくなります。まとめて設定しても問題ないものは、ぜひ便利なプロパティを利用して設定しましょう。
今回は、border-widthプロパティの
・border-widthプロパティを使用せずに枠線の幅を設定する
・【応用編】一辺ずつ枠線の幅を設定する方法
について説明します。
目次
border-widthプロパティとは
border-widthプロパティの読み方
border-width：（読み方）ボーダーウィズ / ボーダーワイズ
border-widthプロパティの説明
border-widthプロパティは要素の枠線の幅をまとめて設定できるプロパティです。表などに用いることができるほか、divタグなど様々なタグに適用可能です。
border-widthプロパティは上下左右全ての枠線の幅を設定できますが、指定する値の数によっては上下/左右、上/左右/下、上/右/下/左など、細かく設定することもできます。
border-widthプロパティで利用できる値
border-widthプロパティでは以下の値を利用して、枠線の幅を設定することができます。
| 値 | 説明 |
|---|---|
| thin | 細い |
| medium | 普通 |
| thick | 太い |
| <length> | ピクセル値(px)で値を指定 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 4 |
| Opera | 3.5 |
| Safari | 1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 2 |
| Android版Chrome | 18 |
| Android版Firefox | 4 |
| Android 版 Opera | 10.1 |
| iOS版Safari | 3 |
| Samsung Internet | 1.0 |
border-widthプロパティの基本的な使い方
border-widthプロパティの使い方
まずはborder-widthプロパティの使い方を、値の設定方法や値ごとの見た目と合わせて解説していきます。ここでは200px × 100pxのボックスを作成し、枠線を赤色で表示しました。基本設定のコードは以下の通りになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <style> .sample { border: solid red; width: 200px; height: 100px; margin: 30px; } </style> </head> <body> <div class="sample"> </div> </body> </html> |
thin（細い）
styleタグの中にあるCSSにborder-width: thin;を加えました。初期値と比べて、かなり細い枠線が表示されます。
|
1 2 3 4 5 6 7 |
.sample { border: solid red; width: 200px; height: 100px; margin: 30px; border-width: thin; } |
medium（普通）
border-width: medum;を加えると、初期値と同じように枠線の幅が設定されます。
|
1 2 3 4 5 6 7 |
.sample { border: solid red; width: 200px; height: 100px; margin: 30px; border-width: medium; } |
thick（太い）
border-width: thick;を設定すると、初期値と比べてかなり太い枠線が表示されます。テキストを太字にするCSS『font-weight: bolder;』の値とおおよそ同じ太さに表示され、見栄えが良くなりました。
|
1 2 3 4 5 6 7 |
.sample { border: solid red; width: 200px; height: 100px; margin: 30px; border-width: thick; } |
<length>（ピクセル値で設定）
数値指定では具体的な数値を用いたピクセル値で、枠線の幅を設定することができます。20pxに設定すると、thickと比べてもかなり太く表示されています。小数点を用いることで、かなり細かく設定できるので、よりサイトに合わせたデザインをしたい時にお勧めです。
|
1 2 3 4 5 6 7 |
.sample { border: solid red; width: 200px; height: 100px; margin: 30px; border-width: 30px; } |
border-widthプロパティと類似する要素との違い
CSSのプロパティには、border-widthプロパティと同じように枠線の幅を設定する『border』プロパティがあります。
See the Pen
border-width 類似プロパティ by rabbittyu (@rabbittyu)
on CodePen.
どちらも同じ枠線の太さに設定されていますが、上のボックスはborder-width: thick;、下のボックスはborder: solid red 5px;設定しています。
ポイントはコードの短さです。border-widthを用いた場合は、まずborderプロパティで枠線の表示設定をしなければなりませんが、borderプロパティで枠線の太さを設定する場合は1行でコードが収まります。
どちらを使用するかは完全に個人の好みですが、コードをより短くしたいという方はborderプロパティで一気に設定するのが良いでしょう。
border-widthプロパティの応用的な使い方
実はborder-widthプロパティは枠線の幅を一気に設定する他、上下/左右、上/左右/下、上/右/下/左と一辺ずつ細かく値を設定することができます。
See the Pen
border-width 詳細設定 by rabbittyu (@rabbittyu)
on CodePen.
分かりやすくするために、設定方法ごとに枠線に色を付けて表示しました。同じ色の枠線同士は、同じ幅の設定が施されています。
値はコンマではなく、半角の空白で区切ることで複数記述することができます。辺は4つしかないので、記述できる値は4つだけです。
まとめ
今回は枠線の幅をまとめて設定する『border-width』プロパティについて解説しました。border-widthを使用せず、borderプロパティ内で設定することもできますが、枠線が複数あり、一気に設定したいという場合は、このborder-widthプロパティが役に立ちますね。
参考文献：
MDN Web docs ：border-width
border-width – スタイルリファレンス
CSS – border-width – とほほのWWW入門
border-width「罫線の太さと設定」 – WEBページ作成
