CSS - place-self プロパティ：初級者向けガイド

こんにちは、未来のCSSマスターさんたち！今日は、CSSの素晴らしい世界に飛び込み、(place-self)という便利な小さなプロパティを探求します。初めての方でも心配しないでください；私はステップバイステップで説明します。私が数年間、生徒たちにやっていたように。このチュートリアルの終わりまでに、プロのように要素を配置できるようになります！

place-selfとは？

深淵には飛び込む前に、基礎から始めましょう。place-selfプロパティは、align-selfとjustify-selfのプロパティを一つの宣言で設定するショートカットです。一石二鳥的な感じですが、より人道的でCSSに関連しています！

文法

place-selfの文法は非常にシンプルです：

place-self: <align-self> <justify-self>;

如果你只提供一个值，它将同时应用于align-self和justify-self。これはコンビメニューのようです - 一つの価格で二つものを手に入れる！

可能な値

では、place-selfで使用できるさまざまな値を見てみましょう。私は表形式で提示します。これにより、生徒たちが情報をより簡単に消化できると考えています：

値	説明
auto	要素は親コンテナのalign-self/justify-selfの挙動を継承します
normal	要素はドキュメントの通常の流れに従って配置されます
start	要素をコンテナの開始位置に配置します
end	要素をコンテナの終了位置に配置します
center	要素をコンテナ内で中央に配置します
stretch	要素をコンテナに合わせて伸ばします
flex-start	要素をflexコンテナの開始位置に配置します
flex-end	要素をflexコンテナの終了位置に配置します
self-start	要素を自身の軸の開始位置に配置します
self-end	要素を自身の軸の終了位置に配置します
baseline	要素をコンテナの基準線に配置します
first baseline	要素をコンテナの最初の基準線に配置します
last baseline	要素をコンテナの最後の基準線に配置します

適用範囲

place-selfプロパティはグリッド要素とflex要素に適用されます。これは特定のスーパーヒーロー（または、私たちの場合は要素）だけが持つ特別なパワーです！

では、いくつかの例を見て、これらの値が実際にどのように動作するかを確認しましょう。

CSS place-self - normal start 値

.item {
place-self: normal start;
}

この宣言は、要素を通常の流れに従って配置し、コンテナの開始位置に整列します。これは要素に、「普通でありながら、始めから」と言っているようなものです！

CSS place-self - auto center 値

.item {
place-self: auto center;
}

ここでは、「親からの整列を継承し、水平方向に中央に配置する」と言っています。これは、要素が垂直方向には流れに従いながら、水平方向には目立つ場合に最適です。

CSS place-self - center normal 値

.item {
place-self: center normal;
}

これは要素を垂直方向に中央に配置し、水平方向には通常の流れに従います。要素がパーティの真ん中にいるが、それでもパーティの礼儀を守っているかのようです！

CSS place-self - end normal 値

.item {
place-self: end normal;
}

これは要素を垂直方向にコンテナの終了位置に整列させ、水平方向には通常の流れに従います。要素が人混みの後ろでつま先立ちしているかのようです！

CSS place-self - start auto 値

.item {
place-self: start auto;
}

これは要素を垂直方向にコンテナの開始位置に配置し、水平方向には継承します。これは、「私は上から始めるが、水平方向には流れに従う」と言っているようなものです。

CSS place-self - self-start auto 値

.item {
place-self: self-start auto;
}

これは要素を垂直方向に自身の軸の開始位置に整列させ、水平方向には継承します。要素が垂直方向には自分で決め、水平方向には群れに従っているかのようです。

CSS place-self - self-end normal 値

.item {
place-self: self-end normal;
}

これは要素を垂直方向に自身の軸の終了位置に整列させ、水平方向には通常の流れに従います。要素が空を向かって立ち、足はしっかりと地面に接地しているかのようです！

CSS place-self - flex-start auto 値

.item {
place-self: flex-start auto;
}

flexコンテナ内で、要素を垂直方向にコンテナの開始位置に整列させ、水平方向には継承します。flex要素が上から始めて、flexの流れに従いたい場合に最適です。

CSS place-self - flex-end normal 値

.item {
place-self: flex-end normal;
}

flexコンテナ内で、要素を垂直方向にコンテナの終了位置に整列させ、水平方向には通常の流れに従います。要素が手倒立をしているかのようです！

CSS place-self - baseline normal 値

.item {
place-self: baseline normal;
}

これは要素の基準線をコンテナの基準線に垂直方向に整列させ、水平方向には通常の流れに従います。異なる要素間でテキストを整列させるのに最適です。

CSS place-self - last baseline normal 値

.item {
place-self: last baseline normal;
}

基準線と似ていますが、複数の基準線が存在する場合、最後の基準線を使用します。要素が最後の言葉を持つように！

CSS place-self - stretch auto 値

.item {
place-self: stretch auto;
}

これは要素を垂直方向にコンテナに合わせて伸ばし、水平方向には継承します。要素が、「私はできるだけ背が高くなりたいが、水平方向には流れに従う」と言っているかのようです。

そして、ここまでに！私たちはplace-selfプロパティとそのさまざまな値を探求しました。CSSをマスターする鍵は練習です。それでは、これらの値で遊び、組み合わせて、美しいレイアウトを作成してみてください！

私の教師生活の中で、実験し、CSSを楽しむ生徒たちはより速く学び、更多信息を保持する傾向があります。ですから、創造的なことに恐れずに！あなたが独自のスタイルを見つけるかもしれない組み合わせが見つかるかもしれません。

ハッピーコーディング、そして、あなたの要素が常に完璧に配置されることを祈っています！

Credits: Image by storyset