浮動と位置指定の論理的プロパティ

論理的プロパティと値仕様書 (Logical Properties and Values specification) には、 float および clear の物理的な値の論理的な対応付けと、位置指定レイアウトで使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。

マッピングされるプロパティと値

以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の writing-mode は、左書きを想定しています。

論理的プロパティまたは値 物理的プロパティまたは値
float: inline-start float: left
float: inline-end float: right
clear: inline-start clear: left
clear: inline-end clear: right
inset-inline-start left
inset-inline-end right
inset-block-start top
inset-block-end bottom
text-align: start text-align: left
text-align: end text-align: right

これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは inset プロパティを除いて物理的なプロパティに対応付けられていません。

論理的プロパティ 目的
inset-inline インライン方向に上記の両方のインセット値を同時に設定する。
inset-block ブロック方向に上記の両方のインセット値を同時に設定する。
inset 多値の物理的マッピングで 4 つのインセット値を同時に設定します。

浮動と解除の例

float および clear プロパティで用いられる物理的な値 left, right, both です。論理的プロパティの仕様では、 inline-start および inline-end の値を left および right に対応付けて定義しています。

下記の例では、2 つのボックスがあります。 — 1 つ目は float: left で、2 つ目は float: inline-start で浮動させています。 writing-mode を vertical-rl に変更したり、 direction を rtl に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 inline-start で浮動させたアイテムは direction や writing-mode に従います。

例: 位置指定レイアウトにおける inset プロパティ

一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には top, right, bottom, left の物理的なプロパティを使用してきました。

これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面の寸法の相対になります。

論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは inset-block-start, inset-block-end, inset-inline-start, inset-inline-end になります。

以下の例では、 inset-block-start と inset-inline-end プロパティを使用して、青枠を灰色の点線で囲まれた領域 (position: relative) の内側に絶対位置を使用して配置しています 。 writing-mode プロパティを vertical-rl に変更するか、 direction: rtl を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。

新しい 2 つまたは 4 つの値の一括指定

仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。

  • inset — 物理的な対応付けを使用して四辺をすべて設定します。
  • inset-inline — 論理的なインライン方向の内側の距離を両方設定します。
  • inset-block — 論理的なブロック方向の内側の距離を両方設定します。

例: text-align の論理的な値

text-align プロパティは、テキストの方向に関連する論理値を持っています。 left と right に代わり、 start と end を使用することができます。以下の例では、最初のブロックで text-align: right、2番目のブロックで text-align: end を設定しています。

direction の値を rtl に変更すると、最初のブロックでは配置が右に留まりますが、2 番目のブロックでは論理的な末尾が左になることがわかります。

これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。