はじめに

Webサイトのグローバル展開が当たり前となった現代において、多言語対応（国際化/i18n）はフロントエンド開発の重要な課題です。英語や日本語のような左から右に書く言語（LTR: Left-To-Right）だけでなく、アラビア語やヘブライ語のような右から左に書く言語（RTL: Right-To-Left）、さらには日本語の縦書きのような垂直方向に書く言語にも対応する必要があります。

従来のCSSでは、margin-leftやpadding-rightのような物理的な方向を指定するプロパティを使用していました。しかし、これらの物理プロパティはテキストの書字方向が変わると意図した配置にならず、RTL対応のためにスタイルを書き換える必要がありました。

この課題を解決するのがCSS論理プロパティです。論理プロパティを使えば、書字方向に応じて自動的に適切な方向にスタイルが適用されるため、1つのCSSで多言語対応が可能になります。

本記事では、CSS論理プロパティについて以下の内容を解説します。

  • 物理プロパティと論理プロパティの違い
  • inline方向とblock方向の概念
  • margin-inline、padding-block等の使い方
  • RTL対応の実践例

前提条件

本記事を読み進めるにあたり、以下の知識があることを前提としています。

  • CSSの基本構文（セレクタ、プロパティ、値）
  • ボックスモデル（margin、padding、border）の理解
  • 基本的なレイアウトの知識

動作確認環境

  • Google Chrome 131以降
  • Firefox 133以降
  • Safari 18以降
  • Microsoft Edge 131以降

すべてのモダンブラウザでCSS論理プロパティは完全にサポートされています。

物理プロパティと論理プロパティの違い

物理プロパティとは

従来のCSSで使用してきたtop、right、bottom、leftを含むプロパティは**物理プロパティ（Physical Properties）**と呼ばれます。これらは画面の物理的な方向を基準にスタイルを適用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 物理プロパティの例 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  
  padding-left: 16px;
  width: 300px;
  height: 200px;
}

物理プロパティは常に同じ物理的な位置にスタイルを適用します。margin-left: 20pxは、テキストが左から右に書かれようが、右から左に書かれようが、常に要素の左側に余白を設定します。

論理プロパティとは

**論理プロパティ（Logical Properties）**は、コンテンツの書字方向（テキストの流れる方向）を基準にスタイルを適用します。

1
2
3
4
5
6
7
8
9

/* 論理プロパティの例 */
.box {
  margin-block: 10px;
  margin-inline: 20px;
  
  padding-inline-start: 16px;
  inline-size: 300px;
  block-size: 200px;
}

論理プロパティを使用すると、padding-inline-start: 16pxは書字方向に応じて自動的に適切な側に余白を設定します。LTR言語では左側、RTL言語では右側に適用されます。

なぜ論理プロパティが必要なのか

次の図は、物理プロパティと論理プロパティの動作の違いを示しています。

flowchart TB
    subgraph physical["物理プロパティの問題"]
        direction TB
        ltr1["LTR（英語など）"] --> |"margin-left: 20px"| left1["左に20pxの余白"]
        rtl1["RTL（アラビア語など）"] --> |"margin-left: 20px"| left2["左に20pxの余白"]
        note1["テキストの開始位置と余白が不一致"]
    end
    
    subgraph logical["論理プロパティの解決策"]
        direction TB
        ltr2["LTR（英語など）"] --> |"margin-inline-start: 20px"| right2["左に20pxの余白"]
        rtl2["RTL（アラビア語など）"] --> |"margin-inline-start: 20px"| left3["右に20pxの余白"]
        note2["テキストの開始位置に合わせて自動調整"]
    end

物理プロパティを使った場合、RTL言語でテキストの開始位置（右側）と余白の位置（左側）がずれてしまいます。論理プロパティを使えば、書字方向に応じて適切な位置に余白が適用されます。

inline方向とblock方向の概念

CSS論理プロパティを理解する上で最も重要なのが、inline方向とblock方向の概念です。

inline方向

**inline方向（インライン軸）**は、テキストが行の中で流れる方向です。

  • 日本語横書き・英語などのLTR言語: 水平方向（左から右）
  • アラビア語などのRTL言語: 水平方向（右から左）
  • 日本語縦書き: 垂直方向（上から下）

block方向

