CSS｜線に関する指定

このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。

線に関する設定ですが、ココでは・太さ・種類・色を同時に覚えましょう。

始めに、それぞれのプロパティを掲載し後でサンプルを掲載します。

線の太さ

border-width

線の種類

border-style

線の色

border-color

それでは<div>に・太さ：1px・種類：実線・色：黒で指定してみます。

div{
border-width: 1px;
border-style: solid;
border-color: black;
}

一括指定

div{border: 1px solid black;}

個別指定

div{
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}

変則的な指定

div{
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-style: solid;
border-color: black;
}

線の種類と線の色については下記を参照して下さい。

線の種類

線の種類

なし none	実線 solid	二重線 double
くぼみ groove	浮き出し ridge	沈み込み inset
盛り上がり outset	点線 dotted	破線 dashed

タグの省略について。下記を参考にして下さい。（border-widthを例に）

タグの省略

スタイルシートの指定	どこを指定しているか
border-width : 1px;とした場合	上下左右すべて=1px
border-width : 1px 1px;とした場合	上下=1px、左右=1px
border-width : 1px 1px 1px;とした場合	上=1px、左右=1px、下=1px
border-width : 1px 1px 1px 1px;とした場合	上=1px、右=1px、下=1px、左=1px

一括指定

border: 1px solid black;

線の色

線の色につては【色見本/カラーコード一覧】を参照下さい。

• 目次
• 1
• 2
• 3
• 4
• 5
• 6
• 7