Documentation CSS

この記事で学べること

  • border-widthプロパティの基本構文
  • px、em、thin/medium/thickでの幅指定
  • 各辺ごとの個別幅設定方法
  • アニメーションとの組み合わせ方
  • border-styleとの必須の関係性

概要

CSSのborder-widthプロパティは、要素の枠線（ボーダー）の幅を指定するためのプロパティです。borderのスタイルを決める3つの主要な要素（幅、スタイル、色）の一つであり、ボーダーの見た目を大きく左右します。border-widthを適切に調整することで、デザインのアクセントや要素の強調が可能になります。本記事では、border-widthの基本的な使い方、幅の指定方法、注意点について詳しく解説します。

border-widthの基本構文

border-widthプロパティの基本的な構文は以下の通りです。

border-width: 値;
  • 値には、数値と単位（例：px、em、rem）を指定します。また、thin, medium, thickのキーワードも使用可能です。

基本的な例

.box {
    border-style: solid; /* スタイルの設定が必要 */
    border-width: 3px; /* 3ピクセルのボーダー */
}

この例では、要素に3pxの実線のボーダーが設定されています。なお、border-styleの指定がないと、ボーダーは表示されませんので注意が必要です。

border-widthの指定方法

単一の値で一括指定

border-widthを1つの値で指定すると、4辺すべての幅が同じになります。

.box {
    border-style: solid;
    border-width: 2px; /* すべての辺が2px */
}

各辺ごとに異なる幅を指定

border-widthは、4つの値を順番に指定することで各辺の幅を個別に設定できます。

.box {
    border-style: solid;
    border-width: 4px 2px 1px 3px; /* 上, 右, 下, 左の順 */
}

この例では、上が4px、右が2px、下が1px、左が3pxのボーダーが設定されます。

ショートハンドプロパティでの個別指定

また、border-top-width, border-right-width, border-bottom-width, border-left-widthを使って各辺の幅を指定することも可能です。

.box {
    border-style: solid;
    border-top-width: 5px; /* 上のボーダーのみ5px */
    border-right-width: 2px; /* 右のボーダーのみ2px */
}

幅の指定に使えるキーワード

border-widthには、数値の他に以下のキーワードも使用できます。

  • thin: 細いボーダーを指定します（ブラウザデフォルトで約1px）。
  • medium: 通常のボーダー幅（デフォルト値、約3px）。
  • thick: 太いボーダーを指定します（デフォルトで約5px）。

キーワード指定の例

.box-thin {
    border-style: solid;
    border-width: thin; /* 細いボーダー */
}
.box-medium {
    border-style: solid;
    border-width: medium; /* 通常のボーダー */
}
.box-thick {
    border-style: solid;
    border-width: thick; /* 太いボーダー */
}

キーワードを使用することで、簡単に異なる太さのボーダーを適用できます。

border-widthを使った実践例

複数のボーダー幅を組み合わせたデザイン

各辺の幅を調整して、片側だけを強調するデザインの例です。

.box-emphasis {
    border-style: solid;
    border-width: 1px 0 1px 5px; /* 左のボーダーだけ太く設定 */
    border-color: gray;
}

この設定により、左側のボーダーが太くなり、視覚的に強調されます。

ボーダー幅をアニメーションで変化させる

CSSのアニメーションを使って、ボーダーの幅を動的に変化させることも可能です。

@keyframes borderExpand {
    from {
        border-width: 2px;
    }
    to {
        border-width: 10px;
    }
}
.box-animate {
    border-style: solid;
    border-color: blue;
    animation: borderExpand 2s infinite alternate; /* ボーダーが繰り返し拡大縮小 */
}

アニメーションを適用することで、インタラクティブで視覚的に魅力的なデザインが可能になります。

border-widthの注意点

  1. ボーダーのスタイル設定が必須
    border-widthを設定しても、border-styleが設定されていないとボーダーは表示されません。必ずsolidなどのスタイルを指定してください。
  2. 太すぎるボーダーに注意
    ボーダーが太すぎると、要素の内容が圧迫されてしまうことがあります。特にモバイルなど小さい画面では、適切なバランスを保つことが重要です。
  3. ブラウザによるキーワードの表示差
    thin, medium, thickのキーワードはブラウザによって表示幅が微妙に異なる場合があります。一貫したデザインを保つためには、具体的なピクセル値を使用するのがおすすめです。

まとめ

border-widthプロパティは、要素のボーダーの幅を調整するための重要なCSSプロパティです。適切に設定することで、デザインにアクセントを加えたり、要素を強調したりすることができます。border-styleとの組み合わせが必須であることを忘れずに、デザイン全体のバランスを考慮しながら使用しましょう。

ポイントの振り返り

指定方法構文例説明
1値border-width: 2px全辺同じ
2値border-width: 2px 4px上下/左右
4値border-width: 1px 2px 3px 4px上/右/下/左

キーワード値

値一般的な幅
thin約1px
medium約3px（デフォルト）
thick約5px

個別プロパティ

プロパティ対象
border-top-width上辺
border-right-width右辺
border-bottom-width下辺
border-left-width左辺

参考文献

円