概要

border-inlineは、CSSでインライン方向（左右）のボーダーを一括で設定するためのプロパティです。このプロパティを使用することで、個別にborder-leftやborder-rightを設定する必要がなくなり、コードの簡潔さとメンテナンス性が向上します。特に、インライン方向（テキストの流れに沿った方向）のボーダー設定を簡素化できるため、国際化対応やレイアウトの調整に役立ちます。

border-inlineの基本

構文

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

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

サブプロパティ

• border-inline-start
  インラインの先頭（通常は左側）のボーダーを設定します。
• border-inline-end
  インラインの末尾（通常は右側）のボーダーを設定します。

使用例

基本的な使用例 - インライン方向のボーダーを設定

以下の例では、インライン方向（左右）のボーダーを一括で設定しています。

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

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

ボーダーの色を指定

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

.container {
    border-inline: solid;
    border-inline-color: #e74c3c; /* 赤色のボーダー */
}

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

インラインの左右ボーダーを個別に設定

border-inline-startとborder-inline-endを使って、インラインの左右ボーダーを個別に設定することも可能です。

.header {
    border-inline-start: 4px solid #2ecc71; /* 左側ボーダー */
    border-inline-end: 2px dashed #e74c3c; /* 右側ボーダー */
}

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

レスポンシブデザインでの使用

border-inlineは、レスポンシブデザインにおいても便利です。テキストの流れや書字方向に依存せずにボーダーを設定できるため、多言語対応のデザインで一貫性を保ちやすくなります。

.card {
    border-inline: 3px solid #8e44ad; /* 左右のボーダーを紫色の実線に設定 */
}

この設定により、書字方向が異なる場合でも左右のボーダーが同じスタイルで適用されます。

注意点

• 書字方向への対応
  border-inlineは、インライン方向（左右）のボーダーを設定するため、書字方向（右から左、左から右、縦書き）に関係なく使用できます。これにより、多言語対応のデザインや、異なる書字方向のコンテンツでも一貫したボーダー設定が可能です。
• 他のボーダー設定との併用
  border-inlineとborder-inline-start、border-inline-endを組み合わせることで、インライン方向のボーダーを細かく管理できます。ただし、border-leftやborder-rightと併用するとスタイルが競合することがあるため、スタイルを統一させたい場合はどちらかに統一することが望ましいです。
• ブラウザのサポート
  border-inlineはほとんどのモダンブラウザでサポートされていますが、古いブラウザではサポートされていない可能性があるため、必要に応じてフォールバックを考慮することが重要です。

border-inlineの対応ブラウザ

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

まとめ

border-inlineは、左右のボーダーを一括で設定できる便利なCSSプロパティです。個別にborder-leftやborder-rightを設定するよりも簡潔にコードを管理でき、デザインの一貫性を保つことができます。また、書字方向に関係なく適用されるため、グローバルなWebデザインやレスポンシブ対応にも役立ちます。モダンブラウザでのサポートも充実しているため、ぜひ活用してデザインの品質を向上させましょう。