【64-5】アイテムの配置・分布を指定するショートハンド place-content

最終更新日:2022年07月06日  (初回投稿日:2022年04月08日)

place-contentショートハンドプロパティは、前回と前々回の
・justify-contentプロパティ(主軸)
・align-contentプロパティ(交差軸)

の2つを一括で指定するショートハンドです。
コンテナ側に指定します。

本日のINDEX
  1. place-contentショートハンドの値
    1. 値が1個の場合の場合の注意点
  2. place-contentを使ってみた(サンプル)
    1. Grid Layout での place-contentショートハンド
    2. Flexbox での place-contentショートハンド

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

【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-contentショートハンドの値

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

place-contentプロパティの値
CSS構文 <'align-content'> <'justify-content'>?
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 なし 適用できる要素 Gridコンテナ
flexコンテナ
ブロックコンテナ

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

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

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

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

justify-contentプロパティの値
CSS構文 normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
normalがデフォルト値。
<content-distribution> space-between | space-around | space-evenly | stretch
<overflow-position> unsafe | safe
注意:この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも(may be dropped during the CR period)」とあるので無くなる可能性もあります。(2022年4月記)
<content-position> center | start | end | flex-start | flex-end
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
align-contentプロパティの値
CSS構文 normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-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年4月記)
<content-distribution> space-between | space-around | space-evenly | stretch
<overflow-position> unsafe | safe
注意:この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも(may be dropped during the CR period)」とあるので無くなる可能性もあります。(2022年4月記)
<content-position> center | start | end | flex-start | flex-end
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

2つのプロパティの詳細は、前回・前々回の記事をご覧ください。
【64-3】アイテムの配置・分布を指定する justify-content(主軸方向)
【64-4】アイテムの配置・分布を指定する align-content(交差軸方向)

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

値が1個の場合、align-contentjustify-content の両方に同じ値が適用されます。

ただし、その値が <baseline-position>(baseline, first baseline, last baseline)なら、2番目の値は自動的に「start」になる。とW3C仕様書に掲載されています。

その他は、両方のプロパティに有効な値のみ 1個で指定できます。
どちらかに無効な値を 1個で指定した場合は、値そのものが無効になります。
例えば justify-content でしか使えない right や left の値は、単独では指定できません。

place-contentを使ってみた(サンプル)

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

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

Gridアイテムのサイズの合計が Gridコンテナより小さい場合に分布や配置ができるので、アイテムの幅は親の25%で3カラムにし、高さは3emにして親を10emにしています。
サンプルの基本のHTML、CSSはこちらです。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.container{
	box-sizing:border-box;
	border:1px solid#ccc;
	padding:0;
	margin:0 0 .5em;
    height: 10em;
	display: grid;
    grid-template-rows: repeat(2, 3em);
	grid-template-columns: repeat(3, 25%);
  /*place-content:「値」; はここに追加していきます*/
  }
.container div{
	padding:1em 0;
	text-align:center;
	line-height:1em}	
.container div:nth-child(odd) {background:#85cbbf}
.container div:nth-child(even) {background:#ffe9a9}

いくつかの値を指定してみます。

place-content: normal(デフォルト。何も指定しなくてもこれになります)

1
2
3
4
5
6

place-content: space-evenly stretch

1
2
3
4
5
6

place-content: space-evenly

1
2
3
4
5
6

place-content: space-between

1
2
3
4
5
6

place-content: center space-between

1
2
3
4
5
6

place-content: end space-between

1
2
3
4
5
6

place-content: end

1
2
3
4
5
6

Flexbox での place-contentショートハンド

Flexアイテムのサイズの合計が Flexコンテナより小さい場合に分布や配置ができるので、アイテムは flex-basis: 30% にし、flex-growは指定していません(デフォルトの flex-grow: 0
Flexboxflex-wrap: nowrap がデフォルトで、これだと交差軸方向の配置を試せないので、サンプルでは flex-wrap: wrap を指定。 Flexアイテムの高さは3emにして親を10emにしています。
サンプルの基本のHTML、CSSはこちらです。

<div class="con_flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.con_flex{
	box-sizing:border-box;
	border:1px solid#ccc;
	padding:0;
	margin:0 0 .5em;
	height:10em;
	display: flex;
	flex-wrap: wrap;
  /*place-content:「値」; はここに追加していきます*/
  }
.con_flex div{
	flex-basis:30%;
	box-sizing:border-box;
	padding:1em;
	line-height:1em;
	text-align:center;
	}
.con_flex div:nth-child(odd) {background:#f8c6bd}
.con_flex div:nth-child(even) {background:#fef5b7}

place-content: normal(デフォルト。何も指定しなくてもこれになります)

1
2
3
4
5
6

place-content: space-evenly stretch

1
2
3
4
5
6

place-content: space-evenly

1
2
3
4
5
6

place-content: space-between

1
2
3
4
5
6

place-content: center space-between

1
2
3
4
5
6

place-content: flex-end space-between

1
2
3
4
5
6

place-content: flex-end

1
2
3
4
5
6

次回予告

今回までの justify-content・align-content・place-contentショートハンドは、コンテナ側に指定して、アイテムの配置や分布を決めるプロパティでした。

次回からは、アイテム側に指定して、それぞれのアイテムが使えるスペース内での配置を決めるプロパティ justify-self・align-self・place-selfショートハンドを使ってみよう。
まず次回は、justify-selfプロパティ について見てみましょう。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2022/07 | 08
- - - - - 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.