こんにちは。アイレットデザイン事業部のマークアップ/フロントエンドエンジニアの工藤です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。
今回のテーマはCSS論理プロパティです。
I18Nの要請
コンピューターサイエンスの世界ではある特定の1カ国語しか扱うことができないプログラムを他言語でも利用できるようにしたり、そういった改修をしやすいようにあらかじめ準備しておこうという I18N（Internationalization・インターナショナライゼーション、国際語化対応） の思想があります。
地球上のすべての文字の規格が統一したUnicodeなどはI18Nの代表的事例ですね。
webフロントエンドにおけるI18N実装例は、HTMLファイルの冒頭部に<html lang="ja-jp">などと記載（記載例は日本における日本語で書かれたテキストであることを表している）するlang属性がもっとも馴染み深いものでしょう。
2018年から登場した新しいCSS論理プロパティ（Logical Properties）はwebフロントエンドのI18Nを強力に後押しする機能が備わっており、これまで以上にI18Nを取り入れる機会が増えて来そうです。
論理プロパティ
本題です。論理プロパティを簡単に説明すると、オブジェクトをレイアウトする際に上下と左右といった物理的な方向ではなく、block-startとblock-end、inline-startとinline-endによって論理的に表現しようというものです。
この説明だといまいち捉えにくいので、ユースケースを想定してみましょう。
英語の文章の表記方向（writing-mode）は左から右（LTR）へ書きますが、伝統的な日本語や漢文は縦書き（vertical）です。また、アラビア語は左から右（RTL）です。
美しくレイアウトされたwebサイトをいざ多言語対応しようとした時に、従来のmarginやpadding, text-alignといった物理プロパティはこうした文字方向の変化にはうまく対応することができませんね。
ここで論理プロパティの出番です。ウェブサイト制作において論理プロパティを活用すればスタイルの変更を最小限に抑えながらLTR以外の表記方向へのレイアウト変更を容易に行えます。
つまり同じpadding-inline-startの意味が言語によって自動的に変化します。
- 英語なら
padding-inline-startは従来のpadding-leftの意味となり、 - アラビア語なら
padding-inline-startは従来のpadding-rightの意味となり、 - 伝統的な日本語なら
padding-inline-startは従来のpadding-topの意味となる。
ということです。
これはCodePenで実際のサンプルを見るとさらにわかりやすいかと思います。
文字の左右方向はdir属性で意味論的に表現されており、縦書きはCSSのwriting-mode: vertical-rl;で制御しています。
See the Pen
logical border-radius by Hibiki Kudo (@h_kudo)
on CodePen.
アラビア語対応や縦書き対応が必要な案件は少ないかもしれませんが、I18Nには改変しやすくあらかじめ準備しておくことも含むので、「やっていき」で少しづつ取り入れていくといいかもしれません。このあたりの意識はアクセシビリティへの取り組み方と似ているかなと思います。
論理プロパティと物理プロパティの対応関係
論理プロパティは以下の通り従来の物理プロパティに対応します。
サイズ関連
| 物理プロパティ | 論理プロパティ |
|---|---|
width |
inline-size |
max-width |
max-inline-size |
min-width |
min-inline-size |
height |
block-size |
max-height |
max-block-size |
min-height |
min-block-size |
Border関連
| 物理プロパティ | 論理プロパティ |
|---|---|
border-top |
border-block-start |
border-bottom |
border-block-end |
border-left |
border-inline-start |
border-right |
border-inline-end |
Border個別指定の例
| 物理プロパティ | 論理プロパティ |
|---|---|
border-top-color |
border-block-start-color |
border-top-width |
border-block-start-width |
border-top-style |
border-block-start-style |
Border上下と左右を一括で指定する
従来なかった方法として、Borderの上下と左右をそれぞれ一括で指定することができるようになりました。
| 物理プロパティ | 論理プロパティ |
|---|---|
border-topとborder-bottom |
border-block |
border-leftとborder-right |
border-inline |
Margin
| 物理プロパティ | 論理プロパティ |
|---|---|
margin-top |
margin-block-start |
margin-bottom |
margin-block-end |
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
Margin上下と左右を一括で指定する
Marginの上下と左右をそれぞれ一括で指定することもできるようになりました。
| 物理プロパティ | 論理プロパティ |
|---|---|
margin-topとmargin-bottom |
margin-block |
margin-leftとmargin-right |
margin-inline |
Padding
| 物理プロパティ | 論理プロパティ |
|---|---|
padding-top |
padding-block-start |
padding-bottom |
padding-block-end |
padding-left |
padding-inline-start |
padding-right |
padding-inline-end |
Padding上下と左右を一括で指定する
Paddingの上下と左右をそれぞれ一括で指定することもできるようになりました。
| 物理プロパティ | 論理プロパティ |
|---|---|
padding-topとpadding-bottom |
padding-block |
padding-leftとpadding-right |
padding-inline |
Position関連
| 物理プロパティ | 論理プロパティ |
|---|---|
top |
inset-block-start |
bottom |
inset-block-end |
left |
inset-inline-start |
right |
inset-inline-end |
Positionの上下と左右を一括で指定する
| 物理プロパティ | 論理プロパティ |
|---|---|
topとbottom |
inset-block |
leftとright |
inset-inline |
inset プロパティは特に使えそう
従来のleft, right, top, bottomを1つのプロパティで表しているinsetプロパティは
inset: 10px 20px 5px 10px;
このように指定できて便利そうです。
これはつまり…
.center{
position: absolute;
margin: auto;
inset: 0;
}
たったこれだけのシンプルな指定で絶対位置要素の上下左右中央寄せができるということですよね！邪道かもしれませんがコーディングの手間削減目的でこういったところから論理プロパティに慣れていくのもアリかと思います。
Text align
| 論理プロパティの値 | 表記方向 | 対応する物理プロパティの値 |
|---|---|---|
start |
LTR | left |
start |
RTL | right |
end |
LTR | right |
end |
RTL | left |
Border-radius
| 物理プロパティ | 論理プロパティ |
|---|---|
border-top-left-radius |
border-start-start-radius |
border-top-right-radius |
border-start-end-radius |
border-bottom-left-radius |
border-end-start-radius |
border-bottom-right-radius |
border-end-end-radius |
Float関連
| 物理プロパティ | 論理プロパティ |
|---|---|
float: left |
float: inline-start |
float: right |
float: inline-end |
clear: left |
clear: inline-start |
clear: right |
clear: inline-end |
ResizeとOverflow
| 物理プロパティ | 論理プロパティ |
|---|---|
resize: vertical |
resize: block |
resize: horizontal |
resize: inline |
overflow-y |
overflow-block |
overflow-x |
overflow-inline |
上記の物理プロパティ一覧表を視覚的に表したコードがこちらになります（Adrian Roselli氏の作品）。
See the Pen
Logical Properties Mapping by Adrian Roselli (@aardrian)
on CodePen.
参考
所感
論理プロパティはすでにすべてのモダンブラウザで使用可能となっており、また上下左右中央寄せなどをシンプルに記述できるという利点があることから、CSSの新しいプロパティの中でも比較的使っていきやすいものであると考えます。
私も今後の開発案件で論理プロパティを使っていきたいと思います。ではまた?
P.S. アイレットではエンジニア、デザイナーを募集しています。詳しくは採用情報のページをご覧ください。
簡単30秒