Documentation CSS

この記事で学べること

  • インラインサイズの概念と物理プロパティとの違い
  • inline-size、min-inline-size、max-inline-sizeの使い方
  • 書字方向（writing-mode）との関係
  • 実践的なレイアウトパターン
  • レスポンシブデザインでの活用方法

インラインサイズとは

インラインサイズ（inline-size）は、CSSの論理プロパティの一つで、要素のインライン軸（文字が並ぶ方向）のサイズを制御します。従来の物理プロパティ（width/height）とは異なり、書字方向に応じて自動的に適用される軸が変わります。

インライン軸とブロック軸

CSSの論理プロパティを理解するには、「インライン軸」と「ブロック軸」の概念を把握する必要があります。

【横書き（horizontal-tb）の場合】
┌────────────────────────────┐
│ ← インライン軸（文字の流れる方向）→ │
│                            │
│  ↓ ブロック軸（行の進む方向）     │
│                            │
└────────────────────────────┘
inline-size = 幅（width）
block-size = 高さ（height）

【縦書き（vertical-rl）の場合】
┌──────────┐
│ ↓インライン軸│ ← ブロック軸
│          │
│          │
│          │
└──────────┘
inline-size = 高さ（height）
block-size = 幅（width）

なぜインラインサイズを使うのか

  1. 国際化対応: 異なる書字方向の言語に一つのCSSで対応
  2. 保守性向上: 書字方向の変更に強いコードが書ける
  3. 意図の明確化: 「インライン方向のサイズ」という意図を明示できる
  4. モダンCSS: 現代のCSS設計における標準的なアプローチ

物理プロパティとの比較

従来の物理プロパティ

/* 物理プロパティ: 常に特定の物理的方向を指定 */
.box {
  width: 300px;      /* 常に水平方向 */
  min-width: 200px;  /* 常に水平方向の最小値 */
  max-width: 500px;  /* 常に水平方向の最大値 */
  height: 200px;     /* 常に垂直方向 */
}

論理プロパティ（インラインサイズ）

/* 論理プロパティ: 書字方向に応じて軸が変わる */
.box {
  inline-size: 300px;      /* インライン軸のサイズ */
  min-inline-size: 200px;  /* インライン軸の最小値 */
  max-inline-size: 500px;  /* インライン軸の最大値 */
  block-size: 200px;       /* ブロック軸のサイズ */
}

対応表

論理プロパティ横書き時の物理プロパティ縦書き時の物理プロパティ
inline-sizewidthheight
min-inline-sizemin-widthmin-height
max-inline-sizemax-widthmax-height
block-sizeheightwidth
min-block-sizemin-heightmin-width
max-block-sizemax-heightmax-width

inline-sizeプロパティ

構文

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

使用可能な値

auto（デフォルト）

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

.auto-width {
  /* コンテンツと親要素に応じて自動調整 */
  inline-size: auto;
}

長さの値（px, em, rem, etc.）

固定または相対的なサイズを指定します。

/* 固定サイズ */
.fixed-width {
  inline-size: 400px;
}

/* 相対サイズ（フォントサイズ基準） */
.relative-width {
  inline-size: 20em;
}

/* ルート要素のフォントサイズ基準 */
.root-relative {
  inline-size: 25rem;
}

パーセンテージ（%）

親要素のインラインサイズに対する相対的なサイズを指定します。

/* 親要素のインラインサイズの80% */
.percentage-width {
  inline-size: 80%;
}

min-content

コンテンツが折り返しなしで表示できる最小のサイズになります。

.min-content-width {
  /* テキストの最長の単語幅に収まる */
  inline-size: min-content;
  background: #f0f0f0;
  padding: 1rem;
}

動作例:

「インターナショナリゼーション」というテキストの場合、
min-contentは最も長い単語の幅に縮小されます。

max-content

コンテンツがすべて1行に収まる最大のサイズになります。

.max-content-width {
  /* テキストが折り返さない最大幅 */
  inline-size: max-content;
  background: #e0e0e0;
  padding: 1rem;
}

fit-content()

指定した最大値の範囲内で、コンテンツにフィットするサイズになります。

.fit-content-width {
  /* 最大400pxまで、コンテンツに応じて伸縮 */
  inline-size: fit-content(400px);
  background: #d0d0d0;
  padding: 1rem;
}

min-inline-sizeプロパティ

