CSS LOGICAL PROPERTIES

Logical Properties Converter

leftは、いつもinline-startではない。 書字方向から対応する辺を確認する。

WIDELY AVAILABLE
01

LIVE FLOW MAPPER

同じ辺、違うプロパティ

HORIZONTAL-TBLTR

flow.local / article

LIVE WRITING MODE
TOP
RIGHT
BOTTOM
LEFT
INLINE STARTINLINE END
BLOCK STARTBLOCK END

FLOW RELATIVE / 072

文章の流れに
合わせて整える。

論理プロパティは、左・右ではなく、文章が始まる辺と進んでいく軸を基準にします。
コードを変換する ↗
APPLIEDmargin-inline-start28px
02

INTENT COMPARISON

「文章の先頭に余白」を比べる

VERTICAL-RLMISALIGNED

flow.local / spacing

EXPECTED: INLINE START

FLOW RELATIVE SPACE

先頭の余白は、
文章と一緒に動く。

縦書きではinline-startが上または下になります。
APPLIEDpadding-left: 38px;
03

PASTE & CONVERT

物理CSSを、論理CSSへ

INPUTPHYSICAL CSS
ロングハンド・サイズ・角丸に対応
OUTPUTLOGICAL CSS
7 properties converted

変換基準horizontal-tb / ltr

各物理辺を、現在のwriting-modeとdirectionで同じ位置になる論理プロパティへ変換します。

04

QUICK REFERENCE

変わるもの、変わらないもの

FLOW RELATIVE

文章と一緒に動かす

余白、内側余白、境界線、配置、幅・高さは、blockとinlineで設計できます。

padding-inline-start: 1rem;
PHYSICAL

画面に固定する

影や画面端の装飾など、書字方向が変わっても同じ物理方向に残したいものはtop・rightなどを使います。

box-shadow: 8px 8px 0;
CASCADE

混在時は後の宣言が勝つ

対応する物理・論理プロパティは同じ値としてカスケードされるため、移行中は記述順にも注意します。

margin-left: 1rem;margin-inline-start: 2rem;