RECRUIT
+

重富プラスのWebコーダーKです。
日々進化しているCSSですが、知っているけどよく理解できておらず「それってつまりどういうもの?」「どうやって使うの?」「便利なの?」と思っている方に向けて、モダンCSSをまとめてご紹介します。
サンプルコードも載せているので、ぜひ参考にしてください!

コンテナクエリ

コンテナクエリは、親要素のサイズに基づいて子要素のスタイルを変更する機能です。これにより、レスポンシブデザインがより直感的になります。

使用例

.container {
    container-type: inline-size;
}

.child {
    background-color: lightblue;
}

@container (min-width: 500px) {
    .child {
        background-color: lightgreen;
    }
}

このコードでは、.containerの幅が500px以上になると、.childの背景色が緑に変わります。

スタイルクエリ

スタイルクエリは、親要素のスタイルに基づいて子要素のスタイルを定義する機能です。

使用例

.container {
    width: 100%;
    height: 300px;
    background-color: lightgray;
}

.child {
    background-color: lightcoral;
}

@container (min-height: 200px) {
    .child {
        background-color: lightyellow;
    }
}

ここでは、親要素の高さが200px以上になると、.childの背景色が黄色に変わります。

:has()

:has()擬似クラスは、特定の子要素を持つ親要素にスタイルを適用するために使用されます。

使用例

.parent:has(.active) {
    border: 2px solid blue;
}

このコードでは、.parent要素が.activeクラスを持つ子要素を含む場合、青いボーダーが適用されます。

ネスト

CSSネストは、スタイルをより読みやすく、モジュール化するための機能です。

使用例

.parent {
    color: black;

    .child {
        color: red;
    }
}

このコードでは、.parentの中にある.childは赤色になります。

scroll-behavior

scroll-behaviorプロパティは、スムーズなスクロールを実現します。

使用例

html {
    scroll-behavior: smooth;
}

この設定により、ページ内リンクをクリックした際にスムーズにスクロールします。

aspect-ratio

aspect-ratioプロパティは、要素のアスペクト比を指定します。

使用例

.image {
    width: 100%;
    aspect-ratio: 16 / 9;
}

このコードでは、.image要素は16:9のアスペクト比を保ちながら表示されます。

margin-inline

margin-inlineプロパティは、左右のマージンを一度に設定できます。

使用例

.box {
    margin-inline: 20px;
}

このコードでは、.box要素の左右のマージンが20pxに設定されます。

text-underline-offset

text-underline-offsetプロパティは、テキストの下線の位置を調整します。

使用例

.text {
    text-decoration: underline;
    text-underline-offset: 4px;
}

このコードでは、テキストの下線が通常より4px下に表示されます。

:nth-child()の「of S」構文

:nth-child()の「of S」構文は、特定の親要素に対して子要素を選択するために使用されます。

使用例

ul li:nth-child(2 of ul) {
    color: blue;
}

このコードでは、ulの2番目のli要素が青色になります。

text-wrap: balance

text-wrap: balanceは、テキストの折り返しを調整し、行の長さを均等に保つために使用されます。

使用例

.text {
    text-wrap: balance;
}

このコードでは、テキストが均等に折り返されます。

initial-letter

initial-letterプロパティは、段落の最初の文字を大きく表示します。

使用例

p {
    initial-letter: 3;
}

このコードでは、段落の最初の文字が3行分の高さで表示されます。

 

まとめ

これらのモダンCSS機能を活用することで、より洗練されたウェブデザインが可能になります。ぜひ、制作に取り入れてみてください。新しい機能を試す際には、ブラウザの互換性にも注意し、ユーザー体験を最適化する工夫を心がけましょう。モダンCSSの力を活かして、次世代のウェブデザインを一緒に楽しみましょう!