書籍「作って学ぶモダンコーディング」でHTMLとCSSの理解をアップデート

HTMLやCSSは常に進化を続けているので、常に勉強し続けたり情報を追ったりする必要がありますよね。

2021年9月に発売された書籍「作って学ぶモダンコーディング」では、ここ最近のWeb制作で利用するモダンなコーディングを教えてくれます。

比較関数の利用

cssには2021年現在、全てのモダンブラウザにサポートされている比較関数というものが存在します。

  • min関数
  • max関数
  • clamp関数

これらの関数は、Web制作をする上で作業効率を大幅に上げることが可能です。

min関数・max関数

このコードを使った事例を紹介します。

例えばこのようなヘッダーにmin関数を当てると仮定します。

下記をそれぞれ2%として、コンテナの幅を設定することができます。

  • 左側のロゴ画像と、その左の空白
  • 右側のロゴ画像と、その右側の空白
.container {
    width: min(96%, 1280px);
    margin: auto;
}

上記で設定した1280pxは、最大幅を意味しています。

つまり、ブラウザは96%もしくは1280pxのうち、どちらか最小の値を選択し続けます

max関数の場合

max関数の場合は、概念を真逆にして考えます。

.container {
    width: max(96%, 1280px);
    margin: auto;
}

上記で設定した1280pxは、最小幅を意味しています。

つまり、ブラウザは96%もしくは1280pxのうち、どちらか最大の値を選択し続けます

clamp関数

clamp関数は、2つの定義された値(最小値と最大値)の間をクランプします。

3つのパラメーター(最小値、推奨値、最大値)を使います。

ちなみにクランプはこのような器具のことです。

下記のようなイメージです。

  • 赤い柱(根本)部分が最小値
  • 赤い爪部分(通称アゴ)が最大値
  • 銀色のボルト部分が推奨値

前からfont-sizeをレスポンシブに設定できないものかと悩んでいたので、clamp関数の出現は非常にありがたいです。

というのも、font-sizeの指定をするのに便利な関数だからです。

.title {
    /* フォントサイズを18pxから42pxの間に定義する */
    font-size: clamp(18px, (1rem + 5vw), 42px);
}

上記のように書くことで、以下を再現することが可能です。

  • font-sizeの最小値は18px
  • font-sizeの最大値は42px
  • font-sizeは18px ~ 42pxの間で、中間値を取り続ける

safariで機能しない場合は、以下のようにmin-heightを加えてあげます

.title {
    /* フォントサイズを18pxから42pxの間に定義する */
    font-size: clamp(18px, (1rem + 5vw), 42px);
    min-height: 0vw;
}

gridレイアウト

gridはflexと違い、縦と横の二つの軸でレイアウトを行います。

初学者からするととっかかりにくいコーディング記法ですが、グリッドを作成するためには非常に強力なツールです。

例えば、このようなバナーを次のコードで再現することができます。

.grid__container {
    display: grid;
    max-width: 800px;
}

.grid__item--contact {
    /* お問い合わせのバナーのgrid設定 */
    grid-column: 1 / 3;
}

grid-columnでは、gridレイアウトの横軸を指定しています。

grid-columnは1からカウントをします。

3となっている理由は、横軸が3つあるからです。

つまり

grid-column: 1 / 3;

とは、grid-columnが1から始まって3で終わりますよという意味ですね。

これに関しては、もっと具体的な書き方があります。

.grid__item--contact {
    /* お問い合わせのバナーのgrid設定 */
    grid-column-start: 1;
    grid-column-end: 3;
}

もちろん、全く同じ結果を得ることができます。

そしてまた上記のgrid__item–contactは、次のコードでも全く同じ結果を得られます。

.grid__item--contact {
    /* お問い合わせのバナーのgrid設定 */
    grid-column: 1 / span 2;  /* ライン番号1から始めて、2つ先のラインまで伸ばす */
}

大きい方のラインの番号を書く代わりに、いくつ先のラインまで伸ばすかを記述する方法がspanです。

これ以上の説明はここでは省きます。

グリッドレイアウトの理解については、以下の記事がとても勉強になると思いますよ。

まとめ

書籍「作って学ぶ HTML & CSSモダンコーディング」では、上記以外にもたくさんのモダンコーディングに関する情報が詰まっています。

Web制作者やWeb制作を志す人なら、一読の価値はあると思います。

サンプルファイルのダウンロードもできるので、是非手に取ってみてくださいね。