概要

inset-block-endは、CSSの論理プロパティの一つで、要素をブロック軸の終端から指定した距離に配置するためのプロパティです。従来のbottomプロパティとは異なり、書字方向（横書き・縦書き）に応じて自動的に適用される軸が変わるため、国際化対応や多言語サイトの構築に非常に有効です。

inset-block-endが必要な理由

Webサイトを多言語対応する際、日本語や英語は横書き、モンゴル語や一部の日本語コンテンツは縦書きで表示されます。従来のtop、right、bottom、leftを使用すると、書字方向ごとに異なるCSSを記述する必要がありました。inset-block-endを使用することで、一つのスタイル定義で両方の書字方向に対応できます。

bottomプロパティとの違い

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

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

• bottom: 常に下端からの距離を指定
• left/right: 常に左端/右端からの距離を指定
• 書字方向が変わっても適用される方向は変わらない

論理プロパティ（inset-block-end）

.box {
    position: absolute;
    inset-block-end: 20px;    /* ブロック軸の終端からの距離 */
    inset-inline-start: 10px; /* インライン軸の始点からの距離 */
}

• inset-block-end: 書字方向に応じて、横書きでは下、縦書きでは左または右になる
• inset-inline-start: 書字方向に応じて、横書きでは左、縦書きでは上になる
• 書字方向の変更に自動対応

構文と基本的な使い方

inset-block-end: auto | <length> | <percentage>;

前提条件

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

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

主な値の詳細

auto（デフォルト）

ブラウザが自動的に位置を決定します。

.element {
    position: absolute;
    inset-block-end: auto;
}

具体的な長さ指定

px、em、remなどの単位で距離を指定します。

.box {
    position: absolute;
    inset-block-end: 20px;  /* 固定距離 */
    inset-block-end: 2rem;  /* フォントサイズの2倍 */
}

パーセンテージ

親要素のブロックサイズに対する割合で指定します。

.element {
    position: absolute;
    inset-block-end: 10%;  /* 親要素の10%の位置 */
}

実践的な使用例

1. 横書きレイアウトでの配置

<div class="container">
    <div class="badge">New</div>
</div>

.container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
    border: 2px solid #ddd;
}

.badge {
    position: absolute;
    inset-block-end: 10px;    /* 下端から10px */
    inset-inline-start: 10px; /* 左端から10px */
    background-color: #ff4444;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
}

横書きモードでは、inset-block-end: 10pxはbottom: 10pxと同じ動作をします。

2. 縦書きレイアウトでの配置

.vertical-container {
    position: relative;
    width: 200px;
    height: 300px;
    writing-mode: vertical-rl;  /* 縦書き、右から左 */
    background-color: #e8f4f8;
    border: 2px solid #4a90a4;
}

.vertical-badge {
    position: absolute;
    inset-block-end: 10px;    /* 縦書きでは左端から10px */
    inset-inline-start: 10px; /* 縦書きでは上端から10px */
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
}

縦書き（vertical-rl）モードでは、inset-block-end: 10pxはleft: 10pxと同じ動作をします。

3. フッターの固定配置

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

.footer {
    position: absolute;
    inset-block-end: 0;       /* ブロック軸の終端に配置 */
    inset-inline: 0;          /* 左右いっぱいに広げる */
    block-size: 60px;
    background-color: #333;
    color: white;
    padding: 20px;
}

4. 通知バッジの配置

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

