wildhawk

【CSS】borderで罫線をデザインする

CSSでよく使うborderのご紹介

borderは「種類」「線の太さ」「色」を指定することで簡単に罫線を表示できるCSSです。

borderはプロパティの設定で複雑な表示も可能です。

昔はバックグラウンドの画像で作っていたが、最近はborderを多様することが多いので、今回は各プロパティの設定やシミュレーターも使って詳しく説明いたします。

こんな人にオススメ

cssだけで罫線を引きたい
borderの各プロパティを確認したい
borderのシミュレーターでCSSを簡単に作りたい

CSSでよく使うので覚えているが、使い方がマンネリ化しているので、深堀りしてみました。

borderの書き方
　　 borderで線の種類を指定
　　 borderで線の太さを指定
　　 borderで線の色を指定
　　 borderで線の上下左右を別々で指定
　　 borderで線の角を丸くする（罫線の角丸）

borderのシミュレーターでCSSを簡単に作ろう

まとめ

borderの書き方

borderは、tableタグに罫線を引いたり、margin領域とpadding領域の間に罫線を引く際に使われるCSSです。

罫線の「線の種類」「線の太さ」「線の色」を一括で指定します。

【CSS】border
【使い方】	border: 線の種類線の太さ線の色 ;
【使い方】	border: solid 3px black;

borderは、以下の3つのプロパティをまとめて記述しています。

border-style : 線の種類
border-width : 線の太さ
border-color : 線の色

複数のプロパティを記述するのは面倒なので、borderのようにまとめる方法をショートハンドと呼び、まとめたborderなどのプロパティをショートハンドプロパティと呼ばれています。

border: solid 3px black;

border-style: solid;
border-width: 3px;
border-color: black;

※どちらも同様に罫線を表示できるが、borderなら1つで完結できるのがメリット

この後は、それぞれのプロパティについて説明します。

borderで線の種類を指定

borderで使える罫線の種類を指定します。
罫線の種類は以下の通りです。

【CSS】border
【使い方】	border: 線の種類線の太さ線の色 ;
	border: solid 10px black; 実線	border: double 10px #3366ff; 2重線
	border: dotted 10px red; 点線	border: dashed 10px #33cc33; 破線
	border: groove 10px lightcoral; 谷線	border: ridge 10px #33ccff; 山線
	border: inset 10px l aqua; 内線	border: outset 10px #ff99ff; 外線
	border: inherit 10px black; 継承　※親要素のプロパティを適用	border: none 10px l #ffffff; 線なし（デフォルト）

borderで線の太さを指定

borderで線の太さはpxで指定します。
ただ、以下の方法でも指定することが可能です。

thin（細い）
medium（中位）
thick（太い）

thin、medium、thickで指定した場合は、ブラウザで設定された太さで線の太さを表示します。

【CSS】border
【使い方】	border: 線の種類線の太さ線の色 ;
	border: solid 3px black; 3px	border: solid thin black; thin
	border: solid medium black; medium	border: solid thick black; thick

個人的にthin、medium、thickの指定はオススメしません。
理由はブラウザ毎に表示が異なる可能性が高く、意図したデザインにならない可能性が高いからです。

borderで線の色を指定

borderで線の色をカラーコードorカラーネームで指定します。

カラーコード（#から始まるRGB値で指定）
カラーネーム（blackやwhiteなどの名称で指定）

【CSS】border
【使い方】	border: 線の種類線の太さ線の色 ;
	border: solid 5px #000000; 黒	border: solid 5px black; 黒
	border: solid 5px #ff0000; 赤	border: solid 5px red; 赤
	border: solid 5px #008800; 緑	border: solid 5px green; 緑

カラーコードでもカラーネームでも指定できるが、できるだけWebセーフカラーを使うように心がけているので、カラーネームで指定することが多い。

borderで線の上下左右を別々で指定

borderで線の上下左右を別々に指定することが可能です。
指定する方法は2つあります。

線の上下左右をそれぞれ指定する
線の種類・色・幅を指定する

線の上下左右をそれぞれ指定する

borderで線の上下左右をそれぞれ指定する場合は、以下のプロパティを使います。

border-top（線の上を指定）
border-right（線の右を指定）
border-bottom（線の下を指定）
border-left（線の左を指定）

【CSS】border
【使い方】	border-top: solid 3px black; 上のみ	border-right: solid 3px black; 右のみ
【使い方】	border-bottom: solid 3px black; 下のみ	border-left: solid 3px black; 左のみ

線の種類・色・幅を指定する

borderで線の種類・色・幅を指定して上下左右の罫線を別々に指定する場合は、以下のプロパティを使います。

border-styleで上下左右の種類を指定
border-widthで上下左右の太さを指定
border-colorで上下左右の色を指定

【CSS】border
【使い方】	border-style: solid none none none; border-width: 3px 0 0 0; border-color: black transparent transparent transparent; 上のみ	border-style: none solid none none; border-width: 0 3px 0 0; border-color: transparent black transparent transparent; 右のみ
【使い方】	border-style: nonenone solid none; border-width: 0 0 3px 0; border-color: transparent transparent black transparent; 下のみ	border-style: none none none solid; border-width: 0 0 0 3px; border-color: transparent transparent transparent black; 左のみ

borderで線の上下左右を別紅指定する場合、自分がわかりやすい方法で対応すれば良いと思います。
私は「線の上下左右をそれぞれ指定する」の方が直感的に考えられるので、こっちのみ使っています。

borderで線の角を丸くする（罫線の角丸）

線の角を丸める場合はborder-radiusを使います。

borderの文言が含まれますが、実は画像やバックグラウンドにも適用できる万能なプロパティで、デザインの幅が広がるので、色々な部分で活用しています。

【CSS】border-radius
【使い方】	border: solid 3px black; border-radius: 10px; 罫線の角丸10px	border: solid 3px black; border-radius: 32px; 罫線の角丸32px
background: #40a2ff; border-radius: 10px; バックグラウンドの角丸10px	border-radius: 32px; 画像の角丸32px
角毎に異なる設定も可能です。 border: solid 3px black; border-radius: 10px 20px 30px 40px; 左上10px、右上20px、右下30px、左下40pxの角丸

【CSS】border-radius

【使い方】

border: solid 3px black;
border-radius: 10px;

罫線の角丸10px

border: solid 3px black;
border-radius: 32px;

罫線の角丸32px

background: #40a2ff;
border-radius: 10px;

バックグラウンドの角丸10px

border-radius: 32px;