**block方向（ブロック軸）**は、段落やブロック要素が積み重なる方向です。

  • 横書きモード（horizontal-tb）: 垂直方向（上から下）
  • 縦書きモード（vertical-rl）: 水平方向（右から左）
  • 縦書きモード（vertical-lr）: 水平方向（左から右）

視覚的な理解

次の図は、横書きモードと縦書きモードにおけるinline方向とblock方向の違いを示しています。

flowchart TB
    subgraph horizontal["横書きモード（horizontal-tb）"]
        direction LR
        h1["Block方向"] -.-> |"↓ 上から下"| h1
        h2["Inline方向"] -.-> |"→ 左から右（LTR）"| h2
    end
    
    subgraph vertical["縦書きモード（vertical-rl）"]
        direction TB
        v1["Block方向"] -.-> |"← 右から左"| v1
        v2["Inline方向"] -.-> |"↓ 上から下"| v2
    end

startとend

論理プロパティでは、left/rightの代わりにstart/endを使用します。

物理的な方向 論理的な方向（LTR） 論理的な方向（RTL）
left inline-start inline-end
right inline-end inline-start
top block-start block-start
bottom block-end block-end

inline-startはテキストが始まる側、inline-endはテキストが終わる側を意味します。これにより、書字方向に関係なく「テキストの開始位置」を基準にしたスタイリングが可能になります。

論理プロパティのマッピング一覧

サイズ指定のプロパティ

物理プロパティのwidthとheightに対応する論理プロパティです。

物理プロパティ 論理プロパティ 説明
width inline-size インライン方向のサイズ
height block-size ブロック方向のサイズ
min-width min-inline-size インライン方向の最小サイズ
min-height min-block-size ブロック方向の最小サイズ
max-width max-inline-size インライン方向の最大サイズ
max-height max-block-size ブロック方向の最大サイズ 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 物理プロパティ */
.card {
  width: 300px;
  height: 200px;
  max-width: 100%;
}

/* 論理プロパティ */
.card {
  inline-size: 300px;
  block-size: 200px;
  max-inline-size: 100%;
}

横書きモードでは同じ表示結果になりますが、縦書きモードに切り替えた場合、論理プロパティを使用したスタイルはテキストの流れに合わせて適切に調整されます。

margin関連のプロパティ

marginの論理プロパティは、個別指定とショートハンドの両方が用意されています。

物理プロパティ 論理プロパティ
margin-top margin-block-start
margin-bottom margin-block-end
margin-left margin-inline-start（LTR時）
margin-right margin-inline-end（LTR時）

さらに、両側を一度に指定できるショートハンドがあります。

ショートハンド 説明 値の指定
margin-block block-startとblock-endを同時指定 1値または2値
margin-inline inline-startとinline-endを同時指定 1値または2値 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 物理プロパティ */
.element {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  margin-right: 30px;
}

/* 論理プロパティ（個別指定） */
.element {
  margin-block-start: 10px;
  margin-block-end: 20px;
  margin-inline-start: 30px;
  margin-inline-end: 30px;
}

/* 論理プロパティ（ショートハンド） */
.element {
  margin-block: 10px 20px;  /* start end の順 */
  margin-inline: 30px;       /* 両側に同じ値 */
}

ショートハンドで2つの値を指定した場合、最初の値がstart側、2番目の値がend側に適用されます。1つの値のみ指定した場合は両側に同じ値が適用されます。

padding関連のプロパティ

paddingも同様のパターンで論理プロパティが用意されています。

物理プロパティ 論理プロパティ
padding-top padding-block-start
padding-bottom padding-block-end
padding-left padding-inline-start（LTR時）
padding-right padding-inline-end（LTR時）
ショートハンド 説明
padding-block block-startとblock-endを同時指定
padding-inline inline-startとinline-endを同時指定 
1
2
3
4
5
6
7
8
9

/* ナビゲーションリンクの例 */
.nav-link {
  /* 物理プロパティ */
  padding: 8px 16px;
  
  /* 論理プロパティで書き換え */
  padding-block: 8px;
  padding-inline: 16px;
}

border関連のプロパティ

borderの論理プロパティは、色・スタイル・幅それぞれに対応するプロパティがあります。

物理プロパティ 論理プロパティ
border-top border-block-start
border-bottom border-block-end
border-left border-inline-start
border-right border-inline-end 
1
2
3
4
5
6
7
8
9

