こんにちは。アイレットデザイン事業部のマークアップ/フロントエンドエンジニアの工藤です。アイレットデザイン事業部では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. アイレットではエンジニア、デザイナーを募集しています。詳しくは採用情報のページをご覧ください。