Documentation CSS

この記事で学べること

  • border-blockプロパティの概念と目的
  • 幅、スタイル、色の一括指定方法
  • border-block-start/endによる個別設定
  • 論理プロパティとしての国際化対応
  • 従来のborder-top/bottomとの違い

概要

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デザインや、コードの簡潔さを重視する場面で活躍します。上下のボーダーを個別に設定するよりも、まとめて指定することで可読性が向上し、メンテナンスも容易になります。デザインの統一性と効率を向上させるために、ぜひ活用してみてください。

ポイントの振り返り

プロパティ対象物理的な対応
border-block上下両方border-top + border-bottom
border-block-start上側border-top
border-block-end下側border-bottom

関連する論理プロパティ

プロパティ説明
border-inlineインライン方向（左右）のボーダー
border-block-widthブロック方向のボーダー幅
border-block-styleブロック方向のボーダースタイル
border-block-colorブロック方向のボーダー色

参考文献

円