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-8】アイテム個別の配置を一括指定する place-selfショートハンド

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

place-selfショートハンドプロパティは、
・justify-selfプロパティ(主軸)
・align-selfプロパティ(交差軸)

の2つを一括で指定するショートハンドです。
アイテム側に指定し、アイテムを個別に指定します。

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

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

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

place-selfプロパティの値
CSS構文 <'align-self'> <'justify-self'>?
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 なし 適用できる要素 Gridアイテム
ブロックレベルのボックス(テーブルセルは含まず)
絶対位置にされたボックス

CSS構文は、
<'align-self'> <'justify-self'>?
となっています。これを読み解くと、
align-self の値が先、justify-self の値が後と順番が決まっています。
また、<'justify-self'> に「?」が付いてるので、値1個でもOK ということです。
値が1個だと、両方のプロパティに同じ値が適用されます。

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

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

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

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

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

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

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

無効になると、何も指定していない状態 = 初期値の「auto」になります。 auto は normal を指定した状態で、normal は stretch と同じ。エリアいっぱいにアイテムを使います。
(auto、normal、stretch はどれを指定しても同じってことですね)

place-selfプロパティを使ってみた(サンプル)

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

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

1番最初のアイテムに place-self を指定しています。
通常の横書きモードでのサンプルなので、主軸は左から右への横方向交差軸は垂直方向です。

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

<div class="container">
  <div>ITEM*</div>
  <div>ITEM</div>
  <div>ITEM</div>
  <div>ITEM</div>
</div>
.container{
  box-sizing: border-box;
  border: 1px solid#ccc;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(2, 7em);
  grid-template-columns: repeat(2, 50%); 
  }
.container div{
	box-sizing:border-box;
	padding:1em;
	text-align:center;
	}
.container div:nth-child(1) {
  /*place-self:「値」; はここに追加していきます*/
  background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}

place-self: stretch center

ITEM*
ITEM
ITEM
ITEM

place-self: center start

ITEM*
ITEM
ITEM
ITEM

place-self: start end

ITEM*
ITEM
ITEM
ITEM

place-self: center right

ITEM*
ITEM
ITEM
ITEM

place-self: auto(ここから値1コのサンプルです)
auto は初期値。何も指定しなければこれ)

ITEM*
ITEM
ITEM
ITEM

place-self: normalnormalstretch と同じ振る舞いになります)

ITEM*
ITEM
ITEM
ITEM

place-self: stretch

ITEM*
ITEM
ITEM
ITEM

place-self: end

ITEM*
ITEM
ITEM
ITEM

place-self: start

ITEM*
ITEM
ITEM
ITEM

place-self: center

ITEM*
ITEM
ITEM
ITEM

place-self: baseline(first baselineと同じ)

ITEM*
ITEM
ITEM
ITEM

place-self: last baseline

ITEM*
ITEM
ITEM
ITEM

place-self: right
(right や left は align-selfに無い値なので単独で使うと無効。初期値のautoの状態です)

ITEM*
ITEM
ITEM
ITEM

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

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

でもまあ Flexboxplace-self を指定してもエラーにならないようなので、一応サンプルを置いておきます。
1番最初のアイテムに place-self を指定しています。

サンプルの 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 .5em;
	height:10em;
	display:-webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	}
.con_flex div{
	-webkit-flex-basis:40%;
	flex-basis:40%;
	box-sizing:border-box;
	padding:1em;
	line-height:1em;
	text-align:center;
	}
.con_flex div:nth-child(1) {
  /*place-self:「値」; はここに追加していきます*/
  background:#aef}
.con_flex div:nth-child(2) {background:#fcc}
.con_flex div:nth-child(3) {background:#ccf}
.con_flex div:nth-child(4) {background:#fe9}

place-self: center start
2番目の値は無視されるので、align-self: center を指定したのと同じになります。

ITEM*
ITEM
ITEM
ITEM

place-self: center right
2番目の値は無視されるので、上のサンプルと同様 align-self: center の指定です。

ITEM*
ITEM
ITEM
ITEM

place-self: start end
同じく2番目の値は無視されて、align-self: start の指定です。

ITEM*
ITEM
ITEM
ITEM

place-self: auto(ここから値1コのサンプルです)
(auto は初期値。何も指定しなければこれ。normalと同じになります)

ITEM*
ITEM
ITEM
ITEM

place-self: normal
(normalは stretch と同じ振る舞いになります)

ITEM*
ITEM
ITEM
ITEM

place-self: stretch

ITEM*
ITEM
ITEM
ITEM

place-self: end

ITEM*
ITEM
ITEM
ITEM

place-self: start

ITEM*
ITEM
ITEM
ITEM

place-self: center

ITEM*
ITEM
ITEM
ITEM

place-self: baseline(first baselineと同じ)

ITEM*
ITEM
ITEM
ITEM

place-self: last baseline

ITEM*
ITEM
ITEM
ITEM

place-self: right
(right や left は align-selfに無い値なので単独で使うと無効。初期値のautoの状態です)

ITEM*
ITEM
ITEM
ITEM

次回予告

今回までの justify-self・align-self・place-selfショートハンドは、アイテム側に指定して、そのアイテムだけの配置方法を指定しました。

次回からは、○○-self の指定を、全アイテムに一発で指定するプロパティ justify-items・align-items・place-itemsショートハンドを使ってみよう。

まず次回は、justify-itemsプロパティ について見てみましょう。
これはコンテナ側に指定し、コンテナ内の全アイテムに対して justify-self の指定を一発で指定します。

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

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

関連記事

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

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

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

スポンサーリンク

スポンサーリンク
最新記事
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.