もっと CSS を使いこなすための応用編（後編）

前編・中編では、カスタムプロパティ、アニメーション、Flexbox と Grid レイアウトについて学びました。後編では、さらに便利な CSS 関数と、Sass について紹介します。

5. 便利な CSS 関数

CSS には、値を計算したり、変換したりするための便利な関数がいくつか用意されています。ここでは、特によく使う calc()、min()、max()、clamp() 関数を紹介します。

`calc()` で計算

calc() 関数を使うと、CSS の値の中で四則演算を行うことができます。異なる単位の値を組み合わせて計算できるのが特徴です。

css

.container {
    width: calc(100% - 80px); /* 幅を親要素の 100% から 80px 引いた値にする */
    padding: calc(1rem + 20px); /* パディングを 1rem に 20px 足した値にする */
}

この例では、.container の幅を親要素の幅から 80px 引いた値に、パディングを 1rem に 20px 足した値に設定しています。

`min()`、`max()`、`clamp()`関数

min()、max()、そしてclamp()関数は、それぞれ最小値、最大値、そして指定範囲内の中央値を指定することができる関数です。

css

.box {
    /* 幅を、50%、600pxのうち小さいほうの値にする */
    width: min(50%, 600px);

    /* 高さを、200px、300px、400pxのうち、真ん中の値（300px）にする */
    height: clamp(200px, 300px, 400px);
}

.container {
    /* 幅を、50%、300px、600pxのうち、真ん中の値（50%）にする */
    /* ただし、親要素の幅によって、最終的な値は300pxから600pxの間になる */
    width: clamp(300px, 50%, 600px);
}

min()関数は、主にレスポンシブデザインを実装する際に役立ちます。例えば、最大幅が600pxで、それ以下の場合は画面幅の50%にする、といったスタイルが簡単に実装できます。

clamp()関数を使うと、上限値と下限値を設けた可変の値を設定することができます。例えば、フォントサイズを16pxから24pxの間で、画面サイズによって可変にしたい、といったスタイルが簡単に実装できます。

これらの関数は、まだ主要なブラウザの全てが対応完了しているわけではないので、注意が必要です（Can I use...で要確認）。

6. Sass(SCSS) で CSS をパワーアップ！（オプション）

Sass (Syntactically Awesome Style Sheets) は、CSS を効率的に記述するための拡張言語（メタ言語）です。Sass には、SCSS と Sass の 2 つの記法がありますが、現在では SCSS 記法が主流となっています。

Sass を使うと、変数、ネスト、ミックスイン、継承などの機能を使って、CSS をより構造的かつ効率的に記述することができます。

変数

Sass では、$ で始まる名前で変数を定義できます。

scss

$main-color: #0077CC;
$base-font-size: 16px;

h1 {
    color: $main-color;
    font-size: $base-font-size * 1.5;
}

.button {
    background-color: $main-color;
    font-size: $base-font-size;
}

この例では、$main-color と $base-font-size という変数を定義し、<h1> と .button のスタイルに適用しています。

ネスト

Sass では、セレクタをネストして記述することができます。

scss

nav {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            display: inline-block;
            margin-right: 20px;

            a {
                color: #0077CC;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

この例では、<nav> 要素の中の <ul>、<li>、<a> のスタイルをネストして記述しています。ネストを使うことで、HTML の構造と対応した、より読みやすい CSS を書くことができます。

ミックスイン

ミックスインを使うと、スタイル定義をまとめて再利用可能な部品にすることができます。@mixin で定義し、@include で呼び出します。

scss

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}

この例では、border-radius というミックスインを定義し、.box と .button に適用しています。

継承

継承を使うと、あるセレクタのスタイルを別のセレクタに引き継ぐことができます。@extend を使って継承元を指定します。

scss

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success-message {
    @extend .message;
    border-color: green;
}

.error-message {
    @extend .message;
    border-color: red;
}

この例では、.success-message と .error-message が .message のスタイルを継承し、さらに border-color を上書きしています。

コンパイルって何？

Sass は、そのままではブラウザで解釈することができません。Sass を使うには、コンパイルという作業を行い、通常の CSS ファイルに変換する必要があります。

コンパイルには、コマンドラインツールや GUI アプリケーション、タスクランナーなど、様々な方法があります。

例えば、コマンドラインツールを使う場合は、以下のように sass コマンドを実行します。

bash

sass style.scss style.css

これは、style.scss をコンパイルして、style.css という CSS ファイルを生成するコマンドです。

コラム：CSS の設計手法と最新動向

近年、CSS の設計手法は大きく変化しています。BEM や SMACSS などの命名規則に加えて、コンポーネント指向の考え方が主流となり、CSS in JS のような新しいアプローチも登場しています。

CSS in JS：JavaScript の中で CSS を記述する手法。コンポーネントとの親和性が高く、スコープの管理や動的なスタイルの適用が容易になります。
CSS Modules：CSS ファイルをモジュールとして扱い、クラス名をローカルスコープにすることで、名前の衝突を防ぐ手法。
Tailwind CSS：ユーティリティファーストの考え方に基づいて、あらかじめ定義された低レベルの CSS クラスを組み合わせてスタイルを構築するフレームワーク。
UnoCSS：Tailwind CSSに似た、ユーティリティファーストのフレームワークです。Tailwind CSSよりも設定が柔軟で、より細かなスタイルの制御が可能です。

これらの新しい技術は、従来の CSS の課題を解決し、より効率的でメンテナンス性の高い CSS 開発を実現するために登場しました。

ウェブ開発の技術は日々進化しています。常に最新の動向をキャッチアップし、新しい技術を学ぶことが重要です。