Logical properties (論理的プロパティ)

ブロック次元

ブロック軸 (block axis) は、ブロックレイアウトにおける要素の積み重ねの順序を定義する軸を参照します。これは、基本的に、段落 (<p>)、見出し、div (<div>) などのコンテンツのブロックがウェブページ上にレイアウトされる次元です。これは、ブロック次元とも呼ばれます。左書きの言語では、ブロック次元はコンテンツのフローの垂直方向、つまり上から下です。

block-start および block-end の次元は、ブロック軸に沿ったコンテンツの先頭の端および末尾の端、あるいは "from" および "to" の方向を表します。横書きでは、block-start は top に、 block-end は bottom に対応します。

インライン次元

インライン軸 (inline axis) は、ブロック軸に対して垂直です。インライン軸は、ブロック内でテキストなどのインラインコンテンツが流れる次元を表します。これはインライン次元とも呼ばれます。英語のような左書きの言語では、インライン次元は水平、つまり左から右です。アラビア語やヘブライ語のような右書きの言語では、インライン次元は水平、つまり右から左です。

inline-start および inline-end は、インライン軸に沿ったコンテンツの先頭の端および末尾の端をそれぞれ表し、値やプロパティにおける inline-start および inline-end は、横書きでは left および right のプロパティや値と同等です。 right と left のどちらと同等であるかは、書字方向によって異なります。例えば、inline-start は、左書きの言語では left、右書きの言語では right です。

関連情報

• CSS 論理的プロパティと値モジュール