ほんっとにはじめての HTML5 と CSS3

place-itemsショートハンドプロパティは、
・justify-itemsプロパティ（主軸）
・align-itemsプロパティ（交差軸）
の2つを一括で指定するショートハンドです。
コンテナ側に指定します。

1. place-itemsショートハンドの値
   1. 値が1個の場合の場合の注意点
2. place-itemsを使ってみた（サンプル）
   1. Grid Layout での place-itemsショートハンド
   2. Flexbox での place-itemsショートハンド

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

【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

place-itemsショートハンドの値

place-itemsショートハンドプロパティの値は、align-items と justify-items の値を「半角スペース」で区切って書きます。

place-itemsプロパティの値
CSS構文	<'align-items'> <'justify-items'>?
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	なし	適用できる要素	すべての要素

CSS構文は、
<'align-items> <'justify-items'>?
となっています。これを読み解くと、順番が決まっています。
「align-items の値が先、justify-items の値が後」です。

また、<'justify-items> に「?」が付いてるので、値1個でもOK ということです。
値が1個だと、両方のプロパティに同じ値が適用されます。

疑問符乗算子「?」は、省略可能で 0 回または 1 回出現することを意味します。
CSSの値の定義構文はこちら→ 値の定義構文 | MDN

2つのプロパティの値はこちらです。

justify-itemsプロパティの値
CSS構文	normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] legacyがデフォルト値。
<baseline-position>	[ first | last ]? baseline baseline、first baseline、last baseline の3種の書き方。 baseline 単独で使うと first baseline と同義。 first baseline の代替配置は start、 last baseline の代替配置は end 。 注意：このキーワードはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年9月記）
<overflow-position>	unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年9月記）
<self-position>	center | start | end | self-start | self-end | flex-start | flex-end
グローバル値	justify-self: inherit; 親の値を継承 justify-self: initial; 継承した親の値を解消しデフォルト値に戻す justify-self: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

align-itemsプロパティの値
CSS構文	normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] normalがデフォルト値。
<baseline-position>	[ first | last ]? baseline baseline、first baseline、last baseline の3種の書き方。 baseline 単独で使うと first baseline と同義。 first baseline の代替配置は start、 last baseline の代替配置は end 。 注意：このキーワードはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年9月記）
<overflow-position>	unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年9月記）
<self-position>	center | start | end | self-start | self-end | flex-start | flex-end
グローバル値	align-items: inherit; 親の値を継承 align-items: initial; 継承した親の値を解消しデフォルト値に戻す align-items: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

2つのプロパティの詳細は、前回・前々回の記事をご覧ください。
【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)

値が1個の場合の場合の注意点

値が1個の場合、align-items と justify-items の両方に同じ値が適用されます。
その場合、両方のプロパティに有効な値のみ 1個で指定できます。

どちらかに無効な値を 1個で指定した場合は、値そのものが無効になります。
ですので、例えば justify-items でしか使えない right、left、legacy の値は1個では指定できません。

無効になると、何も指定していない状態 = デフォルト値になります。
デフォルト値は、align-items が「normal」、justify-items が「legacy」ですので、 place-items: normal legacy と指定したものと同じになります。

place-itemsプロパティを使ってみた（サンプル）

place-itemsショートハンドプロパティを使ってみます。
Grid Layout と Flexbox でサンプルを作ってみました。

Grid Layout での place-itemsショートハンド

Grid Layout で place-items を指定しています。
通常の横書きモードでのサンプルなので、主軸は左から右への横方向、交差軸は垂直方向です。

サンプルの HTMLやCSS の基本はこちら。

<div class="con_grid">
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
</div>

.con_grid{
	box-sizing:border-box;
	border:1px solid#ccc;
	padding:0;
	margin:0 0 .5em;
	display: grid;
	grid-template-rows: repeat(2, 7em);
    grid-template-columns: repeat(2, 50%);
	/*place-items:「値」 はここに指定していきます*/
	}
.con_grid div{
	box-sizing:border-box;
	padding:1em;
	text-align:center;
	}	
