【64-6】アイテム個別の配置を指定する justify-self (主軸方向)

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

justify-selfプロパティは、コンテナ内のアイテム側に指定し、そのアイテムが占めるエリア内での主軸方向の位置を決めます。

justify-content と違って、アイテムを1つずつ個別に指定するプロパティです。
アイテムの margin を調整するような感じです。

主軸(インライン軸)については、
【64-1】ボックス配置の全体的なルール(9コのプロパティまとめ) をご覧ください

本日のINDEX
  1. justify-selfプロパティの値
  2. justify-selfプロパティを使ってみた(サンプル)
    1. Grid Layout での justify-self
    2. Flexbox での justify-self の代替えには margin: auto
  3. IE/Edge では -ms-grid-column-align (Grid layout)

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

【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

justify-selfプロパティの値

値は 全部キーワードです。

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年5月記)
<overflow-position> unsafe | safe
注意:この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも(may be dropped during the CR period)」とあるので無くなる可能性もあります。(2022年5月記)
<self-position> center | start | end | self-start | self-end | flex-start | flex-end
グローバル値 justify-self: inherit; 親の値を継承
justify-self: initial; 継承した親の値を解消しデフォルト値に戻す
justify-self: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 なし 適用できる要素 Gridアイテム
ブロックレベルのボックス(テーブルセルは含まず)
絶対位置にされたボックス
(Flexアイテムには使えません)

CSS構文は、
auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]
となっています。これを読み解くと、
auto、normal、stretch、<baseline-position> は単独で使う。
「<self-position> か left か right 」は単独で使うか、safe か unsafe を頭にくっつけて使うということ。

デフォルト値の auto は、親に justify-itemsプロパティの指定があればそれに従い、そうでなければ mormal の値になります。
mormal は、レイアウトモードによって挙動が異なります。

<self-position> は、アイテムに対して使う整列キーワードなので、今回はじめて出てきました。
center | start | end | self-start | self-end | flex-start | flex-end があります。

「flex-start」と「flex-end」は flexアイテムだけでしか使えない値です。
ですが、この justify-self は、flexアイテムには適用できません。ややこしいっすね。
なのでこのプロパティで「flex-start」を使っても「start」に、「flex-end」を使ったら「end」になるそうです。

それぞれの整列キーワードの意味は、
【64-2】ボックス配置の「整列キーワード」まとめ でざっとまとめていますのでご覧ください。

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

Grid Layoutjustify-self を試してみます。

Grid Layout での justify-self

1番最初のアイテムだけに justify-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, 5em);
  grid-template-columns: repeat(2, 40%); 
  }
.container div{
	box-sizing:border-box;
	padding:1em;
	text-align:center;
	}
.container div:nth-child(1) {
  /*justify-self:「値」; はここに追加していきます*/
  background:#fcf;
  }
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}

ITEM* と書かれたピンク色のアイテムのみに justify-self を指定しています。

justify-self: auto(デフォルト = normal と同じになります)

ITEM*
ITEM
ITEM
ITEM

justify-self: normal
Gridアイテムでは stretch と同じ振る舞いになりますが、縦横比や固有の寸法を持つアイテムでは start のように振舞います。

ITEM*
ITEM
ITEM
ITEM

justify-self: stretch(ここまで全部 stretch で代わり映えしませんね)
アイテムサイズの合計が親ボックスより小さくて、アイテムサイズが「auto」なアイテムは、サイズを伸ばして(stretch)コンテナいっぱいに満たされます。
ただし max-height や max-width などによるサイズ制限があればそっちが優先されます。

ITEM*
ITEM
ITEM
ITEM

justify-self: center
位置的整列キーワードを指定すると、アイテムが width: min-content になり、指定された位置に配置されます。

ITEM*
ITEM
ITEM
ITEM

justify-self: start

ITEM*
ITEM
ITEM
ITEM

justify-self: end

ITEM*
ITEM
ITEM
ITEM

justify-self: self-start

ITEM*
ITEM
ITEM
ITEM

justify-self: self-end

ITEM*
ITEM
ITEM
ITEM

justify-self: left

ITEM*
ITEM
ITEM
ITEM

justify-self: right

ITEM*
ITEM
ITEM
ITEM

justify-self: baseline(first baseline)(代替えの start になります)

ITEM*
ITEM
ITEM
ITEM

justify-self: last baseline(代替えの end になります)

ITEM*
ITEM
ITEM
ITEM

Flexbox での justify-self の代替えには margin: auto

Flexアイテムには、justify-self は効きません。

Flexbox の仕様書では、ボックス配置用のプロパティは、
align-content、align-self、align-items、justify-content の4つしか無いんです。

W3C の仕様書で、justify-self の値で <self-position> があり、そこに flex-start、flex-end が入っているので、ややこしいですが。
flex-start と flex-end は、Flexbox以外で使うと、「start」「end」として振る舞います。

下のサンプルは、Flexbox の最初のアイテムに justify-self: flex-start を指定しています。
何も起こっていませんね。

justify-self: flex-start

ITEM
ITEM
ITEM
ITEM

最初のアイテムに margin-right: auto を指定しました。
flex-start のようなかんじで、最初のアイテムだけ左に寄せられます。

ITEM
ITEM
ITEM
ITEM

最後のアイテムに margin-left: auto を指定しました。
flex-end のようなかんじで、最後のアイテムが右に寄せられます。

ITEM
ITEM
ITEM
ITEM

あんまり役に立つかどうかわからないけど、Flexbox では「margin: auto」を使ってアイテムを個別に右や左に寄せられるという豆知識でした。

一番最後のサンプルの 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:-webkit-flex;
	display: flex}
.con_flex div{
	box-sizing:border-box;
	padding:1em;
	text-align:center}
.con_flex div:nth-child(odd) {background:#85cbbf}
.con_flex div:nth-child(even) {background:#ffe9a9}
.con_flex div:nth-child(4) {margin-left: auto} /*最後のアイテム*/

IE/Edge では -ms-grid-column-align (Grid layout)

Grid Layout では、IE10, 11, Edgeの15 までは標準仕様とは異なる Microsoft の独自プロパティで対応しています。

IE10〜Edge15Grid Layoutで使う justify-self に相当するのは -ms-grid-column-align です。align-self に相当するのは -ms-grid-row-align

-ms-grid-row-align-ms-grid-column-align で使える値は、center, end, start, stretch の4つです。

div.Item2 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
  }

詳細は、
(ちょっとメモ)IE10〜Edge15 では Grid Layout の仕様が違うをご覧ください。

次回予告

今回はアイテムの主軸方向での位置を決める justify-selfプロパティでした。
次回は、アイテムの交差軸方向での位置を決める align-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.