要素のインライン軸の最小サイズを指定します。コンテンツや親要素のサイズに関わらず、この値より小さくなりません。

構文

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

実用例

/* ボタンの最小幅を保証 */
.button {
  min-inline-size: 120px;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  text-align: center;
}

/* フォーム入力欄の最小幅 */
.input-field {
  min-inline-size: 200px;
  inline-size: 100%;
  max-inline-size: 400px;
}

min-contentとの組み合わせ

/* コンテンツの最小幅を保証しつつ、柔軟に伸縮 */
.flexible-box {
  min-inline-size: min-content; /* 最小でもコンテンツが収まる */
  inline-size: 100%;            /* 可能な限り広がる */
}

max-inline-sizeプロパティ

要素のインライン軸の最大サイズを指定します。コンテンツや親要素のサイズに関わらず、この値より大きくなりません。

構文

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

実用例

/* コンテナの最大幅を制限 */
.container {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto; /* 中央配置 */
}

/* 画像の最大幅を親要素に制限 */
.responsive-image {
  max-inline-size: 100%;
  block-size: auto;
}

読みやすさのための最大幅

/* テキストコンテンツの読みやすい幅を確保 */
.article-content {
  max-inline-size: 65ch; /* 約65文字幅 */
  margin-inline: auto;
  padding-inline: 1rem;
}

書字方向との関係

writing-modeの影響

<div class="horizontal-text">
  横書きテキスト: inline-size は幅として機能
</div>
<div class="vertical-text">
  縦書きテキスト: inline-size は高さとして機能
</div>
/* 共通のインラインサイズ設定 */
.horizontal-text,
.vertical-text {
  inline-size: 300px;
  block-size: 200px;
  border: 2px solid #333;
  padding: 1rem;
}

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

/* 縦書き */
.vertical-text {
  writing-mode: vertical-rl;
  /* 結果: height: 300px, width: 200px */
}

directionプロパティとの関係

directionプロパティ（ltr/rtl）はインラインサイズ自体には影響しませんが、マージンやパディングの論理プロパティに影響します。

/* 右から左の言語（アラビア語など） */
.rtl-content {
  direction: rtl;
  inline-size: 100%;
  max-inline-size: 800px;
  /* インラインサイズは変わらないが、
     margin-inline-start は右側に適用される */
  margin-inline-start: 2rem;
}

実践的なレイアウトパターン

パターン1: レスポンシブコンテナ

/* 基本的なレスポンシブコンテナ */
.responsive-container {
  inline-size: 100%;
  max-inline-size: 1200px;
  min-inline-size: 320px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

パターン2: フレキシブルカードグリッド

<div class="card-grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  inline-size: 100%;
  max-inline-size: 1400px;
  margin-inline: auto;
}

.card {
  inline-size: 100%;
  min-inline-size: 280px;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

パターン3: サイドバーレイアウト

<div class="layout">
  <aside class="sidebar">サイドバー</aside>
  <main class="main-content">メインコンテンツ</main>
</div>
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  inline-size: 100%;
  max-inline-size: 1400px;
  margin-inline: auto;
}

.sidebar {
  inline-size: 100%;
  min-inline-size: 200px;
  max-inline-size: 300px;
  flex: 1;
}

.main-content {
  inline-size: 100%;
  min-inline-size: 0; /* flexアイテムの縮小を許可 */
  flex: 3;
}

/* 大画面ではサイドバーを固定幅に */
@media (min-width: 768px) {
  .sidebar {
    inline-size: 280px;
    flex: none;
  }
}

パターン4: フォームレイアウト

<form class="form">
  <div class="form-group">
    <label for="name">名前</label>
    <input type="text" id="name" class="form-input">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" id="email" class="form-input">
  </div>
  <button type="submit" class="submit-button">送信</button>
</form>
.form {
  inline-size: 100%;
  max-inline-size: 500px;
  margin-inline: auto;
}

.form-group {
  margin-block-end: 1rem;
}

.form-input {
  inline-size: 100%;
  min-inline-size: 200px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
  inline-size: 100%;
  min-inline-size: 120px;
  max-inline-size: 200px;
  padding-block: 0.75rem;
  margin-inline: auto;
  display: block;
}

パターン5: 多言語対応ナビゲーション

