【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
最終更新日：2022年09月23日 （初回投稿日：2022年06月07日）align-selfプロパティは、コンテナ内のアイテム側に指定し、アイテムが占めるエリア内での交差軸方向の位置を決めます。
align-content と違って、アイテムを個別に指定するプロパティです。
アイテムの margin を調整するような感じです。
交差軸（ブロック軸）については、
【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください。
ボックス配置は、下記のように記事を分けます。
- 【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
align-selfプロパティの値
値は全部キーワードで、justify-self の値とほぼ同じ。left と right が無いだけです。
| 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年6月記） |
| <overflow-position> | unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年6月記） |
| <self-position> | center | start | end | self-start | self-end | flex-start | flex-end |
| グローバル値 | align-self: inherit; 親の値を継承 align-self: initial; 継承した親の値を解消しデフォルト値に戻す align-self: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作 |
| 値の継承 | なし | 適用できる要素 | Gridアイテム Flexアイテム 絶対位置にされたボックス |
|---|
CSS構文は、
auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>
となっています。これを読み解くと、
auto、normal、stretch、<baseline-position> は単独で使う。
<self-position> は単独で使うか、safe か unsafe を頭にくっつけて使うということ。
デフォルト値の auto は、親に align-itemsプロパティの指定があればそれに従い、そうでなければ mormal の値になります。
mormal は、レイアウトモードによって挙動が異なります。
それぞれの整列キーワードの意味は、
【64-2】ボックス配置の「整列キーワード」まとめ でざっとまとめていますのでご覧ください。
align-selfプロパティを使ってみた（サンプル）
align-selfプロパティは、アイテム側に指定します。
Grid Layout と Flexbox でサンプルを作ってみました。
Grid Layout での align-self
1番最初のアイテムに align-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) {
/*align-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 を指定しています。
align-self: auto（デフォルト = normal と同じになります）
align-self: normal（ = stretch と同じ振る舞いになります）
align-self: stretch（ここまで全部 stretch で代わり映えしませんね）
アイテムサイズが「auto」のときのみ、アイテムのサイズを伸ばして（stretch）コンテナいっぱいに満たします。
ただし max-height や max-width などによるサイズ制限があればそっちが優先されます。
align-self: center
位置的整列キーワードを指定すると、アイテムが height: min-content になり、指定された位置に配置されます。
align-self: start
align-self: end
align-self: self-start
align-self: self-end
align-self: baseline（first baselineと同じ）
align-self: last baseline
Flexbox での align-self
1番最初のアイテムに align-self を指定しています。
通常の横書きモードでのサンプルなので、交差軸は垂直方向です。
Flexbox は、同じ行数（同じ高さ）のアイテムだと、高さが揃って align-self の効果がわからないので、1番最初のアイテム以外は padding: 1em 0 7em を指定して文字の下のパディングを多めにしています。最初のアイテムは padding:1em 0 です。
サンプルの 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}
.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 7em}
.con_flex div:nth-child(even) {background:#ffe9a9;padding:1em 0 7em}
.con_flex div:nth-child(1) {/*最初のアイテム*/
padding:1em 0;
/*align-self:「値」; はここに追加していきます*/
}
align-self: auto（デフォルト = normal と同じになります）
align-self: normal（ = stretch と同じ振る舞いになります）
align-self: stretch（ここまで全部 stretch で代わり映えしません）
アイテムサイズが「auto」のときのみ、アイテムのサイズを伸ばして（stretch）コンテナいっぱいに満たします。
ただし max-height や max-width などによるサイズ制限があればそっちが優先されます。
align-self: center
位置的整列キーワードを指定すると、アイテムが height: min-content になり、指定された位置に配置されます。
align-self: start
align-self: end
align-self: self-start
align-self: self-end
align-self: flex-start
align-self: flex-end
align-self: baseline（first baselineと同じ）
align-self: last baseline
次回予告
次回は place-selfショートハンドプロパティを使ってみましょう。
前回の justify-selfプロパティと今回の align-selfプロパティを一括で指定するやつです。
- 関連記事
-
- （ちょっとメモ）「,」で区切る「セレクターリスト」
- 【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（交差軸方向）
- 【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
- 【64-2】ボックス配置の「整列キーワード」まとめ
- 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
- 【63】アイテム間の空きを指定する gap（row-gap, column-gap）
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
