ywork2020.com

Title

要素の上辺の境界線スタイルを一括設定する

目次 (INDEX)

border-topとは

ここで説明するborder-top とは次の語句からなるCSSのプロパティです。
border
読み: ボーダー
意味: 領域、縁、端、境界
top
読み: トップ
意味: 上、てっぺん

目次に戻る

border-topプロパティの概要

このプロパティは要素の上辺の境界線のプロパティを一括指定することができます。

つまり、上辺の境界線の形状や太さ、色を一度に設定することができるということです。

これは以下に挙げるプロパティの設定を一括指定することになります。

  • border-top-color
  • border-top-style
  • border-top-width

目次に戻る

構文

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

セレクター{border-top: 太さの値 形状の値 色の値;}

目次に戻る

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

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

このプロパティは3つの設定値を一度に指定します。 上辺の境界線を設定するためには、width「線の太さ」、style「線の種類」、color「線の色」を設定する必要があります。 設定値を省略することもできますが、設定されない場合は、その設定値は初期値が自動的に設定されます。 ここでは一括プロパティの初期値として3つの設定値を見ていきましょう。

目次に戻る

初期値: medium none currentColor

まず、一括指定のそれぞれの初期値の説明をします。
mediumは中くらいの幅の境界線を表し、noneは境界線の形状で「線の種類=なし」になります。 currentColorは境界線の色であり、指定していない場合にはブラウザの既定色で表示されます。 この3つの設定値で下辺の境界線のスタイルを一括で指定することができます。

下記のサンプルは左が初期値のサンプルです。上辺の境界線は表示されていません。 表示されていない理由は「線の種類」の値がnoneになっているからです。 none の意味は「なし」です。つまり「線の種類=なし」と設定しているので境界線は表示されないというわけです。

次に右のサンプルを見て下さい。これは線の種類をsolid値に設定した例です。 solidは境界線が一本線で表示されます。 この指定により、境界線は表示されることになります。 つまり、境界線を表示するためにはnone以外の線の種類を設定する必要があるということです。

境界線を初期値で表示
medium
none
currentColor
境界線をsolidで表示
medium
solid
currentColor

サンプルコードはセレクターにdiv要素を使います。

div{border-top: medium none currentColor;}

目次に戻る

キーワード値で線の種類を設定する

線の種類の指定方法を二つのサンプルで説明したいと思います。 先ほど上記でも触れましたが、solidキワードは線の種類の一つで初期値であり1本線で表示されます。 double値は二重線で表示されます。

詳しい線の種類については、 border-style を参照してください。

solid
double

div{border-top: medium solid currentColor;}
div{border-top: medium double currentColor;}

目次に戻る

キーワード値で線の太さを設定する

線の太さの指定方法を二つのサンプルで説明したいと思います。 左は先ほどと同じmedium値です。mediumは「中くらいの幅の線」で表示されます。 mediumの他、thin「細い境界線」、thick「太い境界線」の値がありますが数値で指定する場合には数値と単位を記述します。 右側は単位付きの数値で設定しています。

詳しい線の太さの種類については、 border-width を参照してください。
単位付きの数値に関しては、 「CSSの単位について」のページを参照してください。

medium
solid
currentColor
1em
solid
currentColor

div{border-top: medium solid currentColor;}
div{border-top: 1em solid currentColor;}

キーワード値で線の色を設定する

線の色の指定方法を二つのサンプルで説明したいと思います。 currentColorキーワードは、ブラウザの既定色で表示されます。 右側はカラーキワードのtealを設定していますので青緑の色になります。

詳しい線の色の種類については、 色見本 (カラーサンプル) のページを参照してください。

4mm
solid
currentColor
4mm
solid
teal

div{border-top: 4mm solid currentColor;}
div{border-top: 4mm solid ##teal;}

目次に戻る

キーワード値で一括指定する

border-topプロパティは一括指定のプロパティなので、ここでは上のボーダーをいっせいにスタイル付けしていきたいと思います。

太さは4mm、dotted「ドット」、teal「青緑」に設定しています。

このように下側のボーダーだけを色々なスタイルに簡単に設定することができます。

4mm
dotted
teal

div{border-top: 4mm dotted ##teal;}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-top: medium none currentColor;

border-top: medium solid currentColor;

border-top: medium double currentColor;

border-top: 1em solid currentColor;

border-top: 4mm solid teal;

border-top: 4mm dotted teal;

サンプル: ブロック要素

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

目次に戻る