概要

inset-inlineプロパティは、CSSにおいて要素のインライン方向（通常は左右方向）の位置を制御するためのプロパティです。このプロパティは、従来のleftとrightを統合し、インライン方向の余白や配置を簡単に設定できるため、コードを簡潔にし、書字方向に依存したレイアウトをより柔軟に調整できます。

構文

inset-inline: <長さ> | auto | min-content | max-content;

パラメータ

• <長さ>
  単位を指定した具体的な長さ（px、em、rem、%など）で、インライン方向の位置を指定します。
• auto
  デフォルト値で、要素の位置を自動的に設定します。
• min-content
  コンテンツの最小幅に基づいて位置を設定します。
• max-content
  コンテンツの最大幅に基づいて位置を設定します。

説明

inset-inlineは、要素の左右の位置を一括で設定できる便利なプロパティです。特に、横書きや縦書きのレイアウトで、インライン方向の余白調整を統一的に行いたい場合に有効です。書字方向に依存するプロパティであるため、横書きの場合は左右の位置、縦書きの場合は上下の位置に適用されます。

使用例

以下は、inset-inlineを使用した基本的な例です。

.box {
    position: absolute;
    inset-inline: 15px; /* 左右に15pxの余白を設定 */
}

この設定により、.boxクラスの要素は左右に15pxの位置に配置されます。

個別の値を設定する例

.container {
    position: relative;
}
.item {
    position: absolute;
    inset-inline: 10px 20px; /* 左: 10px, 右: 20px */
}

この例では、inset-inlineを使って左右に異なる値を設定しています。

書字方向に依存する例

.vertical-text {
    writing-mode: vertical-rl; /* 縦書きの設定 */
    position: absolute;
    inset-inline: 10px; /* 縦書きレイアウトでは上下の余白として機能 */
}

縦書きレイアウトでは、inset-inlineは上下方向の位置指定として動作します。

注意点

1. ポジショニングの指定
   inset-inlineプロパティは、position: relative;、absolute;、fixed;、sticky;で指定されている場合にのみ有効です。ポジショニングが指定されていないと効果がありません。
2. 書字方向の影響
   書字方向（横書き、縦書き）によってインライン方向が異なるため、レイアウトに合わせて適切な設定が必要です。
3. ブラウザの互換性
   モダンブラウザでは広くサポートされていますが、古いブラウザでは動作しない場合があります。必要に応じてleft、rightと併用することを検討してください。

まとめ

inset-inlineプロパティは、CSSにおける要素のインライン方向の位置を簡潔に制御するための強力なツールです。書字方向に依存せずにインラインの位置を柔軟に設定できるため、レスポンシブデザインや多言語対応のレイアウトにおいて非常に便利です。使用する際は、ポジショニングや書字方向の影響を考慮し、効果的に設定するようにしましょう。