ywork2020.com

Title

要素の右辺の境界線の幅を設定する

目次 (INDEX)

border-right-widthとは

ここで説明するborder-right-width とは次の語句からなるCSSのプロパティです。
border
読み: ボーダー
意味: 領域、縁、端、境界
right
読み: ライト
意味: 右
width
読み: ウィズ
意味: 幅

目次に戻る

border-right-widthプロパティの概要

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

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

  • border-right
  • border-width
  • 目次に戻る

    構文

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

    セレクター{border-right-width: 設定値;}

    目次に戻る

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

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

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

    目次に戻る

    初期値: medium

    初期値のmediumは中くらいの太さの線です。

    medium

    div{border-right-width: medium;}

    目次に戻る

    キーワード値: thin

    thinキーワードは「細い、薄い」という意味で、細い線で表示されます。

    thin

    div{border-right-width: thin;}

    目次に戻る

    キーワード値: thick

    thickキーワードは「太い、厚い」という意味で、太い線で表示されます。

    thick

    div{border-right-width: thick;}

    目次に戻る

    数値で太さを指定をする

    数値による太さの指定は数値と単位をセットで記述します。 このサンプルでは単位をpxで指定しています。

    詳しい単位については、 CSSの単位についてを参考にしてください。

    10px

    div{border-right-width:10px;}

    目次に戻る

    グローバル値

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

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

    目次に戻る

    補足説明

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

    目次に戻る

    まとめ

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

    border-right-width: medium;

    border-right-width: thin;

    border-right-width: thick;

    border-right-width:10px;

    サンプル: ブロック要素

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

    目次に戻る