.notification-badge {
    position: absolute;
    inset-block-start: -8px;  /* 上端から少し上 */
    inset-inline-end: -8px;   /* 右端から少し右 */
    background-color: #ff4444;
    color: white;
    border-radius: 50%;
    inline-size: 20px;
    block-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

Before/After比較

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

/* 横書き用のスタイル */
.tooltip-horizontal {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

/* 縦書き用に別途スタイルが必要 */
.tooltip-vertical {
    position: absolute;
    left: 100%;          /* bottomの代わり */
    top: 50%;            /* leftの代わり */
    transform: translateY(-50%);
    margin-left: 8px;    /* margin-bottomの代わり */
}

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

/* 横書きでも縦書きでも同じスタイルで対応 */
.tooltip {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    transform: translate(-50%, 0);
    margin-block-end: 8px;
}

/* 書字方向の指定だけで切り替え可能 */
.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-end: 20px;    /* = bottom: 20px */
    inset-inline-start: 10px; /* = left: 10px */
}

• ブロック軸: 上→下
• インライン軸: 左→右
• inset-block-endは下端からの距離になる

縦書き（vertical-rl）

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

.vertical-rl .positioned {
    position: absolute;
    inset-block-end: 20px;    /* = left: 20px */
    inset-inline-start: 10px; /* = top: 10px */
}

• ブロック軸: 右→左
• インライン軸: 上→下
• inset-block-endは左端からの距離になる

縦書き（vertical-lr）

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

.vertical-lr .positioned {
    position: absolute;
    inset-block-end: 20px;    /* = right: 20px */
    inset-inline-start: 10px; /* = top: 10px */
}

• ブロック軸: 左→右
• インライン軸: 上→下
• inset-block-endは右端からの距離になる

関連する論理プロパティ

配置プロパティの対応表

論理プロパティ	物理プロパティ（横書き時）	説明
inset-block-start	top	ブロック軸の始点からの距離
inset-block-end	bottom	ブロック軸の終端からの距離
inset-inline-start	left	インライン軸の始点からの距離
inset-inline-end	right	インライン軸の終端からの距離

一括指定プロパティ

/* insetショートハンド */
.element {
    position: absolute;

    /* 4つの値を個別に指定 */
    inset-block-start: 10px;
    inset-inline-end: 20px;
    inset-block-end: 30px;
    inset-inline-start: 40px;

    /* insetで一括指定（top right bottom left） */
    inset: 10px 20px 30px 40px;
}

/* ブロック方向のみ一括指定 */
.element {
    inset-block: 10px 30px;  /* start end */
}

/* インライン方向のみ一括指定 */
.element {
    inset-inline: 40px 20px;  /* start end */
}

実践的な組み合わせ

.modal-overlay {
    position: fixed;
    inset: 0;  /* すべての方向を0にして画面全体を覆う */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 90%;
    max-inline-size: 600px;
    block-size: auto;
    max-block-size: 80vh;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
}

ブラウザサポート状況

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

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

フォールバック対応

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

.positioned {
    position: absolute;

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

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

よくあるユースケース

1. カード内のアクションボタン

.card {
    position: relative;
    inline-size: 300px;
    block-size: 400px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.card-actions {
    position: absolute;
    inset-block-end: 16px;
    inset-inline-end: 16px;
    display: flex;
    gap: 8px;
}

2. スティッキーヘッダー

.sticky-header {
    position: sticky;
    inset-block-start: 0;  /* 上端に固定 */
    inset-inline: 0;       /* 左右いっぱいに */
    background-color: white;
    border-block-end: 1px solid #e0e0e0;
    padding: 16px;
    z-index: 100;
}

3. オーバーレイコンテンツ

.image-container {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
}

.image-overlay {
    position: absolute;
    inset: 0;  /* すべての辺を0に */
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.image-caption {
    position: absolute;
    inset-block-end: 20px;
    inset-inline: 20px;
    color: white;
}

4. ドロップダウンメニュー

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    inset-block-start: 100%;  /* 親要素の下に配置 */
    inset-inline-start: 0;
    margin-block-start: 4px;
    inline-size: max-content;
    min-inline-size: 200px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

注意点と制限事項

1. position指定が必須

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

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

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

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

パーセンテージは親要素の対応する軸のサイズを基準にします：

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

.child {
    position: absolute;
    inset-block-end: 10%;  /* 親のblock-size（400px）の10% = 40px */
}

3. transformとの併用

transformと併用する場合、座標系が複雑になることがあります：

.centered {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    /* 要素自身のサイズの半分だけ戻す */
    transform: translate(-50%, -50%);
}

4. z-indexの考慮

複数の要素が重なる場合、z-indexを適切に設定する必要があります：

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.modal {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 1001;  /* overlayより上に */
}

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

開発者ツールでの確認

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

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

よくある問題

問題: inset-block-endを設定したが効果がない

解決策:

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

まとめ

inset-block-endプロパティは、書字方向に依存しない柔軟な配置を実現するための重要なツールです。

使用時のポイント

• 多言語対応: 一つのスタイル定義で横書き・縦書きの両方に対応
• 保守性の向上: 書字方向の変更に強いコードが書ける
• モダンなアプローチ: CSS論理プロパティの標準的な使用方法
• 段階的な移行: 既存のbottomから徐々に移行可能

推奨される使用場面

• 多言語サイトの構築
• 縦書きレイアウトを含むサイト
• 書字方向が動的に変わる可能性があるアプリケーション
• 新規プロジェクトでのモダンなCSS実装

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

参考文献

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