概要

inset-blockは、CSSの論理プロパティの一つで、inset-block-startとinset-block-endを一括で設定するショートハンドプロパティです。従来のtopとbottomを組み合わせたような動作をしますが、書字方向（横書き・縦書き）に応じて自動的に適用される軸が変わるため、国際化対応や多言語サイトの構築に非常に有効です。

inset-blockが必要な理由

複数のプロパティを個別に設定する代わりに、ブロック軸の両端からの距離を一度に指定できるため、コードがより簡潔になり、保守性が向上します。特に、書字方向が変わる可能性のあるレイアウトでは、一つのスタイル定義で対応できるメリットがあります。

top/bottomとの違い

従来の物理プロパティ（top/bottom）

.box {
    position: absolute;
    top: 20px;     /* 常に上端からの距離 */
    bottom: 20px;  /* 常に下端からの距離 */
}

• top: 常に上端からの距離を指定
• bottom: 常に下端からの距離を指定
• 書字方向が変わっても適用される方向は変わらない
• 2つのプロパティを別々に記述する必要がある

論理ショートハンドプロパティ（inset-block）

.box {
    position: absolute;
    inset-block: 20px;  /* ブロック軸の両端から20px */
}

/* または個別に指定 */
.box {
    position: absolute;
    inset-block: 10px 30px;  /* 始点から10px、終端から30px */
}

• inset-block: 書字方向に応じて、横書きでは上下、縦書きでは左右になる
• 一つのプロパティで両端の距離を指定可能
• 書字方向の変更に自動対応

構文と基本的な使い方

inset-block: <'inset-block-start'> <'inset-block-end'>?;

前提条件

inset-blockが機能するには、要素にpositionプロパティが必要です：

.element {
    position: absolute; /* または relative, fixed, sticky */
    inset-block: 20px;
}

値の指定パターン

1つの値を指定

両端（始点と終端）に同じ値が適用されます。

.element {
    position: absolute;
    inset-block: 20px;
    /* 以下と同じ */
    /* inset-block-start: 20px; */
    /* inset-block-end: 20px; */
}

2つの値を指定

最初の値が始点、2番目の値が終端に適用されます。

.element {
    position: absolute;
    inset-block: 10px 30px;
    /* 以下と同じ */
    /* inset-block-start: 10px; */
    /* inset-block-end: 30px; */
}

autoの使用

.element {
    position: absolute;
    inset-block: auto 20px;  /* 始点は自動、終端は20px */
}

実践的な使用例

1. 要素を垂直方向に中央配置

<div class="container">
    <div class="centered-box">中央配置</div>
</div>

.container {
    position: relative;
    block-size: 400px;
    background-color: #f0f0f0;
    border: 2px solid #ddd;
}

.centered-box {
    position: absolute;
    inset-block: 0;  /* 上下を0にして高さいっぱいに */
    margin-block: auto;  /* 垂直方向の中央配置 */
    inline-size: 200px;
    block-size: 100px;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

2. ヘッダーとフッターの配置

.page {
    position: relative;
    min-block-size: 100vh;
}

.header {
    position: sticky;
    inset-block-start: 0;  /* 上端に固定 */
    block-size: 60px;
    background-color: #333;
    color: white;
}

.footer {
    position: absolute;
    inset-block-end: 0;    /* 下端に固定 */
    inset-inline: 0;       /* 左右いっぱいに */
    block-size: 80px;
    background-color: #222;
    color: white;
}

3. モーダルウィンドウの余白

.modal-overlay {
    position: fixed;
    inset: 0;  /* すべての方向を0に */
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    inline-size: 90%;
    max-inline-size: 600px;
    max-block-size: 80vh;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    /* 上下に余白を作る */
    margin-block: 40px;
}

4. スクロール可能なコンテンツ領域

.scrollable-container {
    position: relative;
    block-size: 100vh;
}

.scrollable-content {
    position: absolute;
    inset-block: 60px 80px;  /* ヘッダー60px、フッター80pxを除く */
    inset-inline: 0;
    overflow-y: auto;
    padding: 20px;
}

Before/After比較

Before: 物理プロパティを使用

/* 横書き用のスタイル */
.content-horizontal {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 10%;
    right: 10%;
}

/* 縦書き用に別途スタイルが必要 */
.content-vertical {
    position: absolute;
    right: 20px;    /* topの代わり */
    left: 20px;     /* bottomの代わり */
    top: 10%;       /* leftの代わり */
    bottom: 10%;    /* rightの代わり */
}

After: 論理プロパティを使用

/* 横書きでも縦書きでも同じスタイルで対応 */
.content {
    position: absolute;
    inset-block: 20px;     /* ブロック軸の両端から20px */
    inset-inline: 10%;     /* インライン軸の両端から10% */
}

/* 書字方向の指定だけで切り替え可能 */
.horizontal {
    writing-mode: horizontal-tb;
}

.vertical {
    writing-mode: vertical-rl;
}

書字方向に依存しない一つのスタイル定義で、両方のレイアウトに対応できます。

書字方向との関係

横書き（horizontal-tb）

.horizontal {
    writing-mode: horizontal-tb;
    position: relative;
}

.horizontal .positioned {
    position: absolute;
    inset-block: 20px 40px;
    /* 以下と同じ */
    /* top: 20px; */
    /* bottom: 40px; */
}

• ブロック軸: 上→下
• inset-block-start: 上端からの距離
• inset-block-end: 下端からの距離

縦書き（vertical-rl）

.vertical-rl {
    writing-mode: vertical-rl;
    position: relative;
}

.vertical-rl .positioned {
    position: absolute;
    inset-block: 20px 40px;
    /* 以下と同じ */
    /* right: 20px; */
    /* left: 40px; */
}

• ブロック軸: 右→左
• inset-block-start: 右端からの距離
• inset-block-end: 左端からの距離

縦書き（vertical-lr）

.vertical-lr {
    writing-mode: vertical-lr;
    position: relative;
}

.vertical-lr .positioned {
    position: absolute;
    inset-block: 20px 40px;
    /* 以下と同じ */
    /* left: 20px; */
    /* right: 40px; */
}

• ブロック軸: 左→右
• inset-block-start: 左端からの距離
• inset-block-end: 右端からの距離

関連する論理プロパティ

配置プロパティの対応表

論理プロパティ	物理プロパティ（横書き時）	説明
inset-block	top + bottom	ブロック軸の両端からの距離
inset-inline	left + right	インライン軸の両端からの距離
inset	top + right + bottom + left	すべての方向の距離

insetファミリーの関係

/* 個別プロパティ */
.element {
    inset-block-start: 10px;
    inset-block-end: 20px;
    inset-inline-start: 30px;
    inset-inline-end: 40px;
}

/* ショートハンド（軸ごと） */
.element {
    inset-block: 10px 20px;   /* start end */
    inset-inline: 30px 40px;  /* start end */
}

/* 完全なショートハンド */
.element {
    inset: 10px 40px 20px 30px;  /* block-start inline-end block-end inline-start */
}

実践的な組み合わせ

/* 全方向に余白を持つオーバーレイ */
.overlay {
    position: fixed;
    inset: 20px;  /* すべての方向から20px */
}

/* ブロック方向のみ制約 */
.constrained-block {
    position: absolute;
    inset-block: 0;      /* 上下いっぱいに */
    inset-inline: 20px;  /* 左右は20px余白 */
}

/* 中央配置パターン */
.centered {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 300px;
    block-size: 200px;
}

ブラウザサポート状況

inset-blockプロパティは、モダンブラウザで広くサポートされています：

ブラウザ	サポート開始バージョン
Chrome	87+
Firefox	63+
Safari	14.1+
Edge	87+
Opera	73+

フォールバック対応

古いブラウザをサポートする必要がある場合：

.positioned {
    position: absolute;

    /* フォールバック: 物理プロパティを先に記述 */
    top: 20px;
    bottom: 40px;

    /* モダンブラウザ: 論理プロパティで上書き */
    inset-block: 20px 40px;
}

よくあるユースケース

1. 固定ヘッダーを除いたコンテンツ領域

.app-container {
    position: relative;
    block-size: 100vh;
}

.app-header {
    position: sticky;
    inset-block-start: 0;
    block-size: 64px;
    background-color: #fff;
    border-block-end: 1px solid #e0e0e0;
    z-index: 100;
}

.app-content {
    position: absolute;
    inset-block: 64px 0;  /* ヘッダーの高さ分下から、フッターなし */
    inset-inline: 0;
    overflow-y: auto;
    padding: 20px;
}

2. サイドバー付きレイアウト

.layout-container {
    position: relative;
    min-block-size: 100vh;
}

.sidebar {
    position: fixed;
    inset-block: 0;  /* 上下いっぱいに */
    inset-inline-start: 0;
    inline-size: 250px;
    background-color: #f5f5f5;
    border-inline-end: 1px solid #ddd;
}

.main-content {
    margin-inline-start: 250px;
    min-block-size: 100vh;
}

3. スティッキーフッター

.page-wrapper {
    position: relative;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
}

.page-footer {
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    block-size: 60px;
    background-color: #333;
    color: white;
}

4. ツールチップの配置

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    inset-block-end: 100%;  /* 親要素の上に配置 */
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-block-end: 8px;
    padding: 8px 12px;
    background-color: #333;
    color: white;
    border-radius: 4px;
    white-space: nowrap;
}

注意点と制限事項

1. position指定が必須

inset-blockは配置プロパティなので、positionがstatic以外である必要があります：

/* 動作しない例 */
.element {
    /* position指定なし（デフォルトはstatic） */
    inset-block: 20px;  /* 効果なし */
}

/* 正しい例 */
.element {
    position: relative;  /* または absolute, fixed, sticky */
    inset-block: 20px;  /* 効果あり */
}

2. 値の順序

2つの値を指定する場合、順序はstart endです：

.element {
    inset-block: 10px 30px;
    /* inset-block-start: 10px; */
    /* inset-block-end: 30px; */
}

3. サイズとの関係

inset-blockで両端を指定すると、要素のブロックサイズが決まります：

.parent {
    position: relative;
    block-size: 400px;
}

.child {
    position: absolute;
    inset-block: 50px;  /* 上下から50pxずつ */
    /* 結果: block-size: 300px (400 - 50 - 50) */
}

4. パーセンテージの基準

パーセンテージは親要素のブロックサイズを基準にします：

.parent {
    position: relative;
    block-size: 600px;
}

.child {
    position: absolute;
    inset-block: 10% 20%;
    /* inset-block-start: 60px (10% of 600px) */
    /* inset-block-end: 120px (20% of 600px) */
}

デバッグとトラブルシューティング

開発者ツールでの確認

ブラウザの開発者ツールを使用すると、inset-blockの計算値を確認できます：

1. 要素を右クリック→「検証」
2. Computedタブで計算済みの値を確認
3. 書字方向に応じて物理プロパティに変換された値が表示される

よくある問題

問題: inset-blockを設定したが要素が意図した位置にない

解決策:

• positionプロパティが設定されているか確認
• 親要素にposition: relativeが設定されているか確認（absolute配置の場合）
• 書字方向が意図通りか確認
• 他の配置プロパティと競合していないか確認

問題: 要素のサイズが意図と異なる

解決策:

• inset-blockで両端を指定すると、要素のブロックサイズが自動的に決まることを理解する
• 明示的にblock-sizeを指定する場合は、inset-blockの一方をautoにする

まとめ

inset-blockプロパティは、ブロック軸方向の配置を簡潔に記述できる強力なショートハンドプロパティです。

使用時のポイント

• コードの簡潔化: 2つのプロパティを1つにまとめられる
• 多言語対応: 一つのスタイル定義で横書き・縦書きの両方に対応
• 保守性の向上: 書字方向の変更に強いコードが書ける
• 柔軟な配置: 中央配置や両端からの余白を簡単に実現

推奨される使用場面

• 要素をブロック軸方向に中央配置したい場合
• ヘッダーやフッターを除いたコンテンツ領域を定義する場合
• 書字方向が変わる可能性のあるレイアウト
• 新規プロジェクトでのモダンなCSS実装

今後のWeb開発では、論理プロパティの使用が標準になっていくと考えられます。inset-blockを含む論理プロパティを積極的に活用することで、より柔軟で保守性の高いスタイルシートを作成できます。

参考文献

• inset-block - CSS: Cascading Style Sheets | MDN
• CSS Logical Properties and Values - W3C
• CSS Positioned Layout Module - W3C
• Understanding Logical Properties And Values - Smashing Magazine