Title

border-left-styleとは

ここで説明するborder-left-style とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 領域、縁、端、境界

left

読み: レフト
意味: 左

style

読み: スタイル
意味: 様式、スタイル

目次に戻る

border-left-styleプロパティの概要

このプロパティは要素の左辺の境界線の種類を設定することができます。

境界線の形状の種類は次の一括指定プロパティを使うこともできまが、 この個別プロパティを使うことでコードがシンプルになることも考えられます。

• border-left
• border-style

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以上のような書き方になります。

セレクター{border-left-style: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルにはdiv要素を使用しています。 境界線は「線の種類」であるborder-styleの初期値がnoneになっており、 このままでは境界線は表示されませんので、予め以上のプロパティを設定して表示されるようにしています。

• border-style: solid;
• border-width: 10px;
• border-color: currentColor

目次に戻る

初期値: none

none とは、「無い」という意味で左辺の境界線は表示されません。 これは、境界線の種類の初期値であり、指定しない場合はこの値になります。

div{
	border: 10px solid currentColor;
	border-left-style: none;
}

目次に戻る

キーワード値: dashed

dashed とは、「破線」という意味で等しい間隔で狭い切れ目を入れた線です。

div{
	border: thick solid currentColor;
	border-left-style: dashed;
}

目次に戻る

キーワード値: dotted

dotted とは、「点線入り」という意味で点が点線で表示されます。

div{
	border: thick solid currentColor;
	border-left-style: dotted;
}

目次に戻る

キーワード値: double

double とは、「二重」という意味で2本線で表示されます。

div{
	border: 10px solid currentColor;
	border-left-style: double;
}

目次に戻る

キーワード値: groove

grooveとは、「くぼみ」という意味で立体的に窪んだ線で表示されます。

div{
	border: 10px solid currentColor;
	border-left-style: groove;
 }

目次に戻る

キーワード値: hidden

hiddenとは、「隠された」という意味で境界線は表示されません。

div{
	border: 10px solid currentColor;
	border-left-style: hidden;
}

目次に戻る

キーワード値: inset

inset とは、「はめ込み」などの意味で窪んでいるように表示されます。

div{
	border: 10px solid currentColor;
	border-left-style: inset;
 }

目次に戻る

キーワード値: outset

outset とは、「発端」という意味で突起して見えるように表示されます。

div{
	border: 10px solid currentColor;
	border-left-style: outset;
 }

目次に戻る

キーワード値: ridge

ridge とは、「尾根」という意味で立体的に隆起した線で表示されます。

div{
	border: 10px solid currentColor;
	border-left-style: ridge;
 }

目次に戻る

キーワード値: solid

solid とは、「個体」という意味で1本線で表示されます。

div{
	border: 10px solid currentColor;
	border-left-style: solid;
 }

目次に戻る

グローバル値

border-left-styleプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnoneに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-left-style: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-left-style: none;

border-left-style: dashed;

border-left-style: dotted;

border-left-style: double;

border-left-style: groove;

border-left-style: hidden;

border-left-style: inset;

border-left-style: outset;

border-left-style: ridge;

border-left-style: solid;

目次に戻る