Documentation CSS

概要

inline-sizeは、CSSの論理プロパティの一つで、要素のインライン軸（文字が並ぶ方向）のサイズを制御するプロパティです。従来のwidthプロパティとは異なり、書字方向（横書き・縦書き）に応じて自動的に適用される軸が変わるため、国際化対応や多言語サイトの構築に非常に有効です。

inline-sizeが必要な理由

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

widthプロパティとの違い

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

.box {
    width: 300px;  /* 常に水平方向の幅 */
    height: 200px; /* 常に垂直方向の高さ */
}
  • width: 常に水平方向（左右）のサイズを指定
  • height: 常に垂直方向（上下）のサイズを指定
  • 書字方向が変わっても適用される方向は変わらない

論理プロパティ（inline-size）

.box {
    inline-size: 300px;  /* インライン軸（文字の流れる方向）のサイズ */
    block-size: 200px;   /* ブロック軸（文字の進行方向）のサイズ */
}
  • inline-size: 書字方向に応じて、横書きでは幅、縦書きでは高さになる
  • block-size: 書字方向に応じて、横書きでは高さ、縦書きでは幅になる
  • 書字方向の変更に自動対応

構文と基本的な使い方

inline-size: auto | <length> | <percentage> | min-content | max-content | fit-content();

主な値の詳細

auto（デフォルト）

要素の内容とコンテキストに基づいて自動的にサイズを決定します。

.element {
    inline-size: auto;
}

具体的な長さ指定

px、em、rem、%などの単位でサイズを指定します。

.box {
    inline-size: 300px;    /* 固定サイズ */
    inline-size: 50%;      /* 親要素の50% */
    inline-size: 20em;     /* フォントサイズの20倍 */
}

min-content

内容が折り返さずに表示できる最小の幅になります。

.button {
    inline-size: min-content; /* テキストが折り返さない最小幅 */
}

max-content

内容がすべて1行に収まる最大の幅になります。

.heading {
    inline-size: max-content; /* 内容全体が1行に収まる幅 */
}

fit-content()

指定した最大幅内で内容にフィットするサイズになります。

.card {
    inline-size: fit-content(500px); /* 最大500px、内容に応じて縮小 */
}

実践的な使用例

1. 横書きと縦書きで共通のスタイルを使用

<div class="horizontal-text">
    横書きのテキスト
</div>
<div class="vertical-text">
    縦書きのテキスト
</div>
/* 共通のスタイル定義 */
.horizontal-text,
.vertical-text {
    inline-size: 300px;  /* インライン軸で300px */
    block-size: 200px;   /* ブロック軸で200px */
    border: 2px solid #333;
    padding: 20px;
}

/* 横書き（デフォルト） */
.horizontal-text {
    writing-mode: horizontal-tb;
    /* inline-size = width: 300px */
    /* block-size = height: 200px */
}

/* 縦書き */
.vertical-text {
    writing-mode: vertical-rl;
    /* inline-size = height: 300px */
    /* block-size = width: 200px */
}

この例では、同じinline-size: 300pxの指定が、横書きでは幅、縦書きでは高さとして機能します。

2. レスポンシブカードレイアウト

.card {
    inline-size: 100%;
    max-inline-size: 600px;  /* 最大幅を制限 */
    min-inline-size: 280px;  /* 最小幅を保証 */
    margin-inline: auto;     /* 中央配置 */
    padding: 20px;
}

@media (min-width: 768px) {
    .card {
        inline-size: 50%;
    }
}

3. コンテンツに応じた幅の調整

<div class="tag-container">
    <span class="tag">JavaScript</span>
    <span class="tag">CSS</span>
    <span class="tag">HTML</span>
</div>
.tag {
    inline-size: fit-content(150px);
    padding-inline: 12px;
    padding-block: 6px;
    background-color: #e0e0e0;
    border-radius: 4px;
    margin-inline-end: 8px;
}

4. ボタンのサイズ制御

/* min-contentを使用した自動調整ボタン */
.button-auto {
    inline-size: min-content;
    padding-inline: 16px;
    padding-block: 8px;
    white-space: nowrap;
}

/* 固定幅のボタン */
.button-fixed {
    inline-size: 200px;
    padding-block: 12px;
    text-align: center;
}

/* フレキシブルなボタン */
.button-flexible {
    inline-size: 100%;
    max-inline-size: 300px;
    padding-block: 12px;
}

Before/After比較

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

