上下左右のボーダーラインの太さを指定するborder-widthの使い方 – CSS3

CSSには便利なプロパティが様々ありますが、今回は要素の境界線、上下左右の幅をまとめて設定できるプロパティをご紹介します!

HTMLもCSSもそれ以外の言語も、とにかくコードが短いほうが分かりやすく、かつエラーも少なくなります。まとめて設定しても問題ないものは、ぜひ便利なプロパティを利用して設定しましょう。

境界線の幅を設定するborder-widthの使い方は?

今回は、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のボックスを作成し、枠線を赤色で表示しました。基本設定のコードは以下の通りになります。


thin(細い)

styleタグの中にあるCSSにborder-width: thin;を加えました。初期値と比べて、かなり細い枠線が表示されます。

 


medium(普通)

border-width: medum;を加えると、初期値と同じように枠線の幅が設定されます。


 


thick(太い)

border-width: thick;を設定すると、初期値と比べてかなり太い枠線が表示されます。テキストを太字にするCSS『font-weight: bolder;』の値とおおよそ同じ太さに表示され、見栄えが良くなりました。

 


<length>(ピクセル値で設定)

数値指定では具体的な数値を用いたピクセル値で、枠線の幅を設定することができます。20pxに設定すると、thickと比べてもかなり太く表示されています。小数点を用いることで、かなり細かく設定できるので、よりサイトに合わせたデザインをしたい時にお勧めです。

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ページ作成

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング