『CSS 優良デザイン×アイデア事典 プロがシェアする現場の即戦力テクニック』を読みました。

以下の書籍を読みました。
感想について書こうと思います。

CSS　優良デザイン×アイデア事典　プロがシェアする現場の即戦力テクニック

定番の表現から最新の流行まで、CSSでデザインできる！

株式会社エムディエヌコーポレーション

概要

本書では、数年以内に流行った比較的新しいCSSテクニックについて紹介されていました。
例えば、流体タイポグラフィやサブグリッド、パララックススクロールなどです。
構成としては、レイアウト・グラフィック・UIパーツ・アニメーションの4つの章があります。
それぞれの章では、具体的なデモコードと表示される画像を見ながら解説されています。
デモコードは、無料で配布されています。

Gridの重ねがけ

私の場合、重ねがけするなら position を使うのが初手でした。
本書にて、Gridを使った重ねがけの方法が紹介されていて、良さそうに思いました。
Grid では2次元上のマス目として表現するのですが、どのマス目に表示するかが簡単にできます。
そのため、1行1列目に表示しているコンテンツの上に重ねたい場合は1行1列目に表示する様にCSSを書けば済みます。

<div style="display: grid;">
  <div style="grid-area: 1 / 1;">A</div>
  <div style="grid-area: 1 / 1;">B</div>
</div>

後に書いたものが上に来るので、重ねたい順に追加すれば良さそうです。

ブロークンレイアウト

基本的に、HTMLとCSSでコンテンツを表示すると縦積みか横並びになります。
これは、CSSのボックスモデルの仕様のためだったかと思います。
この規則正しい並び順を意図的に崩したデザイン、ブロークンレイアウトというのが紹介されていました。
見た目は知っていましたが、そういう名前というのを初めて知りました。

方法としては、Gridのマス目表示テクニックを使います。
Gridでマス目を定義した後、どこからどこへコンテンツを表示するかをGridなら自由に決めることができます。
そのため、ちょっとズレた位置にコンテンツを表示することが可能です。

このブロークンレイアウトは、意図的に規則性を崩しているため可読性をより意識しないといけないなと思います。
崩すところは崩して新鮮さを出しつつ、視線方向（Z）などの心理やトンマナは抑えておかないと、通常よりも読みにくいページになりそうです。

グラデーションのハードストップ

linear-gradient などを使って、グラデーションを表示することがあります。
このグラデーションには、色が滑らかに変化する美しさがあります。
この滑らかに変化ではなく、0・100と極端な緩急をつけた見せ方、ハードストップという方法を知りました。

Hard Stop Gradients - CSS-Tricks

The word "gradient" implies a transition from one color to another color. That's super useful in web design and can create lovely effects. We're going to skip that whole "transition" part though and see what kind of CSS trickery that unlocks.

CSS-Tricks

以下のように、 50% の位置で一気に色を、赤から青に変えるのです。

<div style="height: 50px; background: linear-gradient(to right, red 50%, blue 50%);" />

こういう極端な方法を使うことで、円グラフやドット絵模様などの幾何学的な表現をしやすくなりそうです。

色の動的表現

color-mix という2色の色を混ぜるプロパティについて紹介されていました。

存在は知っていたのですが、上手い使い所が知りませんでした。
例えば、ボタンのホバー時の背景色を、プライマリーカラーに背景色を少し足すというのができます。

.btn:hover {
  background-color: color-mix(in srgb,  var(--color-primary) 70%, var(--color-bg));
};

また、色の指定方法として 相対色構文というのがあります。

これは名前の通りで、任意の色を相対的に変える方法です。
これを使えば、ブランドカラーの色相を維持しつつ、彩度や明度を変えることができます。

.darker {
  /* ブランドカラーを少し暗くする */
  color: oklch(from var(--color-primary) calc(l - 0.05) c h);
}
 
.desaturated {
  /* 彩度を少し下げる */
  color: oklch(from var(--color-primary) l calc(c - 0.03) h);
}

oklchについて 以下の記事でトークン設計を考えたことがあるのですが、もっとスマートに書けそうなことに気づきました...。

oklchとトークン設計

Tailwind CSS v4.0 から、色指定に OKLCH が標準採用されました。 oklch() 関数記法は、指定された色を Oklch 色空間で表現するものです。これは oklab() と同じ L 軸を持っていますが、極座標系の C

ジブンノート

カード全体のリンク化

カードUI全体にリンク化したいことがあります。
HTMLとしてanchor要素で囲う方法が直感的ですが、色々な意味で困ることがあります。
本書では、カード内にある 詳細を見る などのリンクテキストの ::before を使ってカード全体へ広げる方法が紹介されていました。
この方法であればanchor要素で囲む必要がありませんし、同カード内の別リンクがあっても問題ありません。
親要素でanchor要素で囲むと、子要素にanchor要素は置けませんので。

any-hoverとfocus-visible

ホバーできない端末への配慮として、:hover ではなく any-hover を使いましょうというお話です。
世の中的には、:hover でコーディングすることが大半な気がする（個人的な意見）ので、たぶんなくならないだろうなと思います。
ちゃんとしているところなら、any-hover と focus-visible を使って要素のホバー・フォーカスを管理してそうです。

フォーム部品のカスタマイズ

チェックボックスやラジオボタンなどの見た目をカスタマイズしたいときがあります。
簡単なカスタマイズとしては、色を変更できるみたいです。
それでも物足りない場合は、input要素を視覚的に非表示 (visually-hidden) して独自にスタイリングします。

:checked などのフォーム部品の状態を表す擬似クラスセレクターを使えば、見た目だけカスタマイズして挙動はブラウザに任せる良い所取りができます。
懺悔として、醜いカスタマイズフォーム部品を作ってしまった経験があるので、次からはちゃんとしたいと決心しました。

backdrop擬似要素

dialog など全面表示する要素の直下は、::backdrop 擬似要素を使えば良いみたいです。
よく前面表示する際の背景色を設定するときに、わざわざ overlay 要素を作って対処していましたが ::backdrop を使えば良かったかもしれません。

終わりに

知らなかったことが知れて、本書を読んでよかったなと思います。
比較的新しい技術のキャッチアップも大事ですが、枯れた技術の保守設計というのも大事にしたいなと思いました。

P.S.

本を読みながら分からないことがあったら、スマホで写真を撮ってChatGPTアプリに渡して解説させました。
読書体験として近くに先生がいる感じがしてよかったです。

s

silverbirder

Webソフトウェアエンジニア