概要

border-block-widthは、CSSでブロック方向（上下）のボーダーの幅を一括で設定するためのプロパティです。このプロパティを使うことで、上と下のボーダーの幅を個別に設定する手間を省き、コードを簡潔にできます。例えば、border-top-widthとborder-bottom-widthを個別に設定する必要がなくなるため、ボーダーのスタイルを統一しやすくなります。

border-block-widthの基本

構文

border-block-width: <length>;

• length
  ボーダーの幅を指定します。単位には、px、em、rem、% などの長さの値を指定できます。例：1px、0.5em、thin、medium、thick。

サブプロパティ

• border-block-start-width
  ブロックの先頭（通常は上側）のボーダーの幅を設定します。
• border-block-end-width
  ブロックの末尾（通常は下側）のボーダーの幅を設定します。

使用例

基本的な使用例 - ブロック方向のボーダーの幅を設定

以下の例では、ブロック方向（上下）のボーダーの幅を5pxに設定しています。

.box {
    border-block-style: solid;
    border-block-width: 5px; /* 上下のボーダーの幅を5pxに設定 */
    border-block-color: #3498db;
}

この設定により、.box要素の上下のボーダーが5pxの実線になり、色は青色で統一されます。上下のボーダー幅をまとめて設定することで、コードをスッキリさせることができます。

上下のボーダー幅を個別に設定

border-block-start-widthとborder-block-end-widthを使って、上下のボーダーの幅を個別に設定することも可能です。

.header {
    border-block-style: solid;
    border-block-start-width: 8px; /* 上のボーダーの幅を8pxに設定 */
    border-block-end-width: 2px; /* 下のボーダーの幅を2pxに設定 */
    border-block-color: #e74c3c;
}

このコードでは、.header要素の上のボーダーは8px、下のボーダーは2pxに設定されています。異なるボーダー幅を簡単に適用できるため、デザインの柔軟性が高まります。

動的な幅の設定

CSS変数を使うと、border-block-widthの幅を動的に変更することが可能です。以下の例では、CSS変数を使用してボーダーの幅を調整しています。

:root {
    --border-width: 4px; /* 初期値として4pxを設定 */
}
.card {
    border-block-style: dashed;
    border-block-width: var(--border-width); /* 変数を使用してボーダー幅を設定 */
    border-block-color: #2ecc71;
}

この設定により、CSS変数--border-widthに応じて上下のボーダーの幅が調整されます。CSS変数を活用することで、テーマ変更時にも柔軟に対応できます。

注意点

• 書字方向への対応
  border-block-widthは、上と下のボーダーの幅を設定するためのプロパティで、書字方向（横書きや縦書き）に影響されずに適用されます。これにより、国際化対応のデザインでも問題なく使用できます。
• 他のボーダー設定との組み合わせ
  border-block-widthを使用することで、border-block-styleやborder-block-colorと合わせてボーダー全体を統一的に管理できます。ただし、border-top-widthやborder-bottom-widthと同時に使うと、競合する可能性があるため注意しましょう。
• ブラウザのサポート
  border-block-widthはモダンなブラウザで広くサポートされていますが、古いバージョンではサポートされていない場合もあります。必要に応じて、互換性の確認やフォールバックの設定を行いましょう。

border-block-widthの対応ブラウザ

• Chrome: サポート
• Firefox: サポート
• Safari: サポート
• Edge: サポート
• Opera: サポート border-block-widthは、主要なモダンブラウザで広くサポートされていますので、安心して使用できます。

まとめ

border-block-widthは、上下のボーダーの幅を簡単に設定できる便利なCSSプロパティです。デザインの一貫性を保ち、コードの読みやすさを向上させるために活用できます。特に、国際化対応のデザインや、書字方向を考慮したWebレイアウトにおいては非常に有用です。モダンブラウザでのサポートも充実しているため、積極的に利用してデザインの品質を高めましょう。