.con_grid div:nth-child(1) {background:#fcf}
.con_grid div:nth-child(2) {background:#ffc}
.con_grid div:nth-child(3) {background:#cfc}
.con_grid div:nth-child(4) {background:#eee}

place-items: normal legacy（デフォルト）

place-items: normal center

place-items: center right

place-items: end left

place-items: start last baseline

place-items: center（ここから値1コのサンプルです）

place-items: baseline

place-items: self-end

place-items: right
align-items に無い「right」を指定したので無効になり、デフォルト値になっています。

Flexbox での place-items

Flexbox の仕様書では、ボックス配置用のプロパティは、align-content、align-self、align-items、justify-content の4つしかありません。
というわけで、Flexアイテムには justify-items が効かないので、ショートハンドの place-items を使っても、2番目の値（justify-items）は無視されて、align-items の指定だけになります。

仕様書の「適用できる要素」は「すべての要素」になっていますし、 Flexbox で place-items を指定してもエラーにならないようなので、サンプルを作って試してみます。
通常の横書きモードでのサンプルなので、主軸は左から右への横方向、交差軸は垂直方向です。

サンプルの HTMLやCSS の基本はこちら。

<div class="con_flex">
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
</div>

.con_flex{
	box-sizing:border-box;
	border:1px solid#ccc;
	padding:0;
	margin:0 0 3em;
	display: flex;
	/*align-items:「値」; はここに追加していきます*/
	height:7em
	}
.con_flex div{
	box-sizing:border-box;
	padding:1em;
	text-align:center;
	flex-basis:25%;
	}
.con_flex div:nth-child(odd) {background:#85cbbf; padding:1em 0}
.con_flex div:nth-child(even) {background:#ffe9a9; padding:1em 0}

place-items: normal legacy（デフォルト）

place-items: normal center
2番目の center は、Flexbox で justify-items は効かないので無視されています。

place-items: center right
同じく 2番目の right は、Flexbox で justify-items は効かないので無視されています。

place-items: end left
同じく 2番目の left は、Flexbox で justify-items は効かないので無視。align-items: end だけが効いた状態ですね。

place-items: center（ここから値1コのサンプルです）
これは「center center」と指定したことと同じですが、やはり 2番目の center は無視されて、align-items: center だけが効いた状態です。

place-items: flex-start

place-items: self-end

次回予告

今回で「ボックス配置（ Box Alignment Module ）」については終わりです。

まだ仕様が勧告されていなくて、「at-risk」のものもあったり、なんだかちょっと消化不良なかんじでした。

さて、気を取り直して、次回からはちょっと新しい事柄をやっていこうと思います。

これまでCSSのプロパティについて記事を書いてきて、まだ記事にしていないモノも多いんですが、ここで一旦プロパティの記事は中断して、次回から CSSの「セレクター」についてまとめていこうと思います。

「セレクター」はずいぶん前にザックリと1ページで書いていますが、
　（→【3】id とか classって何？（セレクタの「種類」を知っておこう））
この↑記事で紹介したもの以外に、知ってると便利（というか知らないと損）なセレクターがたくさんあるんです。
（CSS序盤のプロパティの前にやるべきだったんだけど、ある程度プロパティを使わないと、複雑なセレクターの話に持っていけなくて、結果、先延ばしになりましたw）

というわけで、次回からCSSの「セレクター」を見ていこう。
次回はまずは「セレクター 一覧いちらん」。
「要素セレクター」「結合子」「属性セレクター」や、「擬似クラス」「疑似要素」を、一覧にします。

関連記事

• 【65-3】属性セレクター　[att="val" i] [att="val" s]
• 【65-3】属性セレクター　[att^="val"] [att$="val"] [att*="val"]
• 【65-3】属性セレクター　[att] [att="val"] [att~="val"] [att|="en"]
• 【65-2】結合子を使うセレクター（E F,　E > F,　E + F,　E ~ F）
• （ちょっとメモ）「,」で区切る「セレクターリスト」
• 【65-1】エレメンタルセレクター（要素名で指定するセレクター）
• 【65】CSSのセレクターを整理しよう（セレクター 一覧）
• 【64-11】アイテム配置を一括指定する place-itemsショートハンド
• 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
• 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
• 【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
• 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
• 【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
• 【64-5】アイテムの配置・分布を指定するショートハンド place-content
• 【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）