/* 横書き用のスタイル */
.content-ltr {
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* 縦書き用に別途スタイルが必要 */
.content-vertical {
    height: 80%;        /* widthの代わり */
    max-height: 1200px; /* max-widthの代わり */
    margin-top: auto;   /* margin-leftの代わり */
    margin-bottom: auto;/* margin-rightの代わり */
    padding-top: 20px;  /* padding-leftの代わり */
    padding-bottom: 20px; /* padding-rightの代わり */
}

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

/* 横書きでも縦書きでも同じスタイルで対応 */
.content {
    inline-size: 80%;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}

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

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

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

書字方向との関係

横書き（horizontal-tb）

.horizontal {
    writing-mode: horizontal-tb;
    inline-size: 400px;  /* = width: 400px */
    block-size: 300px;   /* = height: 300px */
}
  • インライン軸: 左→右（または右→左）
  • ブロック軸: 上→下
  • inline-sizeは水平方向の幅になる

縦書き（vertical-rl）

.vertical {
    writing-mode: vertical-rl;
    inline-size: 400px;  /* = height: 400px */
    block-size: 300px;   /* = width: 300px */
}
  • インライン軸: 上→下
  • ブロック軸: 右→左
  • inline-sizeは垂直方向の高さになる

視覚的な比較

<div class="demo-container">
    <div class="box horizontal-box">
        横書き: inline-size: 200px
    </div>
    <div class="box vertical-box">
        縦書き: inline-size: 200px
    </div>
</div>
.box {
    inline-size: 200px;
    block-size: 100px;
    border: 2px solid #007bff;
    padding: 10px;
    margin: 10px;
}

.horizontal-box {
    writing-mode: horizontal-tb;
    /* inline-size: 200px → 幅200px */
}

.vertical-box {
    writing-mode: vertical-rl;
    /* inline-size: 200px → 高さ200px */
}

関連する論理プロパティ

サイズ関連

論理プロパティ物理プロパティ（横書き時）説明
inline-sizewidthインライン軸のサイズ
block-sizeheightブロック軸のサイズ
min-inline-sizemin-width最小インラインサイズ
max-inline-sizemax-width最大インラインサイズ
min-block-sizemin-height最小ブロックサイズ
max-block-sizemax-height最大ブロックサイズ

包括的な例

.responsive-container {
    /* サイズ制御 */
    inline-size: 100%;
    max-inline-size: 1200px;
    min-inline-size: 320px;
    block-size: auto;
    min-block-size: 200px;

    /* マージン */
    margin-inline: auto;
    margin-block: 20px;

    /* パディング */
    padding-inline: 20px;
    padding-block: 16px;

    /* ボーダー */
    border-inline: 1px solid #ddd;
    border-block: 2px solid #333;
}

ブラウザサポート状況

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

ブラウザサポート開始バージョン
Chrome57+
Firefox41+
Safari12.1+
Edge79+
Opera44+

フォールバック対応

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

.box {
    /* フォールバック: 物理プロパティを先に記述 */
    width: 300px;
    height: 200px;

    /* モダンブラウザ: 論理プロパティで上書き */
    inline-size: 300px;
    block-size: 200px;
}

よくあるユースケース

1. センター配置されたコンテナ

.container {
    inline-size: 90%;
    max-inline-size: 1200px;
    margin-inline: auto;  /* 左右中央配置 */
    padding-inline: 20px;
}

2. フレキシブルなグリッドアイテム

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.grid-item {
    inline-size: 100%;
    min-inline-size: 250px;
    padding: 16px;
}

3. 多言語対応のナビゲーション

nav {
    inline-size: 100%;
    padding-inline: 24px;
    padding-block: 12px;
}

nav ul {
    inline-size: 100%;
    max-inline-size: 1400px;
    margin-inline: auto;
    display: flex;
    gap: 20px;
}

nav li {
    inline-size: fit-content(200px);
}

4. カードコンポーネント

.card {
    inline-size: 100%;
    max-inline-size: 400px;
    min-inline-size: 280px;
    block-size: auto;
    min-block-size: 300px;

    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;

    /* レスポンシブ対応 */
    @media (min-width: 768px) {
        inline-size: calc(50% - 10px);
    }

    @media (min-width: 1200px) {
        inline-size: calc(33.333% - 14px);
    }
}

注意点と制限事項

1. 学習コストの考慮

論理プロパティは、従来の物理プロパティに慣れた開発者にとって、最初は理解に時間がかかる場合があります。チーム内でのコーディング規約を明確にしておくことが重要です。

2. 混在使用の注意

物理プロパティと論理プロパティを混在させると、意図しない結果になる可能性があります：

/* 避けるべき例 */
.box {
    width: 300px;           /* 物理プロパティ */
    inline-size: 400px;     /* 論理プロパティが優先される */
    /* 結果: inline-size: 400pxが適用 */
}

3. デバッグツールでの表示

ブラウザの開発者ツールでは、計算済みスタイルとして物理プロパティに変換されて表示される場合があります。

4. JavaScriptでの操作

// 論理プロパティの取得
const element = document.querySelector('.box');
const computedStyle = getComputedStyle(element);

// inline-sizeを取得（横書きの場合はwidthと同じ値）
const inlineSize = computedStyle.inlineSize;

// 設定
element.style.inlineSize = '500px';

パフォーマンスへの影響

inline-sizeを含む論理プロパティは、レンダリングパフォーマンスへの影響はほぼありません。ブラウザ内部で適切に最適化されています。

まとめ

inline-sizeプロパティは、書字方向に依存しない柔軟なレイアウト構築のための強力なツールです。

使用時のポイント

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

推奨される使用場面

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

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

参考文献

円