物理プロパティより論理プロパティを使う

margin-topといった物理プロパティではなくmargin-block-startといった論理プロパティを使用することの理由や利点について

概要

物理プロパティ(例:margin-top)よりも論理プロパティ(例:margin-block-start)を使用することを推奨します。

論理プロパティの一般的なメリットとして、国際化対応(アラビア語、ヘブライ語などの右から左に書く言語への対応)や縦書きレイアウトへの対応の簡素化が挙げられます。 ただし、実際の業務においてこれらの利点を実感する機会は限定的です(論理プロパティを使用していたからといって、レイアウト調整が一切不要になるケースは少ないのが現状です)。

それでも、以下の理由により論理プロパティの使用を推奨します。

理由・利点

1. 記述が簡潔で効率的

要素を左右中央寄せにする場合を例に挙げます。従来は以下のように記述していました。

div {
  margin-right: auto;
  margin-left: auto;
}

論理プロパティを使用すると、より簡潔に記述できます。

div {
  margin-inline: auto; /* margin-inline-startとmargin-inline-endのショートハンド */
}

この書き方は実際の業務において、コードの可読性と保守性を向上させます。

ある案件では、以下のようなSassのmixinが定義されていました。

@mixin margin-auto {
  margin-right: auto;
  margin-left: auto;
}

.my-element {
  @include margin-auto;
  width: 50%;
}

このような独自mixinの導入は、一見便利に見えても学習コストの増加やプロジェクト間の非互換性を招く要因になります。標準仕様でシンプルに書ける論理プロパティを使えば、そのような回避策も不要になります。

2. Web標準として推奨されている

Web標準を策定する各団体が論理プロパティの使用を推奨しており、標準仕様に準拠することが重要です。

W3C仕様

W3Cの公式仕様「CSS Logical Properties and Values Level 1」(現在、W3C Candidate Recommendation)では、以下のように定義されています。

This module introduces logical properties and values that provide the author the ability to control layout through logical, rather than physical, directions.

この記述から、物理的方向ではなく論理的方向を使用することで、より柔軟で国際化対応に優れたレイアウトを実現できることが明示されています。

出典:CSS Logical Properties and Values Level 1

MDNドキュメント

MDN Web Docs(Mozilla公式ドキュメント)でも以下のように記述されています。

Logical properties are useful when working with different writing modes and directions — they adapt to the writing mode of the document, unlike physical properties.

出典:MDN - Logical properties and values

3. ブラウザのデフォルトスタイルとの整合性

現代のブラウザでは、HTML要素のデフォルトスタイル(ユーザーエージェントスタイル)に論理プロパティが使用されています。

例として、Google Chrome バージョン 137.0.7151.120におけるh1要素のユーザーエージェントスタイルは以下のようになっています。

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

ブラウザのデフォルトスタイルが論理プロパティを使用している以上、カスタムスタイルでもそれに合わせて論理プロパティを使用することが、一貫性の観点から適切です。

基本的な使用方法

マージンとパディング

/* 物理プロパティ(従来の方法) */
.element {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
  padding-top: 0.5rem;
  padding-left: 1rem;
}

/* 論理プロパティ(推奨) */
.element {
  margin-block-start: 1rem;
  margin-inline-end: 2rem;
  margin-block-end: 1rem;
  margin-inline-start: 2rem;
  padding-block-start: 0.5rem;
  padding-inline-start: 1rem;
}

/* ショートハンドプロパティも使用可能 */
.element {
  margin-block: 1rem;
  margin-inline: 2rem;
  padding-block: 0.5rem 1rem;
  padding-inline: 1rem 0.5rem;
}

ボーダー

/* 物理プロパティ */
.element {
  border-top: 2px solid #333;
  border-left: 1px solid #ccc;
}

/* 論理プロパティ */
.element {
  border-block-start: 2px solid #333;
  border-inline-start: 1px solid #ccc;
}

位置指定

/* 物理プロパティ */
.element {
  top: 10px;
  left: 20px;
}

/* 論理プロパティ */
.element {
  inset-block-start: 10px;
  inset-inline-start: 20px;
}

ブラウザサポート

対応状況

論理プロパティは現在、主要なモダンブラウザで広くサポートされています。

詳細な対応状況については、以下のリンクで確認できます: CSS Logical Properties | Can I use

2022年以降にリリースされたバージョンであれば、ほぼ全てのブラウザで使用可能です。 それより古いブラウザをサポートする必要がある場合にのみ、物理プロパティの使用を検討してください。

参考リンク