【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
  1. 2つの軸(主軸・交差軸)の概念
  2. 6つのプロパティで何を指定するか
    1. justify-content と align-content はコンテナ内のアイテムの配置・分布
    2. justify-self と align-self はアイテムを個別で位置指定
    3. justify-items と align-items は「-self」を全アイテムに一発指定

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

【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 が使えます。
初心者が始めやすいサーバだと思います。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.