【CSS Modules】margin-inline-startプロパティの使い方

margin-inline-startプロパティは、要素のインライン方向の開始側に設定されるマージンを保持するプロパティです。このプロパティは、CSS論理プロパティの一つであり、テキストの書き込み方向（direction や writing-mode プロパティで定義される）に基づいて、適用される物理的なマージンの位置が自動的に決定されます。

具体的には、左から右へ書く言語（例: 英語や日本語の横書きなど）では、margin-inline-start は margin-left と同じ効果を持ちます。一方で、右から左へ書く言語（例: アラビア語やヘブライ語など）では、margin-right と同じ効果を発揮します。また、縦書きモード（writing-mode が vertical-rl など）の場合には、ブロックの開始側、例えば上部に相当するマージンとして機能します。

このプロパティを利用することで、多言語対応や国際化対応を行う際に、言語の読み書き方向が変わってもCSSコードを書き換えることなく、自動的に適切なマージンが適用されます。これにより、非常に柔軟で保守性の高いレイアウトを実現することが可能です。設定できる値は、具体的な長さ（pxやemなどの単位）、親要素に対するパーセンテージ（%）、または自動で計算される auto です。初期値は 0 となっています。物理的なマージンプロパティと異なり、margin-inline-start を使用することで、よりセマンティックで将来にわたって適応しやすいWebデザインを構築できます。

Copy
1.element {
2  margin-inline-start: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません