寸法指定の論理的プロパティ

このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。

アイテムの寸法を指定するときに、論理的プロパティと値モジュールにより、水平・垂直の物理的な長さ（左や右など）に関連する物理的な寸法ではなく、テキストの流れ（インラインとブロック）に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。

長さへの対応付け

以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような horizontal-tb の書字方向を想定しており、この場合は width が inline-size に対応付けられます。

縦書きモードの場合は、 inline-size は height に対応付けられます。

論理的プロパティ 物理的プロパティ
inline-size width
block-size height
min-inline-size min-width
min-block-size min-height
max-inline-size max-width
max-block-size max-height

幅と高さの例

width と height の論理的な対応付けでは、 inline-size がインライン次元の長さを設定し、 block-size がブロック次元の長さを設定します。英語の場合は、 width を inline-size で、 height を block-size で置き換えると同じレイアウトになります。

以下のライブデモでは、書字方向を horizontal-tb に設定しました。これを vertical-rl に変更すると、最初の例 — width と height を使用したもの — では、テキストが縦書きになっても、それぞれの方向が同じ寸法になります。 2 番目の例 — inline-size と block-size を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。

html
<div class="container">
  <div class="physical box">これは width が 200px で height が 100px です。</div>

  <div class="logical box">
    これは inline-size が 200px で block-size が 100px です。
  </div>
</div>
css
.box {
  writing-mode: horizontal-tb;
}

.physical {
  width: 200px;
  height: 100px;
}

.logical {
  inline-size: 200px;
  block-size: 100px;
}

最小幅と最小高の例

min-width と min-height も、 min-inline-size と min-block-size に対応付けられます。これらは inline-size および block-size プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。

最初の例のように、以下の例を vertical-rl に変更してみて、その作用を確認してみてください。最初の例では min-height を使用しており、二番目の例では min-block-size を使用しています。

html
<div class="container">
  <div class="physical box">
    これは width が 200px で min-height が 5em です。
  </div>

  <div class="logical box">
    これは inline-size が 200px で min-block-size が 5em です。
  </div>
</div>
css
.box {
  writing-mode: horizontal-tb;
}

.physical {
  width: 200px;
  min-height: 5em;
}

.logical {
  inline-size: 200px;
  min-block-size: 5em;
}

最大幅と最大高の例

最後に max-inline-size と max-block-size を、 max-width と max-height の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。

html
<div class="container">
  <div class="physical box">これは max-width が 200px です。</div>

  <div class="logical box">これは max-inline-size が 200px です。</div>
</div>
css
.box {
  writing-mode: horizontal-tb;
}

.physical {
  max-width: 200px;
}

.logical {
  max-inline-size: 200px;
}

リサイズの論理キーワード

resize プロパティは、アイテムの大きさが変わるかどうかを物理的な値である horizontal および vertical で指定します。 resize プロパティは論理的なキーワード値にも対応しています。 resize: inline を使用すると、インライン次元の大きさが変わることを許可し、 resize: block を使用すると、ブロック次元の大きさが変わることを許可します。

both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。

html
<div class="container">
  <div class="physical box">
    これは width が 200px で height が 100px です。水平方向にサイズ変更ができます。
  </div>

  <div class="logical box">
    これは inline-size が 200px で block-size が 100px です。インライン方向にサイズ変更ができます。
  </div>
</div>
css
.box {
  writing-mode: horizontal-tb;
  overflow: scroll;
}

.physical {
  width: 200px;
  height: 100px;
  resize: horizontal;
}

.logical {
  inline-size: 200px;
  block-size: 100px;
  resize: inline;
}