【CSS Modules】:left疑似クラスの使い方

:leftオブジェクトは、CSSにおいて、常に物理的な左側を指す要素を表すオブジェクトです。

この:leftはCSSの擬似クラスの一つであり、主にユーザーインターフェース（UI）要素の配置において、書字方向（writing-modeプロパティなどで指定されるテキストの記述方向）に依存せず、常に物理的な左側を基準としてスタイルを適用したい場合に利用されます。

一般的なWebページでは、テキストは左から右へ、上から下へと流れます（writing-mode: horizontal-tb）。この場合、物理的な左側とテキストの論理的な開始位置は同じになります。しかし、アラビア語のように右から左へテキストが流れる言語（writing-mode: horizontal-rl）や、日本語の縦書きのように上から下へ、右から左へテキストが流れる言語（writing-mode: vertical-rlなど）の場合、テキストの論理的な開始位置や終了位置は、物理的な左右の位置とは一致しません。

:leftは、このような書字方向や言語設定の違いに影響されず、ブラウザの表示領域における純粋な「左側」を指します。例えば、Webページの左端に常に固定されるサイドバーや、画面の左側に表示させたいナビゲーション要素など、特定のUI要素を物理的な左側に配置したい場合に、この:left擬似クラスを用いてスタイルを適用することができます。

これは、CSS Logical Properties and Values Level 1で導入された概念であり、論理的な方向を示す:startや:endといった擬似クラスとは異なり、物理的な位置を明確に指定したい場面で活用されます。これにより、より柔軟で国際化に対応しやすいWebデザインの実現に貢献します。

Copy
1@page :left {
2  margin-left: 2cm;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません