【64-2】ボックス配置の「整列キーワード」まとめ

最終更新日:2022年09月23日  (初回投稿日:2022年01月16日)

今回は、ボックス配置 (Box Alignment Module) のプロパティで使う「値」についてまとめます。
「値」は、全部キーワードで、これを「整列キーワード」と呼びます。
この「整列キーワード」を整理してみます。

本日のINDEX
  1. 整列キーワード(分布・整列で使う「値」)
    1. 位置的整列キーワード
    2. ベースライン整列キーワード
    3. 分布型整列キーワード
    4. オーバーフロー時の整列キーワード

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

【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

整列キーワード(分布・整列で使う「値」)

整列キーワードは、以下の3種類に分類されています。
位置的整列(positional alignment)
ベースライン整列(baseline alignment)
分布型整列(distributed alignment)

位置的整列キーワード

位置的整列のキーワードは、以下の9個です。
・center
・start
・end
・self-start
・self-end
・flex-start(Flexboxのみの値)
・flex-end(Flexboxのみの値)
・left
・right

上記はさらに下記のように分類されます。
書字方向によって軸が変わる値:普通の横書きなら start は左、アラビア語とかだと右になる。
<self-position>:アイテムの位置指定用。「-self」「-items」で使われる
物理値:書字方向に関係なく物理的方向を示す(leftright だけ)
<content-position>:コンテナ側での指定用。「-content」で使用

書字方向による値
<self-position>
center | start | end | self-start | self-end | flex-start | flex-end
物理値 left | right
<content-position> center | start | end | flex-start | flex-end

それぞれのキーワードは、以下の意味があります。

center
「センター揃え」に
start
書字方向の「始点」のある辺に整列。
例えば、英語や日本語の横書きなら「左」に。アラビア語だったら「右」。
日本語の縦書きモードなら「上」に整列します。
end
各行は、書字方向の「終点」のある辺に整列。
例えば、英語や日本語の横書きなら「右」に。アラビア語だったら「左」。
日本語の縦書きモードなら「下」に整列します。
self-start
「-self」「-items」で使える値(「-content」では使えません)。
これも書字方向による整列ですが、整列する始点は、アイテムが占めることができるエリア内での始点です。
self-end
「-self」「-items」で使える値(「-content」では使えません)。
これも書字方向による整列ですが、整列する終点は、アイテムが占めることができるエリア内での終点です。
flex-start
Flexboxだけで使える値です。
flex-directionプロパティによる「始点」にアイテムを整列させます。
デフォルトの flex-direction: row なら書字方向に従って「始点」が決まります。
flex-end
Flexboxだけで使える値です。
flex-directionプロパティによる「終点」にアイテムを整列させます。
デフォルトの flex-direction: row なら書字方向に従って「終点」が決まります。
left
物理的に「左揃え」に(書字方向と関係なく)
right
物理的に「右揃え」に(書字方向と関係なく)

ベースライン整列キーワード

注意:この「ベースライン整列キーワード」はW3C仕様書の冒頭で「at-risk」に入っていて「勧告候補時に落とされるかも(may be dropped during the CR period)」とあるので無くなる可能性もあります。(2022年1月記)

テキストのベースライン(baseline)を基準にした整列をさせます。

ベースラインとは、テキストを揃えるベースになるライン。
ディセンダー文字(g j y p q)は、ベースラインの下にはみ出して表示されます。
alphabetic baseline(アルファベティック ベースライン)と、日本語などのマルチバイト文字の ideographic baseline(イデオグラフィック ベースライン)は位置がちょっと違うけど、まあだいたい一緒ですw。(ちなみに ideographic は「表意文字」のこと。漢字とかの)

キーワードは baseline だけ。
これ単独で使う場合と、改変子(modifiers)の firstlast を付ける場合があります。

first baseline の代替配置は startlast baseline の代替配置は end です。

それぞれのキーワードは、以下の意味があります。

baseline
first baselineと同じになります。
first baseline
アイテム内のテキストの 1行目のベースラインに合わせて整列させます。
last baseline
アイテム内のテキストの 最終行のベースラインに合わせて整列させます。

分布型整列キーワード

分布型整列は、コンテナ内のアイテムの分布方法を決めるためのキーワード。
構文では <content-distribution> という分類で「-content」だけで使用します。
以下の4個のキーワードがあります。
・stretch
・space-between
・space-around
・space-evenly

それぞれのキーワードは、以下の意味があります。

stretch
アイテムのサイズを伸ばして(stretch)、コンテナいっぱいに満たします。
ただしこれは、アイテムのサイズが「auto」で、アイテムのサイズの合計がコンテナ内部より小さかった場合です。
アイテムのサイズを指定していて、アイテムの合計がコンテナより小さい場合は、たとえ stretch を指定しても引き伸ばされず「start」と同じになります。
space-between
アイテム間(between)の空きが同じサイズになるように分布します。
space-around
アイテム間の空きの「半分の空き」を最初と最後のアイテムの前後(around)につけて分布します。
space-evenly
アイテム間の空きと、最初と最後のアイテムの前後の空きを全部均等(evenly)にして分布します。

オーバーフロー時の整列キーワード

注意:<overflow-position>はW3C仕様書の冒頭で「at-risk」に入っていて「勧告候補時に落とされるかも(may be dropped during the CR period)」とあるので無くなる可能性もあります。
(2022年1月記)

アイテムの内容がオーバーフロー(コンテナからはみ出る)したとき、スクロールバーが出ても読めない場合にどうするか指定するキーワードです。
仕様書では <overflow-position> と呼ばれています。

キーワードは safeunsafe だけ。
単独で使うのではなく、他の整列キーワードと組み合わせて使います。
(例:justify-content: safe center;)

それぞれのキーワードは、以下の意味があります。

safe
整列キーワードの「center」「end」などを使っていて、オーバーフローでスクロール不能な領域にデータがあって読めない場合、整列キーワードが「start」であったかのように配置します。
unsafe
一緒に指定された整列キーワードのままで配置します。

次回予告

次回から、ボックス配置のためのプロパティを1つずつ使ってみましょう。
まずは、justify-contentプロパティを使ってみます。

関連記事
このエントリーをはてなブックマークに追加

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

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

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