/* 物理プロパティ */
.sidebar {
  border-left: 3px solid #3498db;
}

/* 論理プロパティ */
.sidebar {
  border-inline-start: 3px solid #3498db;
}

論理プロパティを使うことで、LTR言語では左側に、RTL言語では右側に境界線が表示されます。

border-radiusの論理プロパティ

角丸の指定も論理プロパティで行えます。名前は少し複雑ですが、border-{block方向}-{inline方向}-radiusの形式になっています。

物理プロパティ 論理プロパティ
border-top-left-radius border-start-start-radius
border-top-right-radius border-start-end-radius
border-bottom-left-radius border-end-start-radius
border-bottom-right-radius border-end-end-radius 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 吹き出しの角丸（右下のみ角丸なし） */
.speech-bubble {
  /* 物理プロパティ */
  border-radius: 8px 8px 0 8px;
  
  /* 論理プロパティ */
  border-start-start-radius: 8px;
  border-start-end-radius: 8px;
  border-end-end-radius: 0;
  border-end-start-radius: 8px;
}

位置指定のプロパティ（inset）

position: absoluteなどで使用するtop、right、bottom、leftにも論理プロパティがあります。

物理プロパティ 論理プロパティ
top inset-block-start
bottom inset-block-end
left inset-inline-start
right inset-inline-end
ショートハンド 説明
inset-block block-startとblock-endを同時指定
inset-inline inline-startとinline-endを同時指定
inset 4辺すべてを指定（物理的） 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 右上に配置するバッジ */
.badge {
  position: absolute;
  
  /* 物理プロパティ */
  top: -8px;
  right: -8px;
  
  /* 論理プロパティ */
  inset-block-start: -8px;
  inset-inline-end: -8px;
}

実践的なコード例

カードコンポーネント

多言語対応のカードコンポーネントを論理プロパティで実装します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.card {
  /* サイズ */
  inline-size: 100%;
  max-inline-size: 400px;
  
  /* パディング */
  padding-block: 24px;
  padding-inline: 20px;
  
  /* ボーダー */
  border-inline-start: 4px solid #3498db;
  border-radius: 8px;
  
  /* 影 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  margin-block-end: 12px;
  font-size: 1.25rem;
  font-weight: bold;
}

.card-content {
  margin-block-end: 16px;
  line-height: 1.6;
}

.card-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="card">
  <h2 class="card-title">カードタイトル</h2>
  <p class="card-content">
    これはカードコンポーネントのサンプルです。
    論理プロパティを使用しているため、RTL言語でも
    自動的に適切なレイアウトになります。
  </p>
  <div class="card-actions">
    <button>キャンセル</button>
    <button>確認</button>
  </div>
</div>

ナビゲーションメニュー

アイコン付きナビゲーションリンクの例です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding-block: 12px;
  padding-inline: 16px;
  
  text-decoration: none;
  color: inherit;
  
  border-inline-start: 3px solid transparent;
  transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  background-color: #f0f0f0;
  border-inline-start-color: #3498db;
}

.nav-link-icon {
  /* アイコンは常に先頭（テキストの開始側）に配置 */
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
}

.nav-link-text {
  flex: 1;
}

LTR言語ではアイコンが左側、RTL言語ではアイコンが右側に表示されます。border-inline-startのアクセントカラーも同様に適切な側に表示されます。

フォームレイアウト

ラベルと入力フィールドを持つフォームの例です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

.form-group {
  margin-block-end: 20px;
}

.form-label {
  display: block;
  margin-block-end: 6px;
  font-weight: 500;
}

.form-input {
  inline-size: 100%;
  padding-block: 10px;
  padding-inline: 12px;
  
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.form-hint {
  margin-block-start: 4px;
  font-size: 0.875rem;
  color: #666;
}

/* エラー時のスタイル */
.form-input.error {
  border-color: #e74c3c;
  padding-inline-end: 40px; /* アイコン用のスペース */
}

.form-error-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
}

RTL対応の実践

directionプロパティとの連携

HTMLのdir属性またはCSSのdirectionプロパティで書字方向を指定すると、論理プロパティは自動的に適切な方向にスタイルを適用します。

1
2
3
4
5

<!-- LTR（英語など） -->
<html lang="en" dir="ltr">

<!-- RTL（アラビア語など） -->
<html lang="ar" dir="rtl">

