Web制作の現場において、私たちは長らく「右」「左」という固定概念に縛られてきました。しかし、グローバル展開や多言語対応を見据えたUI設計が求められる今、論理プロパティの活用は避けて通れません。今回は、その中でも特に使い勝手が良く、かつ実務で差がつく「inset-inline-end」というプロパティについて解説します。
なぜ「right」ではなく「inset-inline-end」なのか
従来のCSSでは「right: 0」と指定すれば右端に配置されましたが、これは横書き言語が前提の指定です。アラビア語のような右から左へ読む言語（RTL）では、この指定は意図しない表示崩れを引き起こします。
「inset-inline-end」は、現在の文書の書字方向（writing-mode）に基づいて、インライン軸の終端を自動的に特定します。つまり、日本語や英語なら右端、アラビア語なら左端を指し示すため、コードを書き直すことなく多言語対応が完了するという大きなメリットがあります。
現場で使える具体的な活用事例
私が最近の実務で重宝しているのは、アイコン付きのボタンや、モーダルの閉じるボタンの配置です。
例えば、入力フォームの右端にクリアボタンを配置する場合、これまでは「position: absolute; right: 10px;」と書いていたでしょう。これを「position: absolute; inset-inline-end: 10px;」に置き換えるだけで、将来的にRTL対応のサイトへ拡張する際も、CSSの修正コストがゼロになります。
また、flexboxやgridと組み合わせる際にも非常に便利です。特定の要素を親コンテナの終端に寄せたいとき、マージンに「margin-inline-start: auto;」を使う手法と組み合わせれば、直感的かつロジックの通ったレイアウトを構築できます。
注意点とシニアデザイナーからのアドバイス
唯一の懸念点は、古いブラウザ（特にIEや、かなり古いバージョンのSafariなど）への対応です。もし現在もレガシー環境が必須の案件であれば、postcss-preset-envなどのツールを用いて、ビルド時に物理プロパティ（rightなど）へ自動変換する設定を入れておくのが賢明です。
「右に寄せる」という物理的な指示から、「終端に配置する」という論理的な設計へ。この思考の転換こそが、保守性が高く、世界中で通用するWebサイトを作るための第一歩です。皆さんの現場でも、まずは小さなパーツから「inset-inline-end」への置き換えを試してみてください。その便利さに、きっと手放せなくなるはずです。
コメント