論理的プロパティと値仕様書には、 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 値を同時に設定します。 |
inset-block |
上記のブロック方向における両方の inset 値を同時に設定します。 |
inset |
4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。 |
浮動と解除の例
float および clear プロパティで用いられる物理的な値 left, right, both です。論理的プロパティの仕様書は、 inline-start および inline-end の値を left および right に対応付けて定義しています。
下記の例では、二つのボックスがあります。 — 一つ目は float: left で、二つ目は 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番目のブロックでは論理的な末尾が左になることがわかります。
これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。