1
2
3
4
5
6
7
8
9

/* direction プロパティでも指定可能 */
:root {
  direction: ltr; /* または rtl */
}

/* 特定の要素だけRTLにする */
.arabic-text {
  direction: rtl;
}

writing-modeプロパティとの連携

縦書きに対応する場合はwriting-modeプロパティを使用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 横書き（デフォルト） */
.horizontal {
  writing-mode: horizontal-tb;
}

/* 縦書き（右から左に行が進む） */
.vertical-rl {
  writing-mode: vertical-rl;
}

/* 縦書き（左から右に行が進む） */
.vertical-lr {
  writing-mode: vertical-lr;
}

論理プロパティはwriting-modeの変更にも自動的に対応するため、縦書きレイアウトでも追加のスタイル調整は不要です。

RTL対応のベストプラクティス

RTL対応を効率的に行うためのポイントをまとめます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 1. Flexboxの方向は自動的に反転する */
.container {
  display: flex;
  gap: 16px;
  /* RTL時は自動的に右から左に並ぶ */
}

/* 2. text-alignも論理値を使用可能 */
.text-start {
  text-align: start; /* LTR: left, RTL: right */
}

.text-end {
  text-align: end; /* LTR: right, RTL: left */
}

/* 3. floatも論理値を使用可能 */
.float-start {
  float: inline-start; /* LTR: left, RTL: right */
}

/* 4. 非対称なアイコンは反転が必要な場合がある */
.icon-arrow {
  /* RTL時にアイコンを反転 */
}

[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

物理プロパティが適切なケース

すべてを論理プロパティにする必要はありません。以下のケースでは物理プロパティが適切です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 物理プロパティが適切なケース */

/* 1. 常に画面の特定の位置に固定したい要素 */
.fixed-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 2. 物理的なアニメーション（常に左から右へ移動など） */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 3. 非対称なデザイン要素で方向に依存しないもの */
.decorative-gradient {
  background: linear-gradient(to right, #3498db, #9b59b6);
}

ブラウザサポートと導入戦略

現在のブラウザサポート状況

CSS論理プロパティは、2024年時点ですべてのモダンブラウザで完全にサポートされています。

ブラウザ サポート開始バージョン
Chrome 89以降
Firefox 66以降
Safari 15以降
Edge 89以降

段階的な導入方法

既存プロジェクトに論理プロパティを導入する場合は、以下のアプローチが推奨されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 段階的導入: 新規コンポーネントから採用 */

/* 既存のスタイル（そのまま維持） */
.legacy-component {
  margin-left: 20px;
  padding: 16px 24px;
}

/* 新規コンポーネントは論理プロパティを使用 */
.new-component {
  margin-inline-start: 20px;
  padding-block: 16px;
  padding-inline: 24px;
}

レガシーブラウザのサポートが必要な場合は、フォールバックを提供できます。

1
2
3
4
5
6
7

/* フォールバック付きの書き方 */
.element {
  /* フォールバック（古いブラウザ用） */
  margin-left: 20px;
  /* 論理プロパティ（モダンブラウザで上書き） */
  margin-inline-start: 20px;
}

ただし、2026年現在ではフォールバックは基本的に不要です。

まとめ

CSS論理プロパティは、多言語対応のWebサイトを効率的に構築するための強力なツールです。本記事で解説した内容を振り返ります。

  • 物理プロパティと論理プロパティの違い: 物理プロパティは画面の物理的な方向を基準にし、論理プロパティはテキストの書字方向を基準にスタイルを適用する
  • inline方向とblock方向: inlineはテキストが行内で流れる方向、blockは段落が積み重なる方向を表す
  • 主要な論理プロパティ: inline-size/block-size、margin-inline/margin-block、padding-inline/padding-block、inset-inline/inset-blockなどがある
  • RTL対応: dir属性やdirectionプロパティと組み合わせることで、1つのCSSで多言語対応が可能になる

論理プロパティを採用することで、以下のメリットが得られます。

  1. 保守性の向上: RTL対応のための別スタイルが不要になる
  2. コードの簡素化: 条件分岐や上書きルールが減少する
  3. 将来への対応: 新しい言語や書字方向への対応が容易になる

新規プロジェクトでは積極的に論理プロパティを採用し、既存プロジェクトでも新規コンポーネントから段階的に導入することをお勧めします。

参考リンク