ywork2020.com

Title

要素の下辺の境界線の種類を設定する

目次 (INDEX)

border-bottom-styleとは

ここで説明するborder-bottom-style とは次の語句からなるCSSのプロパティです。
border
読み: ボーダー
意味: 領域、縁、端、境界
bottom
読み: ボトム
意味: 下、底
style
読み: スタイル
意味: 様式、スタイル

目次に戻る

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

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

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

目次に戻る

構文

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

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

目次に戻る

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

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

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

目次に戻る

初期値: none

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

none

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

目次に戻る

キーワード値: dashed

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

dashed

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

目次に戻る

キーワード値: dotted

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

dotted

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

目次に戻る

キーワード値: double

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

double

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

目次に戻る

キーワード値: groove

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

groove

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

目次に戻る

キーワード値: hidden

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

hidden

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

目次に戻る

キーワード値: inset

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

inset

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

目次に戻る

キーワード値: outset

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

outse

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

目次に戻る

キーワード値: ridge

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

ridge

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

目次に戻る

キーワード値: solid

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

solid

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

目次に戻る

グローバル値

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

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnoneに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{border-bottom-style: グローバル値;}

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-bottom-style: none;

border-bottom-style: dashed;

border-bottom-style: dotted;

border-bottom-style: double;

border-bottom-style: groove;

border-bottom-style: hidden;

border-bottom-style: inset;

border-bottom-style: outset;

border-bottom-style: ridge;

border-bottom-style: solid;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る