2. CSSについてのTips

この章では、CSSについてのTipsを紹介します。

display: flex

CSSのdisplay: flex;は、要素をフレックスコンテナに変えるプロパティです。フレックスコンテナ内の子要素は、フレックスアイテムと呼ばれ、フレックスコンテナの特性に従って配置されます。

簡単に言うと、親要素にflexを付与してあげると、その子要素をいい感じに配置してくれるプロパティです。例えば、以下のようなコードがあります。

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

.parent {
    display: flex;
    justify-content: space-around;
    width:500px;
}
.child {
    width:200px;
}

このコードでは、parentクラスの要素がフレックスコンテナになり、childクラスの要素がフレックスアイテムになります。justify-content: space-around;は、フレックスアイテムを均等に配置するためのプロパティで、width: 500px;は、フレックスコンテナの幅を指定しています。childクラスの要素には、幅が200pxに設定されています。実際にこのコードを動作させると、500pxの横幅の親要素の中で、200pxの子要素がそれぞれ余白を均等にしながら、いい感じに配置されることがわかります。フレックスコンテナを使用することで、要素の配置を簡単に制御することができます。

この使い方はほんの一例で、display: flex;には他にも様々なプロパティがあり、要素の配置やレイアウトを柔軟に制御することができます。フレックスコンテナを活用することで、Webページのデザインをより魅力的にすることができます。 flexboxは極めるととても便利なプロパティなので、ぜひ調べてみてください。

作成:2026-06-15 YGMS_yukkuri

display: flex​

display: flex