---
title: CSS 論理的プロパティと値
slug: Web/CSS/CSS_Logical_Properties
tags:
  - CSS
  - CSS Logical Properties
  - CSS 論理的プロパティ
  - Landing
  - Reference
  - 概要
translation_of: Web/CSS/CSS_Logical_Properties
---
<p>{{CSSRef}}</p>

<p class="summary"><ruby><strong>CSS 論理的プロパティと値</strong><rp> (</rp><rt>CSS Logical Properties and Values</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。</p>

<p>このモジュールは以前に <abbr title="Cascading Stylesheets">CSS</abbr> 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。</p>

<h3 id="Block_vs._inline" name="Block_vs._inline">ブロックとインライン</h3>

<p>論理プロパティと値は、<em>ブロック</em>と<em>インライン</em>という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存します。</p>

<dl>
 <dt id="block-dimension">ブロック方向</dt>
 <dd>行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。</dd>
 <dt id="inline-dimension">インライン方向</dt>
 <dd>行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。</dd>
</dl>

<h2 id="Reference" name="Reference">リファレンス</h2>

<h3 id="Properties_for_sizing" name="Properties_for_sizing">寸法のプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("block-size")}}</li>
 <li>{{CSSxRef("inline-size")}}</li>
 <li>{{CSSxRef("max-block-size")}}</li>
 <li>{{CSSxRef("max-inline-size")}}</li>
 <li>{{CSSxRef("min-block-size")}}</li>
 <li>{{CSSxRef("min-inline-size")}}</li>
</ul>
</div>

<h3 id="Properties_for_margins_borders_and_padding" name="Properties_for_margins_borders_and_padding">マージン、境界、パディングのプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("border-block")}}</li>
 <li>{{CSSxRef("border-block-color")}}</li>
 <li>{{CSSxRef("border-block-end")}}</li>
 <li>{{CSSxRef("border-block-end-color")}}</li>
 <li>{{CSSxRef("border-block-end-style")}}</li>
 <li>{{CSSxRef("border-block-end-width")}}</li>
 <li>{{CSSxRef("border-block-start")}}</li>
 <li>{{CSSxRef("border-block-start-color")}}</li>
 <li>{{CSSxRef("border-block-start-style")}}</li>
 <li>{{CSSxRef("border-block-start-width")}}</li>
 <li>{{CSSxRef("border-block-style")}}</li>
 <li>{{CSSxRef("border-block-width")}}</li>
 <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("border-inline")}}</li>
 <li>{{CSSxRef("border-inline-color")}}</li>
 <li>{{CSSxRef("border-inline-end")}}</li>
 <li>{{CSSxRef("border-inline-end-color")}}</li>
 <li>{{CSSxRef("border-inline-end-style")}}</li>
 <li>{{CSSxRef("border-inline-end-width")}}</li>
 <li>{{CSSxRef("border-inline-start")}}</li>
 <li>{{CSSxRef("border-inline-start-color")}}</li>
 <li>{{CSSxRef("border-inline-start-style")}}</li>
 <li>{{CSSxRef("border-inline-start-width")}}</li>
 <li>{{CSSxRef("border-inline-style")}}</li>
 <li>{{CSSxRef("border-inline-width")}}</li>
 <li>{{CSSxRef("border-start-start-radius")}}</li>
 <li>{{CSSxRef("border-start-end-radius")}}</li>
 <li>{{CSSxRef("border-end-start-radius")}}</li>
 <li>{{CSSxRef("border-end-end-radius")}}</li>
 <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("margin-block")}}</li>
 <li>{{CSSxRef("margin-block-end")}}</li>
 <li>{{CSSxRef("margin-block-start")}}</li>
 <li>{{CSSxRef("margin-inline")}}</li>
 <li>{{CSSxRef("margin-inline-end")}}</li>
 <li>{{CSSxRef("margin-inline-start")}}</li>
 <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
 <li>{{CSSxRef("padding-block")}}</li>
 <li>{{CSSxRef("padding-block-end")}}</li>
 <li>{{CSSxRef("padding-block-start")}}</li>
 <li>{{CSSxRef("padding-inline")}}</li>
 <li>{{CSSxRef("padding-inline-end")}}</li>
 <li>{{CSSxRef("padding-inline-start")}}</li>
</ul>
</div>

<h3 id="Properties_for_floating_and_positioning" name="Properties_for_floating_and_positioning">浮動と位置指定のプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
 <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
 <li>{{CSSxRef("inset")}}</li>
 <li>{{CSSxRef("inset-block")}}</li>
 <li>{{CSSxRef("inset-block-end")}}</li>
 <li>{{CSSxRef("inset-block-start")}}</li>
 <li>{{CSSxRef("inset-inline")}}</li>
 <li>{{CSSxRef("inset-inline-end")}}</li>
 <li>{{CSSxRef("inset-inline-start")}}</li>
</ul>
</div>

<h3 id="Other_properties" name="Other_properties">その他のプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
 <li>{{CSSxRef("overflow-block")}}</li>
 <li>{{CSSxRef("overflow-inline")}}</li>
 <li>{{CSSxRef("overscroll-behavior-block")}}</li>
 <li>{{CSSxRef("overscroll-behavior-inline")}}</li>
 <li>{{CSSxRef("resize")}} (<code>block</code> and <span style="white-space: nowrap;"><code>inline</code> keywords)</span></li>
 <li>{{CSSxRef("text-align")}} (<code>end</code> および <span style="white-space: nowrap;"><code>start</code> キーワード)</span></li>
</ul>
</div>

<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨になったプロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-end")}} {{Experimental_Inline}} に置き換え)</span></li>
 <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-start")}} {{Experimental_Inline}} に置き換え)</span></li>
 <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-end")}} {{Experimental_Inline}} に置き換え)</span></li>
 <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-start")}} {{Experimental_Inline}} に置き換え)</span></li>
</ul>
</div>

<h2 id="Guides" name="Guides">ガイド</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">論理的プロパティと値の基本概念</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Sizing">寸法の論理的プロパティ</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">マージン、境界、パディングの論理的プロパティ</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">浮動と位置指定の論理的プロパティ</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Logical Properties")}}</td>
   <td>{{Spec2("CSS Logical Properties")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>全般的な対応:</p>

<ul>
 <li>Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。</li>
 <li>Chrome はバージョン69から、プロパティの対応付けに対応しました。</li>
 <li>Edge はバージョン79から Chrome と同様に対応しています。</li>
 <li>Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。</li>
 <li>Internet Explorer は対応していません。</li>
</ul>

<p>互換性情報全体は、それぞれのプロパティページを参照してください。</p>