【入門編】ユニバーサルセレクタ (*) – CSS実践ガイド

やあ、CSSの世界へようこそ。フロントエンドの迷宮を旅する皆さんのガイド役、アーキテクトです。

CSSを学び始めると、必ず一度は「なんだこの不思議なマークは？」と立ち止まる瞬間があるよね。今日は、その中でも特に個性的で、かつ最強の力を持つユニバーサルセレクタ「“（アスタリスク）」について、少しお話ししようと思う。

肩の力を抜いて、リラックスして読んでみてね。

—

プログラミングやCSSの世界で、“ は「全部！」を意味する魔法の言葉なんだ。

例えば、スーパーマーケットで「全品半額！」という大きな看板を見たことはないかな？あの看板は、店内に置いてあるお菓子も、野菜も、お肉も、全部まとめて対象にするよね。CSSの “ もそれと全く同じ。

HTMLにある「すべての要素」をターゲットにするのが、このセレクタの役割なんだ。

「個別に指定すればいいのに、なんで全部選ぶ必要があるの？」って思うよね。実は、Web制作の現場では、「ブラウザごとのクセ」を消すという、地味だけどとてつもなく重要な作業があるんだ。

ブラウザ（ChromeやSafariなど）は、デフォルトで「見出しはこれくらいの余白で」「リストにはこれくらいの隙間を」と、親切心で勝手にスタイルをつけてくれている。でも、これがデザインをガチガチに作り込みたい私たちにとっては、ちょっとした「余計なお世話」になってしまうことがあるんだよね。

そこで、“ を使って「まずは全員、余白ゼロからスタートね！」と号令をかけるわけ。

—

これが、多くの現場で使われている「リセット」の基本形だ。コピーして、自分のエディタに貼り付けてみてほしい。

/ すべての要素（）に対して適用する /

/ 外側の余白をゼロにする /
margin: 0;

/ 内側の余白をゼロにする /
padding: 0;

/ これが重要！枠線の幅をサイズ計算に含める設定 /
box-sizing: border-box;
}

margin: 0; / padding: 0;：全員の余白を一度リセットして、真っ白なキャンバスにする。ここからデザインを積み上げていくと、ズレが発生しにくくなるんだ。
box-sizing: border-box;：これは「CSS界の知恵」だよ。枠線（border）の太さを入れると全体のサイズが膨らんでレイアウトが崩れる……という初心者が必ず陥る罠を、これで回避できるんだ。

—

ここまで「便利だよ！」と話してきたけれど、実はこの “ 、ちょっとワガママな一面があるんだ。

「すべての要素」を選ぶということは、Webページにある何百、何千という要素すべてに対して、ブラウザが一生懸命スタイルを適用しなきゃいけないってこと。もしページがすごく重かったり、複雑な構造をしていたりすると、ほんの少しだけ表示速度に影響が出ることもある。

だから、伝説のアーキテクトとしてはこうアドバイスするよ。

全部を “ で制御しようとすると、後で「あれ？ここだけ色を変えたいのに全部変わっちゃった！」なんていうパニックが起きるからね。

—

CSSの学習は、ときどき壁にぶつかることもあると思う。でも大丈夫。“ という強力な道具を知った今のあなたは、もう「ブラウザの勝手な余白」に悩まされることはないはずだよ。

まずはこの “ を使って、余白のストレスがない「真っ白なキャンバス」を作るところから始めてみて。自分の手で要素がピタッと整列した時の快感は、何物にも代えがたいものだから。

もし何かつまずいても、それはあなたが前に進んでいる証拠。いつでもまた、ここに戻っておいで。応援しているよ！