/* 横書き・縦書きどちらにも対応するナビゲーション */
.nav {
  inline-size: 100%;
  padding-inline: 1.5rem;
  padding-block: 1rem;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
}

.nav-item {
  inline-size: fit-content(200px);
  padding-inline: 1rem;
  padding-block: 0.5rem;
}

/* 縦書きモードの場合 */
.nav--vertical {
  writing-mode: vertical-rl;
}

.nav--vertical .nav-list {
  flex-direction: column;
  /* inline-sizeが自動的に高さとして機能 */
}

Before/After比較

Before: 物理プロパティのみ使用

/* 横書きと縦書きで別々のスタイルが必要 */

/* 横書き用 */
.content-horizontal {
  width: 80%;
  max-width: 1000px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 縦書き用（別途定義が必要） */
.content-vertical {
  height: 80%;
  max-height: 1000px;
  min-height: 320px;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

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

/* 一つの定義で両方の書字方向に対応 */
.content {
  inline-size: 80%;
  max-inline-size: 1000px;
  min-inline-size: 320px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 書字方向の切り替えはwriting-modeのみで制御 */
.content--horizontal {
  writing-mode: horizontal-tb;
}

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

メリット:

  • コード量が約半分に削減
  • 書字方向の変更が容易
  • 保守性が大幅に向上

ブラウザサポート

インラインサイズ関連のプロパティは、モダンブラウザで広くサポートされています。

ブラウザinline-sizemin-inline-sizemax-inline-size
Chrome57+57+57+
Firefox41+41+41+
Safari12.1+12.1+12.1+
Edge79+79+79+

フォールバック戦略

古いブラウザをサポートする必要がある場合は、物理プロパティをフォールバックとして先に記述します。

.element {
  /* フォールバック（古いブラウザ用） */
  width: 100%;
  max-width: 800px;
  min-width: 300px;

  /* モダンブラウザ用（上書き） */
  inline-size: 100%;
  max-inline-size: 800px;
  min-inline-size: 300px;
}

@supportsを使用した条件分岐

/* 基本スタイル（物理プロパティ） */
.element {
  width: 100%;
  max-width: 800px;
}

/* 論理プロパティをサポートするブラウザ用 */
@supports (inline-size: 100%) {
  .element {
    inline-size: 100%;
    max-inline-size: 800px;
  }
}

注意点とベストプラクティス

1. 一貫した使用

プロジェクト内では、論理プロパティと物理プロパティの使用を一貫させましょう。

/* 良い例: 論理プロパティで統一 */
.card {
  inline-size: 100%;
  max-inline-size: 400px;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 1.5rem;
}

/* 避けるべき例: 混在 */
.card {
  width: 100%;              /* 物理 */
  max-inline-size: 400px;   /* 論理 */
  margin: 0 auto;           /* 物理 */
  padding-inline: 1rem;     /* 論理 */
}

2. デバッグ時の確認

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

// JavaScriptでインラインサイズを取得
const element = document.querySelector('.element');
const style = getComputedStyle(element);

// inlineSizeを直接取得
console.log(style.inlineSize);

// または書字方向を考慮して適切なプロパティを取得
const writingMode = style.writingMode;
if (writingMode.startsWith('horizontal')) {
  console.log('Width:', style.width);
} else {
  console.log('Height (as inline-size):', style.height);
}

3. flexboxとgridとの併用

/* Flexboxでの使用 */
.flex-container {
  display: flex;
  inline-size: 100%;
  max-inline-size: 1200px;
}

.flex-item {
  flex: 1;
  min-inline-size: 0; /* 重要: flexアイテムの縮小を許可 */
}

/* Gridでの使用 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  inline-size: 100%;
  max-inline-size: 1400px;
}

まとめ

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

重要なポイント

ポイント説明
書字方向対応横書き・縦書きで自動的に適切な軸に適用
国際化に最適多言語サイトで一つのCSSで対応可能
保守性向上書字方向の変更に強いコード
モダンなアプローチ現代のCSS設計の標準

使い分けの指針

  • inline-size: 基本的なインライン軸のサイズ指定
  • min-inline-size: 最小サイズの保証（ボタン、入力欄など）
  • max-inline-size: 最大サイズの制限（コンテナ、テキスト幅など）

推奨される使用場面

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

論理プロパティを積極的に活用することで、より柔軟で保守性の高いスタイルシートを作成できます。

参考文献

円