Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からサンプルを作りながら解説しています。
サイトの編集ができるようになる手助けになれば…と思っています。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)
サイト内検索はこちらからどうぞ

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

最終更新日:2022年01月16日  (初回投稿日: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)、コンテナいっぱいに満たします。
具体的には、アイテムのサイズの合計がコンテナ内部より小さかった場合、余ったサイズをアイテム数で割って、各アイテムサイズに均等に分け与えるんだって。
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プロパティを使ってみます。

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

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

関連記事

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
12 | 2022/01 | 02
- - - - - - 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
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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