部品で考える——使い回せるCSSを書く

ここまでで、レイアウトの道具は一通り揃いました。このチャプターでは、新しいプロパティは"ほぼ"登場しません。かわりに、コードの書き方の考え方を一段レベルアップさせます。テーマは「部品で考える」。地味に聞こえるかもしれませんが、実はこの章が、この先プロのフロントエンド開発に進むための一番大事な橋になります。

「ページ」ではなく「部品」で見る

突然ですが、実際のWebサイトをよく観察してみてください。同じ見た目のボタンが、ページのあちこちに何度も登場していませんか。「お申し込みはこちら」「詳しく見る」「送信」——文言は違っても、色・形・大きさは同じボタン。カードも、メニューも同じです。

プロはページを「1枚の絵」として作っていません。ボタン、カード、メニューといった部品(パーツ)を先に作り、それを組み合わせてページにしています。レゴブロックと同じです。ブロック(部品)がしっかりしていれば、組み合わせでどんなページでも作れる。

実は、あなたはもう部品化を体験しています。チャプター11で、.card というclassを3枚のカードで使い回しましたよね。「1箇所直せば3枚変わる」——あれこそが部品の力です。この章では、それを意識的な設計としてやれるようになります。

ボタンを「部品」として作る

例として、使い回せるボタンを作ってみましょう。

ポイントを3つ。まず、タグ(a)ではなくclass(.btn)にスタイルを書いていること。もし a { ... } と書いたら、ページ内のすべてのリンクがボタンの見た目になってしまいます。「この部品にだけ効かせたい」からclassを使う——部品化の第一歩です。

次に、新出の小道具を2つだけ。text-decoration: none; はリンクの下線を消す指定(ボタンに下線は不要なので)。display: inline-block; は「文章の中に置けるが、paddingなどの箱の指定も効く」というモードへの切り替えです。理屈は今は深追いせず、「aタグをボタン化するときのお約束セット」と覚えて構いません。

そして padding: 12px 24px; という書き方。値を2つ書くと「上下12px、左右24px」の意味になります。ボタンは左右を広めに取ると"ボタンらしく"見える——実務でも頻出の書き方です。

「型」と「差分」に分ける

部品化の真価は、バリエーションを作るときに現れます。「基本は同じだけど、色だけ違うボタン」が欲しいとします。ダメな例は、.btn-blue と .btn-red を丸ごと2つ書くこと——paddingや角丸の指定が重複し、あとで形を変えたくなったら2箇所直すはめになります。

部品の考え方では、共通の「型」と、違いの「差分」に分けます。