Webサイトを設計するときは、左から右（LTR）と左から左への（RTL）言語の両方に対応することが、グローバルな視聴者にとって不可欠です。ほとんどの開発者は、レイアウト調整にマージン左とマージン右の使用に精通していますが、これらのプロパティは、テキストの方向が変化する環境では不足しています。マージンインラインスタートとその論理的なカウンターパート - 多言語および双方向コンテンツの設計をより簡単にする最新のCSSプロパティ。

を入力します。

この記事では、マージン左/マージン右からマージンインラインスタートおよびマージンインラインエンドに切り替えることが柔軟性を向上させ、LTRおよびRTL言語全体で一貫性を維持する方法を調べます。

。

CSSの論理的プロパティを理解する

マージン左側やマージン右のような従来のCSSプロパティは物理的特性です。つまり、その動作は画面の視覚的な左右に結び付けられています。これは英語のようなLTR言語では正常に機能しますが、ページの方向がアラビア語やヘブライ語などのRTLに切り替わると問題が発生します。

。

CSS3で導入された論理プロパティは、方向と依存しています。それらは、ドキュメントまたは要素の書き込みモードに基づいて適応します。主要な論理マージンプロパティには次のものがあります：

•マージンインラインスタート：LTRのマージン左、RTLのマージン右を置き換えます。
•マージンインラインエンド：LTRのマージン右、RTLのマージン左側を置き換えます。

これらのプロパティは、双方向テキストの自然な流れとよりよく調整され、国際化されたWebデザインに不可欠になります。

。

なぜマージンインラインスタート？

を使用するのか

1-シームレスなrtlサポート
マージン左を使用する場合、テキストの方向に関係なく、要素の左側に常にマージンを適用します。この動作は、ページがRTLに切り替えてレイアウトの整列につながる場合でも変わりません。対照的に、マージンインラインスタートはテキストの方向に基づいて適応し、適切な側面にマージンを適用します。

/ *論理プロパティ */ 。要素 { マージンインラインスタート：20px; } / * */に相当 ：root [dir = "ltr"] .element { マージン左：20px; } ：root [dir = "rtl"] .element { マージン右：20px; }

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

2-クリーナーコード

論理的なプロパティがなければ、LTRとRTLの両方をサポートするには、方向固有のスタイルが必要になり、エラーの複雑さと可能性が追加されます。これが比較です：

従来のアプローチ：

：root [dir = "ltr"] .element { マージン左：20px; } ：root [dir = "rtl"] .element { マージン右：20px; }

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

現代的なアプローチ：

。要素 { マージンインラインスタート：20px; }

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

3-将来のプルーフとスケーラブル

論理的特性は、適応的で柔軟なレイアウトに対するCSSの進行中の進化の一部です。マージンインラインスタートを採用することにより、デザインを最新の基準に合わせて、よりスケーラブルで保守可能にします。

実世界の例

より良いRTLサポートのために典型的なカードレイアウトをリファクタリングする方法は次のとおりです。 前：マージン左を使用

。カード{ マージン左：1rem; パディング左：2REM; }

.card {
 margin-left: 1rem;
 padding-left: 2rem;
}

後：マージンインラインスタート

の使用

。カード{ マージンインラインスタート：1REM; パディングインラインスタート：2REM; }

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

ブラウザーサポート

論理プロパティは、Chrome、Edge、Firefox、Safariなどの最新のブラウザーによくサポートされています。古いブラウザをサポートする必要がある場合は、フォールバックの使用を検討してください。

。カード{ マージン左：1rem; /* 後退する */ マージンインラインスタート：1REM; }

.card {
 margin-left: 1rem; /* Fallback */
 margin-inline-start: 1rem;
}

マージンインラインスタートのような論理プロパティへの切り替えは、アクセシビリティ、保守性、国際化に大きな影響を与える小さな変更です。 Webがますますグローバルになるにつれて、これらのプロパティを採用すると、デザインが世界中のユーザーに包括的で適応性があることが保証されます。

それで、次回マージン左に手を伸ばすとき、一時停止して考慮してください。マージンインラインスタートは仕事をより良くしますか？おそらく、それはそうなるでしょう。

幸せなコーディング、そしてあなたのデザインがどんな言語でも美しく流れるように！