CSS ポッドキャスト - 012: 論理プロパティ
非常に一般的なユーザー インターフェース パターンは、インライン アイコンをサポートするテキストラベルです。
アイコンはテキストの左側に配置され、2 つの間には小さなギャップがあります。アイコン上の margin-right によって指定されています。ただし、これはテキスト方向が左から右の場合にのみ機能するため、問題があります。アラビア語のような言語のように、テキストの向きを右から左に変更すると、アイコンがテキストの上に配置されます。
CSS ではこれをどう説明していますか？このような状況は、論理プロパティによって解決できます。国際化が自動的にサポートされ、多くのメリットが得られます。それにより、復元性とインクルーシブなフロントエンドを構築できます。
用語
上、右、下、左の物理プロパティは、ビューポートの物理寸法を表します。これらは、地図上のコンパス ローズのようなものと考えることができます。一方、論理プロパティは、コンテンツの流れに関連するボックスの端を指します。そのため、テキスト方向や書き込みモードが変更されると、変更される場合があります。これは方向スタイルからの大きな変更であり、インターフェースのスタイル設定の柔軟性が増しています。
ブロックフロー
ブロックフローは、コンテンツ ブロックが配置される方向です。たとえば、2 つの段落がある場合、ブロックフローに 2 つ目の段落が入ります。 英語のドキュメントの場合、ブロックフローは上から下に順に行われます。これは、テキストの段落が上から下に連続するコンテキストの場合に考えてください。
インライン フロー
インライン フローとは、テキスト内の文章の流れのことです。英語のドキュメントでは、インライン フローは左から右になります。ウェブページのドキュメント言語をアラビア語（<html lang="ar">）に変更すると、インライン フローは右から左になります。
テキストは、ドキュメントの書き込みモードによって決まる方向に流れます。テキストの配置方向は writing-mode プロパティで変更できます。これは、ドキュメント全体に適用することも、個々の要素に適用することもできます。
相対流量
これまで CSS では、辺の方向を基準としてマージンなどのプロパティしか適用できませんでした。たとえば、margin-top は要素の物理上部に適用されます。
論理プロパティの場合、margin-top は margin-block-start になります。つまり、言語やテキストの方向に関係なく、ブロックフローに適切なマージン ルールがあります。
サイズ調整
要素が特定の幅と高さを超えないようにするには、次のようなルールを作成します。
.my-element {
max-width: 150px;
max-height: 100px;
}
フローに関してこれに相当するものは、max-inline-size と max-block-size です。min-height と min-width の代わりに、min-block-size と min-inline-size を使用することもできます。
論理プロパティを使用すると、この幅と高さの最大ルールは次のようになります。
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
開始と終了
上、右、下、左などの方向ではなく、開始と終了を使用してください。これにより、ブロック開始、インライン終了、ブロック終了、インライン スタートができます。これらを使用すると、記述モードの変更に対応する CSS プロパティを適用できます。
たとえば、テキストを右揃えにするには、次の CSS を使用します。
p {
text-align: right;
}
物理的な右側に合わせることではなく、読書の方向の開始位置に揃えることが目的である場合、これは役に立ちません。論理値を使用すると、テキスト方向にマッピングする有用な start 値と end 値を使用できます。テキストの配置ルールは次のようになります。
p {
text-align: end;
}
間隔と配置
margin、padding、inset の論理プロパティにより、要素の配置と、書き込みモードでのこれらの要素の相互作用をより簡単かつ効率的に決定できるようになります。マージンとパディングに関連するプロパティは引き続き方向への直接マッピングですが、主な違いは、書き込みモードが変更されるとそれに応じて変更されることです。
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
これにより、padding で垂直の内部スペースが追加され、margin で左側から押し出されます。top プロパティも値を下にシフトします。同等の論理プロパティを使用すると、次のようになります。
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
これにより、padding でインラインの内部スペースが追加され、margin でインライン スタートから押し出されます。inset-block プロパティは、ブロックの先頭から内側に移動します。
論理プロパティを持つ省略形のオプションは inset-block プロパティだけではありません。マージンとパディング プロパティの簡略版を使用すると、このルールをさらに縮小できます。
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
枠線
border と border-radius の追加は、論理プロパティを使用して行うこともできます。右下と右に半径を指定して枠線を追加するには、次のようなルールを作成します。
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
または、次のように論理プロパティを使用することもできます。
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
border-end-end-radius の end-end はブロックの終点であり、かつインラインの終点です。
単位
論理プロパティには、vi と vb という 2 つの新しい単位があります。vi ユニットは、インライン方向のビューポート サイズの 1% です。非論理プロパティで同等のプロパティは vw です。
vb 単位は、ブロック方向のビューポートの 1% です。非論理プロパティで同等のプロパティは vh です。
これらの単位は常に読み取り方向にマッピングされます。
たとえば、ビューポートの使用可能なインライン スペースの 80% を要素が占めるようにする場合に、vi ユニットを使用すると、書き込みモードが縦向きの場合に、そのサイズが上から下に自動的に切り替わります。
論理プロパティを実用的に使用する
論理プロパティと書き込みモードは、単に国際化を行うためだけのものではありません。これらを使用すると、より汎用性の高いユーザー インターフェースを作成できます。
X 軸と Y 軸にラベルがあるグラフでは、Y ラベルのテキストが垂直方向に読み取られるようにすることができます。
デモの Y 軸ラベルの writing-mode は vertical-rl であるため、両方のラベルで同じ margin 値を使用できます。ブロックの開始位置は Y 軸では右側、X 軸では上であるため、margin-block-start 値は両方のラベルに適用されます。ブロックの始点側はわかりやすいように赤い枠線で示されています。
アイコンの問題を解決する
ここまでが論理プロパティについて説明しました。この知識は最初に検討した設計問題に応用できます。
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
余白はアイコン要素の右側に適用されています。
すべての読み上げ方向をサポートするために、アイコンとテキストの間隔を空けるには、代わりに margin-inline-end プロパティを使用する必要があります。
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
これで、読み上げの方向に関係なく、アイコン自体の配置と間隔を適切に調整できるようになりました。
理解度チェック
論理プロパティの知識をテストする
手で書き込むとき、手首はどの論理軸を動いていますか？
inlineblock論理プロパティのメリットを享受できるものをすべて選択してください
flex-start、block-end、inline-startblock-start、inline。inline-size、max-block-size。border-end-end-radius。下線が引かれているのは、単語の論理的な部分のうちどちらですか？