CSS - place-content: 初心者向けの親切なガイド
こんにちは、未来のウェブデザインスーパースターさん！? CSSの素晴らしい世界に飛び込む準備はできていますか？今日は、place-contentという便利な小さなプロパティについて探求します。信じてください、これはウェブレイアウト内の要素を並べる際に、あなたの生活を大幅に楽にしてくれるでしょう。では、コーヒー（または、あなたが好む場合は茶）を一杯取り、始めましょう！
place-contentとは？
部屋に家具を並べることを想像してください。すべてが正好に見えるようにしたいけれども、それぞれのピースを個別に動かすのは面倒です。ここでplace-contentが登場します - まるで魔法の杖のように、ウェブページの要素を簡単に並べることができるんです！
place-contentプロパティは、align-contentとjustify-contentを一度に設定するショートカットです。一石二鳥的なものです（このCSSプロパティの作成では鳥は一切傷つけられていません ?）。
可能な値
ああ、ここには結構な選択肢がありますね！それでは、niceな、読みやすいテーブルに分けて説明しましょう：
| 値 | 説明 |
|---|---|
| center | コンテンツを垂直および水平方向に中央に配置します |
| start | コンテンツをコンテナの開始位置に配置します |
| end | コンテンツをコンテナの終了位置に配置します |
| flex-start | startと似ていますが、flexコンテナ用です |
| flex-end | endと似ていますが、flexコンテナ用です |
| baseline | コンテンツを基準線に沿って配置します |
| space-between | アイテム間を均等に広げます |
| space-around | アイテムの周りに均等なスペースを追加します |
| space-evenly | アイテム間および周囲に等しいスペースを広げます |
これらが少し圧倒的かもしれませんが、心配しないでください - それぞれの例を一緒に見ていきましょう！
適用可能な場所
詳細に掘り下げる前に、どこでplace-contentを使えるかを知ることは重要です。このプロパティは以下に適用されます：
- グリッドコンテナ
- フレックスコンテナ
ですから、グリッドやflexbox（間違いなく使うことになるでしょう）を扱っている場合、place-contentはあなたの新しい最好的な友達です！
シNTAX
place-contentの基本的なシntaxは非常に簡単です：
.container {
place-content: <align-content> <justify-content>;
}一つまたは二つの値を使うことができます。一つを使うと、両方の並び方向に適用されます。二つを使うと、最初のがalign-content（垂直方向の並び）で、二つ目がjustify-content（水平方向の並び）です。
では、具体的な例を見てみましょう！
CSS place-content - center start 値
.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}この例では、コンテンツは垂直方向に中央に、水平方向に開始位置（左方向）に配置されます。まるで家具を部屋の片側に寄せて、垂直方向には中央に保つようなものです。
CSS place-content - start center 値
.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}ここでは、逆操作を行います - コンテンツを上端に並べ、水平方向に中央に配置します。家具を上端の壁に並べ、左右に均等にスペースを取るようなものです。
CSS place-content - end right 値
.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}これは、すべてのコンテンツをコンテナの右下隅に寄せるものです。家具を部屋の片隅に押し込むようなもの（実際にはそうすることはお勧めしません ?）。
CSS place-content - flex-start center 値
.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}start centerと似ていますが、flexコンテナ用です。コンテンツは上端（または左方向）に並び、水平方向に中央に配置されます。
CSS place-content - flex-end center 値
.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}これはflex-start centerと似ていますが、flexコンテナの終端に並べます。
CSS place-content - last baseline 値
.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}これは少し難しいですが、最後の行の基準線に沿ってコンテンツを並べます。すべてのテキストが見えない線にきれいに並ぶようにするようなものです。
CSS place-content - space-between 値
.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}これはアイテム間を均等に広げ、最初のアイテムを開始位置、最後のアイテムを終了位置に配置します。家具を部屋の中に均等にスペースを取って配置するようなものです。
CSS place-content - space-around 値
.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}space-betweenと似ていますが、最初のアイテムの前にスペースを追加し、最後のアイテムの後にもスペースを追加します。それぞれの家具に小さなエリアを確保するようなものです。
CSS place-content - space-evenly 値
.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}これはアイテム間および周囲に等しいスペースを広げます。最もバランスの良い方法で、家具を部屋の中に完璧にスペースを取って配置するようなものです。
そして、ここまででplace-contentプロパティとその様々な値について学びました。実践が大事ですので、これらを自分のプロジェクトで実験してみてください。間もなく、プロのようにコンテンツを並べるようになるでしょう！
codingを続け、学び続け、そして、最も重要なのは、楽しむことです！?????
Credits: Image by storyset