ほんっとにはじめてのHTML5とCSS3：【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）

【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）

最終更新日：2022年09月23日　（初回投稿日：2021年12月17日）

ボックス配置（Box Alignment Module） は、アイテムの配置・分布のしかたを指定するプロパティ達です。
Flexbox、Grid Layout、マルチカラムなどのレイアウトモードで使います。

ボックス配置のためのプロパティは、以下の6種類があります。
・justify-content
・align-content
・justify-self
・align-self
・justify-items
・align-items
それに加えて、以下のショートハンドもあります。
・place-content
・place-self
・place-items

1つ1つのプロパティを使ってみる前に、今回は全体的なルールをまとめてみます。

本日のINDEX

ボックス配置は、下記のように記事を分けます。

【63】アイテム間の空きを指定する gap（row-gap, column-gap）
【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）　←今日はココ
【64-2】ボックス配置の「整列キーワード」まとめ
【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）
【64-5】アイテムの配置・分布を指定するショートハンド place-content
【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
【64-11】アイテム配置を一括指定する place-itemsショートハンド

参考：
・CSS Box Alignment Module Level 3 | W3C Working Draft
・CSS ボックス配置 | MDN

2つの軸（主軸しゅじく・交差軸こうさじく）の概念

ボックス配置には「軸じく」という概念があります。

文字が流れる（書き進める）方向のことを「 書字しょじ方向」と言って、その方向と並行な軸を Inline Axis（インライン軸）または 主軸しゅじくといいます。

主軸と直角に交差する軸のほうは、Block Axis（ブロック軸）または交差軸。
段落のブロックが並んでいく方向だからブロック軸って言うのかな。

一般的な横書きモードなら主軸は横方向、交差軸はタテ方向です。
縦書きモードだと軸が入れ替わります。

アラビア語とかだと書字方向は「右から左」ですが、これによって「start」や「end」の位置が変わります。（まあ日本語サイトではあんまり使わないけどね）

主軸方向の分布・配置をするプロパティは、頭に justify がつきます。
交差軸方向のプロパティは頭に align がつきます。
そのあとにそれぞれ
-content
-self
-items
がついたプロパティ名になってます。

justify（ジャスティファイ）は、印刷用語では、揃える（頭揃え・尻揃えなど）の意味。
Align（アライン）は CSSでもよく出てくる言葉で、整列などの意味です。
どっちも似たような言葉ですけどね。
CSSでは、やっぱり印刷用語から来ている名前が多いようですね。

6つのプロパティで何を指定するか

justify-content、justify-self、justify-items、
align-content、align-self、align-items が、
何を指定するかをまとめてみました。

justify-content と align-content はコンテナ内のアイテムの配置・分布

justify-content は主軸、
align-content は 交差軸担当。
どちらも コンテナ側に指定し、コンテナ内のアイテムの配置や分布の方法を決めます。
配置の場合は padding を調整している感じです。
分布の場合はアイテム間の空きを調整します。

justify-self と align-self はアイテムを個別で位置指定

justify-self は主軸、
align-self は 交差軸担当。
どちらもアイテム側に指定し、そのアイテム1つだけに対して、その子が使えるエリア内での位置を決めます。特定のアイテムの margin を調整している感じ。
アイテム自身をそれぞれ個別に指定するので -self が付いています。

justify-items と align-items は「-self」を全アイテムに一発指定

justify-items は主軸、
align-items は 交差軸担当。
どちらもコンテナ側に指定し、上の「-self」の指定を全アイテムに一発で指定します。

次回予告

次回は、ボックス配置で使う「整列キーワード」をまとめます。
ボックス配置のプロパティで使う「値」は、全部キーワードです。
「start」とか「center」とか「space-between」など、それぞれのキーワードの意味がわかってないと指定できないからね。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。