CSSの最近のプロパティでは、よく「インライン方向」や「ブロック方向」という言葉が出てきている気がします。
ページのレイアウトに対する理解で必要な概念ではありますが、昔は聞く事の少ない言葉かと思いました。
最近は耳にする事も多いので、この機会にインライン方向とブロック方向についてまとめ・解説してみようかと思います。
インライン方向・ブロック方向について
CSSで言うインライン方向・ブロック方向とは、要素の配置方向の事を指します。
それぞれの配置方向については各項目で解説していきます。
インライン方向
インライン方向はテキストの流れる方向と同じとなります。
テキストが横書きの場合、インライン方向は左から右、縦書きの場合は上から下という事になります。
また、インライン要素(span要素やa要素)はインライン方向と同じ方向に配置されます。
ブロック方向
ブロック方向はテキストの流れる方向と垂直な方向となります。
テキストが横書きの場合、ブロック方向は上から下、縦書きの場合は左から右という事になります。
また、ブロック要素(p要素やdiv要素、h要素)はブロック方向と同じ方向に配置されます。
上記のように、インライン方向・ブロック方向を元に配置される要素(インライン要素・ブロック要素)は昔からありますが、意識する事も少なかったのかなと思います。(「方向」という考えは浸透していなかった気がします。)
最近では、このインライン方向・ブロック方向の理解が必要なCSS(padding-inline・padding-block・margin-inline・margin-blockプロパティなど)も出てきています。
昔からあるプロパティとしてはdisplay: inline-block;などもありますので多少は馴染みがある方もいるかと思いますが、この機会に今一度インライン方向・ブロック方向の概念をしっかりと理解し使用してみてはいかがでしょうか。
【インライン方向・ブロック方向について別途解説している記事】
・margin-inline: auto;が意外と便利！ブロック要素の左右中央揃えに使えるプロパティ【CSS】
・余白指定を効率的にできるpadding-inline/padding-blockプロパティについて【CSS】
さいごに
いかがでしたでしょうか。
今回は、CSSにおけるインライン方向とブロック方向についてまとめ・解説をしました。
ページのレイアウトに対する理解で必要な概念となりますので、インライン方向とブロック方向の事をきちんと理解し使用していきましょう。
