概要

border-blockは、CSSでブロック方向（上下）のボーダーを一括で設定するためのプロパティです。このプロパティを使うことで、個別にborder-topやborder-bottomを設定する必要がなくなり、コードを簡潔に保つことができます。特に、言語の書字方向（縦書き・横書き）に依存せずにボーダーを設定できるため、グローバルなWebデザインにおいて便利です。

border-blockの基本

構文

border-block: <line-width> || <line-style> || <color>;

• line-width
  ボーダーの幅を指定します。例：1px、thin、medium、thickなど。
• line-style
  ボーダーのスタイルを指定します。例：solid、dashed、dottedなど。
• color
  ボーダーの色を指定します。例：red、#ff0000、rgb(255, 0, 0)など。

サブプロパティ

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

使用例

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

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

.box {
    border-block: 2px solid #3498db;
}

この設定により、.box要素の上下に2pxの青いボーダーが適用されます。ボーダーの幅、スタイル、色を一度に指定できるので、コードがシンプルになります。

ボーダーの色を指定

ボーダーの色だけを変更したい場合、border-blockを使って色を指定することも可能です。

.container {
    border-block: solid;
    border-block-color: #e74c3c;
}

このコードでは、上下のボーダーが赤色に設定されます。

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

border-block-startとborder-block-endを使って、ブロックの上と下に異なるボーダーを設定できます。

.header {
    border-block-start: 4px solid #2ecc71; /* 上のボーダー */
    border-block-end: 2px dashed #e74c3c; /* 下のボーダー */
}

この設定では、上のボーダーは緑色の4pxの線、下のボーダーは赤色の2pxの破線となります。

注意点

• 書字方向への対応
  border-blockは、書字方向（横書きや縦書き）に関係なくボーダーを設定できるため、国際化対応のデザインに適しています。例えば、右から左に書く言語でも同じように機能します。
• 従来のプロパティとの併用
  border-blockを使用することで、border-topやborder-bottomを個別に設定する手間が省けますが、これらのプロパティを同時に使用すると、特定のブラウザで競合する場合があります。そのため、一貫したスタイルを維持するためには、どちらかに統一することが望ましいです。
• モダンブラウザでのサポート
  border-blockはほとんどのモダンブラウザでサポートされていますが、古いブラウザではサポートされていない場合もあるため、必要に応じてフォールバックの設定を行うと安心です。

border-blockの対応ブラウザ

• Chrome: サポート
• Firefox: サポート
• Safari: サポート
• Edge: サポート
• Opera: サポート 最新のモダンブラウザでは広くサポートされているため、安心して使用できます。

まとめ

border-blockは、ブロック方向のボーダーを簡単に設定できる便利なCSSプロパティです。特にグローバルなWebデザインや、コードの簡潔さを重視する場面で活躍します。上下のボーダーを個別に設定するよりも、まとめて指定することで可読性が向上し、メンテナンスも容易になります。デザインの統一性と効率を向上させるために、ぜひ活用してみてください。