1.1 「あなたはフロントエンド開発者なのだ」

CSSは、ちょっと本を読んで手を動かせば覚えられるタイプの便利な言語ではありません。雑に作るだけならその程度の学習でもできるようになれますが、多くの人がCSSで難しいと感じているのは、さまざまなレベルの複雑さが共存するWebサイトをどうやって「隅々まで正しく」作るかです。大変なのは「隅々まで正しく」の部分なのです。「コンテンツやデータを使いやすく編成できる柔軟なレイアウトを持ち」「さまざまな大量のコード片⁴ を柔軟なレイアウトに配置できる」マルチページWebサイトを立案・設計する方法を会得しなければ、本物のCSSスキルとは言えません。

MDN CSSリファレンスのように、あらゆるCSSプロパティを網羅したWebサイトは既に世に満ちあふれていますので、本チュートリアルで同じ説明を繰り返したところで「屋上屋を架す」のと変わりません。その代わり『CSS & Design編』は、現実のWebサイトでCSSをどうデザインに適用するかを詳しく解説することで、そうしたリファレンスを補完するように構成されています。その結果、ストーリー中心の解説によって、CSSのリファレンスを理解して応用するのに必要となる「現場での事例」「うまい調査方法」「アプローチを変えるべきタイミング」といった利用上のコンテキストが具体的に見えるようになっています。特に、例の「技術の成熟」と合わせ技にすることで効果が倍増します（コラム 1.2）。

開発者として学習を進めるうえで重要なポイントは、「スタイル指定とレイアウトの概念が密接に関連して動作するしくみ」「HTMLとCSSを効果的に組み合わせて実際に使いやすいレイアウトを作る方法」「サイト内でのコードの繰り返し（重複）を回避して、複数ページのスタイルを一括指定するシステムの使い方（コラム 1.3）」を最初に学ぶことです。これらをスキップして細かなプロパティを丸暗記しても、テキストの色やサイズを変更するエキスパートぐらいにはなれますが、学んだ知識を実際の現場で活用する機会は巡ってこないでしょう。実はCSSをこのように「全体像から学ぶ」ということは、単にスタイル指定方法の初歩に触れるだけではなく、本格的な「フロントエンド開発（front-end development）」の世界を初めて垣間見ることでもあるのです（図 1.3⁵）。

図 1.3: 「あなたは魔法使いフロントエンド開発者なのだ、ハリー」

1.1.1 ところでフロントエンド開発って何？

誰かを指してフロントエンド開発者と呼ぶとき、「Webサイトのうち、ユーザーが目にしたり操作したりする部分を開発する人」を意味し、作業内容にはHTMLやCSSやJavaScriptも含まれます。他にも「UIデザイン」（表示の設計）や「UXデザイン」（User eXperience: ユーザーエクスペリエンス、UIやページの機能を駆使してユーザーがWebサイト上で目的を達成できるようにする方法）という言葉を聞いたことのある人もいるでしょう。

フロントエンド開発の対義語は「バックエンド開発（back-end development）」です。バックエンド開発では、データの構造や保存や配信の方法などを扱います。バックエンド開発の基礎学習は『Ruby編（翻訳予定）』から開始される予定で、そのときに「データベース」「ユーザー管理」「ログインと認証」といった機能を備えたフルスペックのWebアプリケーション開発を扱います。

では、HTMLイモムシがフロントエンド開発チョウチョになるにはどうしたらよいのでしょう？（図 1.4）

図 1.4: 「『CSS & Design編』を読むほうが羽化するよりラクだね〜」

まずは、『HTML編』で学んだスタイル指定の方法を振り返ってみましょう。最後のセクションでは、まずスタイル指定をページの要素に直接追加する方法（インライン方式）を学び、次にそのスタイルをスタイルシートに切り出す方法についても少しばかり学びました。本チュートリアルでは、後者のテーマを大きく発展させます。

本章ではこれより、さまざまなCSS宣言や値の基礎を学びます。そのため、きわめてシンプルな要素を少しだけ配置したサンプルページを用いて、最初のうちは上述のDRY原則（コラム 1.3）を徹底することに集中します。本章の最後では「CSSセレクタ（CSS selector）」という重要なテクニックが初めて登場し、これを用いてページ内の特定の要素のみに狙いを定めてスタイルを指定する方法を学びます。

第2章では、セレクタのさまざまな側面について解説します。セレクタは、プロジェクト開始時点で正しく扱うことが重要です（プロジェクトが始まってからでは遅いのです）。ここで学ぶ「よい名前の付け方」は、複雑なサイトを正しく管理し、柔軟性を損なわないために重要です。CSSの色指定方法もここで登場します。

第3章では、CSSのさまざまな値の中でも二大筆頭である「色指定用の値」「サイズ指定用の値」が登場します。ここで学ぶ内容は、第4章の「ボックスモデル（box model）」の重要な基礎知識を準備し、ページ上のさまざまな要素がどのように組み合わせられるかを決定します。

第5章および第6章では「静的サイトジェネレーター（static site generator）」を導入します。これを用いてこれまで学んできたことをひとつのレイアウトに盛り込み、メンテナンスも更新もしやすいプロ級のWebサイトを構築します。

第7章では「Flexbox」を用いて柔軟なページレイアウトを組む方法を学びます。これを用いてフォトギャラリーページにレイアウトを追加したり（このページは『JavaScript編』で仕上げます）、ブログページに投稿を表示したりします。第8章ではブログそのものを追加し、Jekyllというツールを用いてプロ級のブログサイトを構築します。

現代のWebトラフィックの大部分は、モバイルデバイス（スマホやタブレットなど）によるものであり、これらを軽んじていけません。第9章ではCSSと「メディアクエリ（media query）」の基礎を学んで、DRY原則（コラム 1.3）を守りながらモバイルでも使いやすWebサイトを構築できるようにします。

最後の第10章では、「カスタムフォント」「metaタグ」などの細かな点を追加してWebサイトの完成度を高めます。ここまでくれば、いい感じにスタイルが設定された業務レベルのWebサイトを実際にデプロイして動かせるようになります。

それでは始めましょう！

1.2 CSSの概要と歴史

CSSはプレーンテキスト形式で宣言され、テキストエディタを用いてHTMLファイルやCSSファイルに配置します。典型的なCSS宣言はリスト 1.1のようになります。この時点でCSSの内容がわからなくても問題ありません。

body {
  color: black;
}

p {
  font-size: 1em;
}

p.highlighted {
  font-size: 1.5em;
  background: yellow;
}

CSSの「カスケード（cascading）」とは、定義されたスタイル指定がある要素から別の要素へ伝搬することを指します。カスケードは、「何が最初に宣言されたか」「その要素に親要素はあるか」「その親要素にはスタイルが指定されているか」「宣言の詳細度は高いか低いか（ 2.3で後述）」といった点に基づいて進行します。

この「スタイルの継承」（トップレベルからその下にある子要素にスタイルが受け継がれること）が発生することで、すべての要素にひとつひとつスタイルを設定して回らなくても済むようになります。たとえば、先ほどのリスト 1.1でbodyタグの中にあるcolor属性を変更したとすると、その変更はbody要素で囲まれているすべての要素のcolor属性にも伝搬して反映されます。このようにスタイル指定が伝搬して受け継がれる様子をカスケードと呼びます⁶。

CSSの「スタイルシート（style sheet、stylesheetと書くことも）」とは、そのページのスタイル宣言（スタイル指定）を、ページ内にあるひとつの独立したセクション（内部スタイルシート）または外部ファイル（外部スタイルシート）に集約できるようにするしくみを指します。外部スタイルシートは、HTMLのheadセクションにリンクとして記述することでページに読み込まれます（この方法については第5章で実践します）。このようにすることで、ページの実際のコンテンツから、ページ上に表示するときの外観や配置を定義するコードを切り離せるようになり、コンテンツやコードがシンプルになってメンテナンスしやすくなります。

1.2.1 CSSの仕様は常に変化している

ここでCSSについて知っておくべき重要なポイントがひとつあります。WebデザイナーやWeb開発者のニーズに応えるために、HTMLと同様、CSSも常に進化を繰り返しています。実際、CSSの進化の方がHTMLの進化よりはるかにテンポが早いのです（図 1.5）⁷。

図 1.5: CSSもジュラシックパークの恐竜と同じく、進化する

公式のCSS仕様には将来のための追加が常に繰り返されてはいますが、まだ「均等には行き渡っていません（ウィリアム・ギブスンの名言より）」。CSSへの新しい仕様追加が提案されても、そうした新しい概念を実際に採用するかどうかはブラウザごとにまちまちです。たとえば、あるスタイル指定はGoogle Chromeでは動いても、Mozilla FirefoxやMicrosoft Internet Explorer（またはポストIEのMicrosoft Edge）ではまったく動かないということもあるのです。ブラウザで新しいスタイルがサポートされているとしても、実際には当面の間、一時的な名前を特別にスタイルで指定した場合に限り（コラム 1.4）、開発者が使いたいスタイルをサポートしているブラウザでだけ使えるものもあります。

コラム 1.4. ベンダープレフィックス

追加が提案された新しい仕様（spec: specification）が実際に公式のCSSに反映されるまでには、しばらく時間がかかります。そのため、新しい機能は必ずしもすべての（メジャーな）ブラウザで一斉に受け入れられるとは限りません。しかしブラウザ開発者（ベンダー）の多くは、仕様が公式に更新されるまで待つつもりはなく、自分たちのブラウザをいち早く限界まで強化（あるいは魔改造）したがる傾向があります。そうしたブラウザベンダーは、CSS仕様の新しい提案を察知するとただちにその仕様を独自に実装し始めます。

ブラウザごとにまちまちな実装状況による混乱を回避するため、ブラウザごとに動作が異なる機能については、ブラウザベンダーはそうした機能にベンダー固有のプレフィックス（prefix: 接頭語）を追加して、そのスタイル指定が実験的な機能であることを示すことがよくあります。ベンダープレフィックスには「-webkit-（WebKit: ChromeやEdgeやSafariなど）」「-moz-（Firefoxなど）」「-ms-（IE）」などがあり、これによって、ブラウザによってサポート状況の異なるスタイル指定を、特定のブラウザで指定できるようになります。

たとえば、CSSのtransition（ 7.4で後述）は、公式のCSS仕様に追加される前にほとんどのブラウザで実装されていました。そして実際に使うときには、以下の例のようにスタイル指定の冒頭にベンダープレフィックスを追加して宣言する必要がありました。

  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  transition: all 0.1s linear;

上の1行目は、WebKitというレイアウトエンジン（SafariやChromeや新しいEdgeなどで使われています）を内蔵するブラウザのみを対象とし、2行目はMozillaのGeckoエンジン（Firefoxなどで使われています）を対象とし、3行目はMicrosoftのブラウザ（IE）を対象としています。末尾の4行目は、プレフィックスなしの宣言（ここではtransitionそのもの）です。このようにプレフィックスなしの宣言を置くことで、今後ブラウザベンダーがベンダープレフィックスを廃止してこの機能を本採用しても、宣言を追加せずに済みます⁸。

訳注: ブラウザとレンダリングエンジンの関係は移り変わりが激しいので全体像が把握しにくく、注意が必要です。本注釈は2020年12月時点の情報です。Chromeは、以前はWebKitエンジンでしたが、その後WebKitから枝分かれしたBlinkエンジンを採用しています（ベンダープレフィックスはどちらも-webkit-）。Internet Explorer（IE）は既にEdgeに移行しており、最終バージョンのIE 11が今後順次サポート終了しますが、現実にはまだまだ使われているようです。Microsoft Edgeは2020年にChromeと同じエンジンを採用したので、現在のベンダープレフィックスは-webkit-です。また、同じブラウザでもOSによってエンジンが異なることもあります。特にiOSでは、Appleの規約によって他社のブラウザであってもエンジンはWebKitを使わなければならず、たとえばiPhone版のChromeでは実際にはSafariと同じWebKitエンジンが使われています。

ありがたいことに、最もよく使われるスタイル定義は、現在さまざまなブラウザで本質的に同じように使えます⁹。そして本チュートリアルでは、ブラウザでのサポート状況が怪しいスタイル指定などについて扱う予定もありません。とは言うものの、新しい機能をいち早く使ってみたいこともあるものです。そんなときは、CanIUseなどのツールでブラウザでのサポート状況を調べることをぜひおすすめします。なお、このようなリファレンスサイトで調査することを恥ずかしがる必要も隠す必要もありません。CSSが激しく移り変わることは避けようがありませんし、ブラウザでのサポート状況が今ひとつであることも珍しくないので、長年フロントエンド開発に従事している人々にとってもCanIUseなどのツールは必要不可欠です¹⁰。

1.2.2 CSSの発展史

はるか昔、インターネットの世界にあったのは単なるプレーンテキストのコンテンツばかりでした。あるとき、コンテンツを論理的に組み立てる手法が現れ始めると（1990年頃に登場したHTMLもそのひとつです）、データの外観やレイアウトを整える手法が無数に出現し、覇を唱えようと互いに争うようになり、戦国時代を迎えました。

始めのうちは、コンテンツの作者の意図はそっちのけで、ユーザーが使う表示プログラム（今で言うブラウザ）で外観を自分好みに設定するようなスタイル指定法が幅を利かせていました。やがてWeb世界が複雑になってくると、少なくともページのコンテンツをどう配置してどのようなスタイル指定で表示するかは、個別の表示プログラムで設定するのではなく、コンテンツの作者が決めるべきだということが明らかになり始めました。

興味深いスタイル設定方法が数多く提案されましたが、それらは無駄に複雑すぎたり、文書構造がまったく直感に反したりしていたため、いずれも広く採用されるには至りませんでした。

• Robert Raischの開発した「RRP」は、何の略だかよくわからない2文字の略語でスタイルを宣言する方式でしたが、読みやすいとは言えませんでした。
• Pei-Yuan Weiが開発したViolaWWWという初期のブラウザには、PWPというスタイル指定システムが組み込まれていました。PWPはスタイルのネストや外部スタイルシートなどを導入するなど現代でも通用する機能もありましたが、Unix OS版しかなく、広く支持を得ることもありませんでした。
• 「FOSI」は、HTMLの先輩であるSGML向けのスタイルシート言語で、ページのコンテンツの周囲に難解なタグを追加する方式でした（残念な出来）。
• 「DSSSL」は、どちらかというとスタイル指定もできる一種のプログラミング言語で、複雑な宣言を扱えましたが、構文が難解で、スタイル指定が複雑になりがちでした。

要するに、この時代は生物史で言うカンブリア爆発そのもので、よりよいWeb標準についての各種提案が古代Webの海にあふれかえっていました。その中のいくつかは、後にCSSとなったものにいくばくかの遺伝子を残したものの、CSSの直系の先祖はひとつもありません（図 1.6¹¹）。

図 1.6: CSSのおびただしいご先祖たち…生き長らえたのはほんのひと握り

HTML誕生の5年後の1996年12月、Bert Bosと共同作業していたHåkon Lieが、CHSS（Cascading HTML Style Sheet）というスタイル指定システムを提案しました。皆さんのご想像どおり、オリジナルのCHSSには、今のCSSには存在しない詳細もありましたが、Håkon Lieは博士論文でCHSSの仕様をシンプルな形に改めました。これは現代のCSSにだいぶ近いものになっていました。そしてこの概念が最終的にW3C（WWW Consortium）にWebコンテンツのスタイル指定システムとして採用されたのです。

これはもちろん大きな前進ですが、仕様の策定は前半戦に過ぎません。エンドユーザーが自由にスタイルを指定するには、ブラウザがその標準を実装してサポートしなければなりません。実際、1997年になるまで、CSSを部分的にでもサポートするブラウザは存在しませんでした。標準を完全にサポートするブラウザの出現は、2000年3月まで待たなければなりませんでした（図 1.7）。

図 1.7: CSSがやってきたのはミレニアムパーティの後（喜んでよかったんだろうか？）

CSSは長い間、ブラウザごとに違うオレオレ実装によって扱われていました。フロントエンド開発に少しでも関わったことがあれば、Webサイトのスタイル指定を複数のブラウザで同じように表示しようとすると、正気を保っていられなくなるほどの困難に直面したものです。中でも、Microsoft Internet Explorer（IE）は当時最大の問題児でした（図 1.8）。初期のIEのCSSサポートが箸にも棒にもかからないほどひどかったために¹²、一体何人の人々がWebデザインとWeb開発の世界に見切りをつけたかについては、皆さんのご想像にお任せするよりほかにありません。

図 1.8: IE6で画面をデザインしてみなければ、本当の憎しみというものはわからない

ブラウザごとにCSSの実装が違ってしまっているという問題は、ほんの数年前にWebKitエンジンを搭載したブラウザ（Google ChromeとApple Safari）と、Geckoエンジンを搭載したMozilla Firefoxが台頭して世の中を席巻するまで、長い間引きずられていました。まとめると、本チュートリアルを読むときには「Webのスタイル指定は、1997年にCSSの最初の仕様が公開されてから15年もの間（ほんのついこの前まで）、混乱の極みだった」ということを頭の片隅に置いていただければと思います。

訳注: CSSの仕様に興味のある方向け情報です。CSSの正式な仕様は、標準化団体であるW3Cのサイトで読めます。CSSの仕様は大変巨大なので、全体像を把握するだけでも骨が折れます。なお2019年からは、業界団体であるWHATWGがHTMLやDOMについては最新の仕様を公開していますが、CSSについてはW3Cのドラフトを参照しています（参考: 『HTML標準めぐりブラウザー業界団体とW3Cが合意–主導権は業界側に』）。これらはいずれも英語資料ですが、日本語のCSSリファレンスとしてはMDN（Mozilla Developer Network）のCSSドキュメントがよく整備されていて利用しやすいと思います（その代わり上述の英語仕様ほど最新ではありません）。

1.2.3 永遠の主観という名の沼

CSSのお勉強を始める前に、最後にもうひとつだけ、ちょっとしたメタ情報をお教えします。ページ上でCSSを実際に実装する方法は1つではありません。CSSの実装方法を「これしかない」「これさえやっておけばいいんだ」と1つに決め打ちすると、後々混乱を招く可能性があります。

既刊のチュートリアル（コラム 1.1）は、本チュートリアルよりも原則論を重視して進める形になっていて、何かを行う方法が複数ある場合にも、なるべく標準的または既に定着した正しい方法をひとつだけ提示するようにしています。これは学習者を迷わせないための配慮でもあり、実際に正しい答えをひとつに絞り込める内容でもあるからです。

しかしここから先には「正しい答えが用意されていない」こともざらにある未踏の世界が広がっています。私たちはその世界へ冒険の旅に出発しようとしているのです。WebサイトをCSSでデザインしようとすると、問題を解決する手法が次から次に見つかってまごついてしまうのが普通です。自分の主観を頼りに判断することは、この世界では例外的な行為ではなく、「掟」です（図 1.9¹³）。

この混乱の沼を乗り切るお手伝いをするのが、私たちの仕事です。

図 1.9: 「何というひどい臭いじゃ！」

冒険の旅が少しでも楽しくなるよう、別の話もしましょう。コラム 1.4では、どんなブラウザでもCSS標準の実装方法がそれぞれ少しずつ違っている部分がどこかにあるというお話しをしたかと思います。つまり、同じWebサイトを別のブラウザで表示したときに、表示結果が完全に一致するとは決して断言できないということです。画面の大きさを変えたらどうか、モニタの解像度が変わったらどうなるか、OSが違う場合はどうか、については言うまでもありません（第9章）。

まず、「見る人が変わっても完全に同じ画面を表示できるWebサイトというものは、この世に存在しない」ことをしっかりと身体に刻み込みましょう。これから学ぶのは、Webサイトをデザインするとき（またはデザイナーから受け取ったデザインを実装するとき）に、CSSの継承があいまいな場合にも表示の食い違いを許容範囲におさめる方法です。印刷や出版のような厳密な制約の多い世界とは異なりますので、あらゆるブラウザやあらゆるOSで表示を完全に一致させようと気に病むのではなく、限度を見切ることが肝心です。

もうひとつ付け加えます。Webサイトにスタイルを指定するときやレイアウトを組むときに、結局どのCSSスタイル指定を使えばよいのかがよく話題になりますが、そうしたベストプラクティスは流行り廃りに左右されやすく、プロジェクトの前任開発者の主観にも影響される傾向があることを覚えておきましょう。たとえばこの後 1.5でも取り上げるように、ページ上のさまざまな要素にCSSのクラスやidを割り当てる必要が生じることがよくありますが、そこでどんな名前を付けるかは完全にコードを書く人次第です。エンジニアやデザイナーの知り合いが多い方なら既にお察しかもしれませんが、人間は、えてして命名の話になると途端に「いや、名前はこう付けるべきだ」「こういう名前はダメだ」などと意固地になり、ちょっとやそっとでは意見を曲げてくれなくなります。技術の世界に昔からよくある宗教戦争のパターンです（図 1.10¹⁴）。

図 1.10: 宗教戦争その1:「クラス以外はまかりならぬ！」

いろいろ申し上げましたが、実装方法でも命名でも何でも、「一貫させること」つまり「ばらつかせないこと」が何よりも肝心です。たとえ実装が少々まずくても、複数の実装方法が混じり合ってしまうよりずっとましです。命名ルールが拙いことよりも、命名ルールが統一されない方が大きな問題です。

プロジェクト開始時点で何かひとつ方法を定めたら、プロジェクトが完了するまでその方法を変えないようにしましょう。途中で方針を大きく転換するのであれば、その後数日間は既存コードの更新に専念し、自分を含む今後のプロジェクトメンバーが困らないようにしましょう。本チュートリアルでは「スタイルメモ」というコラムをいくつか用意してあり、そこではCSSの別の用法に適した現時点のベストプラクティスも紹介していますので、こちらもぜひお読みください。

1.3 サンプルサイトをセットアップする

CSSの目的や起源に関するあらましを学んだので、いよいよ具体的なサンプルの作成に取り掛かりましょう。最初のスタイル指定は必ずしもシンプルではありませんが、第5章から始まる作業用Webサイト（レイアウトを含む）に備えて重要な基礎知識を固めますので、ここは辛抱が肝心です。

新規プロジェクト作成の手始めは、『HTML編』でプロジェクトを作成したときと同じように、mkdirコマンドでreposディレクトリを作成します（リスト 1.2）¹⁵。

$ cd                                   # ホームディレクトリに戻る
$ mkdir -p repos/<ユーザー名>.github.io  # サイトのディレクトリを作る
$ cd repos/<ユーザー名>.github.io        # 作ったディレクトリに移動する

このとき、以下のようにメインのGitHub Pagesサイトで使う自分のアカウント名と同じ名前を、上のコマンドのディレクトリ名で使うことにご注意ください。

<ユーザー名>.github.io

リスト 1.2の<ユーザー名>は、自分のGitHubアカウント名に置き換えます。これで、完全なURLはmhartl.github.ioのようになります。

GitHub Pagesは、実際にはmhartl.github.io/sample_cssのようにサブディレクトリからのサイト公開もサポートしていますが、残念ながらこのソリューションはmhartl.github.io/sample_css/galleryのようにさらにサブディレクトリが存在する場合はうまくいきません。その理由は、ファイルや画像を1個のサブディレクトリ（つまりsample_css）に保存する場合は、それより下のサブディレクトリを保存する自然な方法がないためです。このサンプルWebサイトは最終的にまさにこの構成を取ることになるので（ 6.4）、サブディレクトリを使わずにGitHub Pagesドメインのルートを使うことにしました。より良い方法は「カスタムドメイン」を使うことで、これならGitHub Pagesのサイトをwww.example.comのようなURLにホストできます。カスタムドメインについては無料の『Learn Enough Custom Domains to Be Dangerous』チュートリアルをどうぞ。

『HTML編』で解説したときと同じように、サイトを動かすのに必要なindex.htmlファイルを以下のようにtouchコマンドで作成します（リスト 1.3）。

$ touch index.html    # 空のindexファイルを作る

この新しいディレクトリで作成したindex.htmlファイルを好みのテキストエディタで開き、リスト 1.4のマークアップを貼り付けます。ご覧のとおり、ごく基本的なHTMLページです。このHTMLがまだよくわからない場合は、今のうちに『HTML編』をおさらいすることをおすすめします。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
  </body>
</html>

このHTMLドキュメントをブラウザで表示すると（コラム 1.5）、赤い文字のリンク、見出し、ボックスに入った緑色のリンクがいくつか表示されます（図 1.11）。これが最初のテストページになります。

ブラウザの種類やウィンドウのサイズなどによっては図とわずかに表示が異なる可能性もありますが、既に申し上げたとおり、わずかな違いは心配無用です。本チュートリアルでは、1ピクセルのずれもなく図と完全に一致させることに頑張るのではなく、必要にして十分な画面を表示することに集中することが重要です。

図 1.11: 一見どうということはなさそうだけど、ここで何かすごいことが始まる

$ open index.html    # macOSでのみ有効

$ xdg-open index.html    # Linuxでのみ有効

図 1.12: クラウドIDE（Cloud9）でHTMLファイルをブラウザ表示する

『Git/GitHub編』や『HTML編』のときと同様に、新しいWebサイトを今すぐproduction（本番）環境にデプロイします（これを習慣づけておくのはよいことです）。まず、『HTML編』で解説したように、GitHubで新しいプロジェクトを作成します（コラム 1.6についても考慮しておきましょう）。この場合は図 1.13のような感じになります。

図 1.13: GitHubに新しいリポジトリを作成する

リポジトリの作成が終わったら、リスト 1.5のコマンドを実行して、Gitの初期化とデプロイを行います。

$ git init
$ git add -A
$ git commit -m "Initialize repo"
$ git remote add origin <repo url>
$ git push -u origin master

リスト 1.5のコマンドが難しいと感じる場合は、今のうちに『Git/GitHub編』と、『HTML編』のプロジェクトを開始するをおさらいしておくとよいでしょう。なお、デプロイが成功したかどうかの確認については、演習問題に回します（ 1.3.1）。

本チュートリアルでは折に触れてGitのコミットとデプロイを実行しますが、一般には自分のやりやすいタイミングで行っても構いません。『Git/GitHub編』と『HTML編』を学び終えた方（または元々Git操作に慣れている方）は、そろそろコミットとデプロイのタイミングを自分で決めて実行してもよい頃です。

1.4 スタイル指定を始めよう

 1.2で解説したように、CSSはHTMLページの要素を「どんな外観で表示するか」「ページのどこに配置するか」を定義する方法です。CSSのスタイル指定は、「最初の宣言はどれか」「その要素は別の親要素の子要素か」「その親要素にはスタイルが適用されているか」「宣言の詳細度（specificity）は高いか低いか」といった点に基づいて、上位の要素のスタイルから下位の要素に伝搬（カスケード）されます。

ところで、今の説明に登場した「親」「子」「詳細度」は、Webページ上で何を指すのでしょうか？具体的にはこれらでどのようにスタイル指定が行われるのでしょうか？

ここで思い浮かべていただきたいのは、次の考え方です。ページ上のあらゆる要素は、マトリョーシカ人形のように「別の要素の内側に含まれる」こともあれば「別の要素をその内側に含む」こともあります（図 1.14¹⁶）。

図 1.14: マトリョーシカ人形は互いに入れ子にできるように作られている

親要素と子要素の典型的な関係（構造）は、図 1.15のようなチャートで表現できます。

図 1.15: 要素の親子関係は、常に上（親要素）から下（子要素）に向かって進む

図 1.15に示したタグの階層構造は、「DOM（Document Object Model）」と呼ばれます¹⁷。親子関係は相対的なので、DOMのある階層レベルは、その上の階層レベルから見ると「子」になりますし、その下の階層レベルから見れば「親」になります。この図をHTMLタグで説明すると、bodyタグはそのページ全体にとって「親」であり、bodyタグはhtmlタグから見れば「子」である、という具合に繰り返されます。bodyタグも独自の子をいくつか持っており、それぞれ見出しのh1要素とh2要素、順序なしリストのul要素、そしてdiv要素です。CSSでは、スタイル指定は「親から子へ」（図では上から下へ）と流れ落ちるように伝搬します。この流れ（フロー）は、他のスタイル指定に遮られるか、そのスタイルより詳細度の高いスタイルに出会うと、そこで終わります。

この考え方の最初の応用として、先ほどのサンプルページでインライン方式のスタイル指定が繰り返されている様子を観察しましょう。たとえば、ページにdiv要素がいくつかあり、どれもまったく同じボーダー（枠線）スタイルが指定されていることがわかります（リスト 1.6）。

サンプルコード内で縦に並んでいるドットは「コードの省略」を意味しますので、コピーしてはいけません。

.
.
.
<div style="border: 1px solid black;">
.
.
.
<div style="border: 1px solid black;">
.
.
.
<div style="border: 1px solid black;">
.
.
.

DRY原則については既にコラム 1.3で学んだので、この手の冗長なスタイル指定を目にしたプログラマーはお尻がムズムズして落ち着かなくなるはずです。このかゆみを癒やすには、重複を解消するに限ります。これから行う、コードの機能を変えずに形式を整える作業は「リファクタリング（refactoring）」と呼ばれます。言い換えると、このセクションをリファクタリングしてもブラウザ表示は変わらないはずです（し、変わってはいけません）。

コードをきれいにするために、 1.2で登場した内部スタイルシートを使うことにします。内部スタイルシートを実装するには、styleという新しいタグ（リスト 1.7）が必要です。このstyleブロックにはすべてのスタイル宣言を置きますが、styleタグはレンダリングされたページ上に表示されない仕様なので、ユーザーのブラウザ画面には表示されません。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>

    </style>
  </head>
  .
  .
  .

styleブロックは、実はページのどこに置いても同じなのですが、慣例上はページのheadタグの内側が定位置です（本当はCSSスタイル指定は外部ファイルに置くのがベストプラクティスですが、これについては 5.5で行います）。

それではリスト 1.6の冗長な繰り返しを消し去りましょう。リスト 1.8のように最初のCSS宣言を追加します¹⁸。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  .
  .
  .

図 1.16は、リスト 1.8のCSSスタイル指定を例に構文を示したものです。この構文で、山かっこ「{}」の外にあるdivの部分は「セレクタ（selector）」と呼ばれます。ここではHTMLのdiv要素だけがセレクタの対象になります。山かっこの内側には「宣言（declaration）」が1個あり、宣言の冒頭にあるborderは「プロパティ（property）」、プロパティの後ろはコロン:で区切られ、その後ろの1px solid blackはプロパティの「値（value）」です。そして宣言の末尾にはセミコロン;が置かれます。

これらの用語を適当に使う不注意な人をちょくちょく見かけます（セレクタを指して宣言と呼ぶなど）。皆さんは用語を正確に使ってくださいね。

図 1.16: ジュリエット「名前なんか何だっていいじゃないの」

リスト 1.8のコードのインデントにはスペース文字が使われていますが、CSSもまた、HTMLと同様にホワイトスペース（スペース文字や改行やタブの総称）ブラウザでは無視されます。しかしインデントがある方が人間にとって読みやすいので、常にインデントを整えておくのはよい習慣です（コラム 1.7）。

  div {border: 1px solid black}

  button {
    background-color: gray;
    border: 1px solid black;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: "proxima-nova", "Proxima Nova",
                 sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.15em;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.1s linear;
  }

  button { background-color: gray; border: 1px solid
  black; color: white; cursor: pointer; display:
  inline-block; font-family: "proxima-nova",
  "Proxima Nova",
  sans-serif; font-size: 12px; font-weight: bold;
  letter-spacing: 0.15em; padding: 10px 15px;
  text-decoration: none; text-transform: uppercase;
  transition: all 0.1s linear}

さて、リスト 1.8のCSSを追加したら、4つのdivタグにあるstyle="border: 1px solid black;"属性をすべて削除します。削除後のコードはリスト1.9のようになるはずです。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
  </body>
</html>

変更結果を保存して、ブラウザ表示を更新すると…ジャジャーン！期待どおり表示は元のままです。もし表示が変わってしまった場合は、ここまでの作業を再確認してみてください。

さて、ここでは何が変わったのでしょうか？htmlのbodyの中にあるすべてのdivタグに対して、「幅1ピクセルの黒いsolidボーダー」を適用するようブラウザに指示するのに必要なCSSスタイルを、リスト 1.8で追加したこの宣言1個だけで指定できるのです（ピクセルについて詳しくは 3.3で扱います）。これによって、ページの見た目をまったく変えずに、コードをシンプルにできました。

何度も繰り返されているインライン方式のスタイル指定を1個のCSS宣言にまとめる方法がこれでわかったので、今度は同じことをliタグでもやってみましょう。リンクの色を赤くする指定をliタグから消し去るのです。変更後のサンプルページのコードはリスト 1.10のようになるはずです。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      a {
        color: red;
      }
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
  </body>
</html>

今度も、ブラウザ表示を更新したときに何も変わらないはずです。

ここまでの作業で、冗長な「インライン方式」のスタイルを頑張って消し去ったという大きな進捗が得られました。しかし下半分の緑色のリンク文字は、まだスタイル指定がインライン方式のままです。後に 1.5で学ぶ「CSSクラス」を使うのもひとつの手ですが、まずは通常のCSSセレクタだけでやれるかどうか試してみましょう。

下半分のリンクはdivタグの内側にありますが、先ほどリファクタリングした上半分のリンクはそうなっていません。こんなときは、CSS継承のネストを利用して、divタグの内側にあるリンクの色だけを変更するスタイルを定義します。これを行うには、リスト 1.11の定義をstyleブロックに追加してから、ページ下半分のリンクからインライン方式のスタイルを削除します。

div a {
  color: green;
}

追加後のテストページの完全なコードはリスト 1.12のようになるはずです。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      a {
        color: red;
      }
      div {
        border: 1px solid black;
      }
      div a {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
  </body>
</html>

最初よりもコードが随分すっきりしたと思いませんか？このようにコンテンツからスタイル指定を切り離すと、コードがうんと読みやすくなります。しかし勘のいい人は、ここで使った「対象を限定したスタイル指定」方法には問題があることにお気づきかもしれません。

つまりこういうことです。さしあたって今は問題は起きていなくても、今後このページにdivを追加したときに、たまたまその内側にリンクがあったら、意図に反してそのリンク文字まで緑色になってしまいます。つまり、ここで使ったdiv aというセレクタが大雑把すぎるのです。この問題については、この後の 1.5でCSSのidとクラスを使って、より詳細度の高いピンポイントのスタイル指定を追加する方法を扱う予定です。

1.5 CSSセレクタ

『HTML編』を学んだ後、本チュートリアルをここまで進める間に学んだのは、今のところスタイル指定の対象を絞り込む基本的な方法だけでした。『HTML編』では、「要素を直接指定して」スタイルを追加する方法を学びましたが、実はこのように要素の種類を直接指定するナイーブな方法は効率が悪く、ちょっとしたことでスタイル指定が壊れてしまいます。本チュートリアルでは、これまでCSSをコンテンツから切り離して内部スタイルシートに配置する方法を用いましたが、divやaといった大雑把なセレクタしか使われていません。このような大雑把なセレクタを使うと、当たり前ですがそのページ内にあるすべての同じ要素に一律に効いてしまうことが問題なのです。では、同じ要素すべてではなく「特定の要素」だけを狙い撃ちにしてスタイルを指定するにはどうすればよいでしょうか？

その方法は大きく2とおりに分かれます。

ひとつは「id（identification: 識別子）」セレクタを用いることで、ページ内の要素をたった1つだけ指定する方法です¹⁹。

もうひとつは、「クラス（class）」セレクタを用いて、さまざまな要素をまとめて狙い撃ちする方法です。今度は、サンプルページのHTMLに後者の方法で要素指定を追加してみましょう。

idやクラスは、いずれも要素の「開始タグ」にのみ記述することにご注意ください（つまり閉じタグにはidやクラスを書きません）。また、idとクラスの書式は常に同じであることにもご注意ください。以下は、divタグにidとクラスを具体的に書いた例です。

<div id="foo" class="bar">
  .
  .
  .
</div>

idもクラスも、「キー」と「値」の組み合わせ、いわゆる「キーバリューペア」の書式で書かれていることがわかります。各キーの値は文字列（つまり引用符で囲まれる）であり、「id」や「クラス名」を表すラベルとして使われます。この場合、idというキーの値は"foo"、classというキーの値は"bar"になります。

訳注: クラスの名前については「クラス名」と表記しますが、idはそれ自体が固有の名前なので、本チュートリアルでは「id名」とは表記せず単にidと表記しています（実際にはよく使われています）。

CSSは、idやクラス名の指定によって非常に大きな柔軟性を提供していますが、idやクラス名には以下のような機能上の制限や望ましい利用法がいくつかあります。

• 制約: ひとつの要素にはidを1個しか使えません（同じ要素にidが複数あると動作が保証されなくなります）。
• 制約: 名前の冒頭には数字を置けません（name1は有効ですが、1nameは無効であり、無視されてしまいます）。
• オプション: 名前には「ダッシュ（-」「アンダースコア（_）」を使うこともできます（つまりfoo-bar-bazやfoo_bar_baz、そしてFooBarBazのようなキャメルケースも使えます）²⁰。
• 制約: idにはスペース文字を含められません。また、複数のクラス名を指定するときはスペース文字で区切ります（つまりid="foo bar"は無効ですが、class="foo bar baz"のように1つの要素で複数のクラスをスペース区切りで指定するのは有効です）²¹。
• 原則: 命名法は1つのプロジェクト内で統一すること（つまりダッシュ記号を区切りに使うと決めたら、そのプロジェクト内ではすべてそれに統一し、アンダースコア文字を混ぜるなどの不統一は避ける²²。

上述のようにダッシュ記号を実際に名前で使えることを確認するために、サンプルページにidやクラスをいくつか追加してみましょう。h2の直後にある最初のdiv開始タグにだけid="exec-bio"を追加し、そのセクションにあるdivには（最初のdivも含めて）すべてclass="bio-box"を追加します（リスト 1.13）。

<!DOCTYPE html>
<html>
  .
  .
  .
  <body>
    .
    .
    .
    <h2>I'm an h2</h2>
    <div id="exec-bio" class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
  </body>
</html>

（このようなクラスの使い方はCSSにおける定番の良い手法ですが、idをこのような形で使うのは一般にはおすすめできません。ここで追加したidはあくまで動作をデモすることが目的です。これについては後に 2.2で詳しく解説します）

次にCSSブロックを更新し、今追加したidを新しいセレクタとして指定します。CSSでidを指定するには、セレクタでidの前に「番号記号（#）」を置きます。CSSでクラスを指定するときは、セレクタでクラス名の前に「ドット（kode.）」を置きます。たとえば、#exec-bioというidを持つ要素の背景色を変更するには、以下のようなCSSスタイル指定を使えます²³。

#exec-bio {
  background-color: lightgray;
}

（なお、このlightgrayという値は文字どおり「明るい灰色」を表します²⁴。これはCSSの「色名（color name）」の例です。色名について詳しくは後に 3.1で扱います）同様に.bio-boxクラスへの指定も追加すると²⁵、以下のようなCSSになります。

.bio-box {
  border: 1px solid black;
}

この後確認しますが、上のCSSはリスト 1.9で追加した細くて黒いボーダーのスタイルを変えずにそのまま維持しています。しかし、このサイトのすべてのdivタグにスタイルが無条件に適用されるのではなく、class="bio-box"を持つdivタグにだけ適用されます。

最後に、クラス名とタグ名を以下の.bio-box aのように組み合わせると、「.bio-boxの内側にあるaタグだけ」を狙い撃ちしてスタイルを指定できます。

.bio-box a {
  color: green;
}

上のCSSはaタグのリンク文字を緑色に変えますが、緑色に変わるのは"bio-box"クラスを持つ要素の内側にある場合に限られます。このように、「基本的にクラスを使って要素を指定するアプローチ」の方が、リスト 1.11のときのような「クラスを使わずにタグ名だけを指定する大雑把なアプローチ」よりもずっときめ細かく制御できるようになります。

以上3つのスタイル指定をstyleブロックに追加し、不要になったスタイル指定を削除すると、リスト 1.14のようなマークアップになります。

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      a {
        color: red;
      }
      #exec-bio {
        background-color: lightgray;
      }
      .bio-box {
        border: 1px solid black;
      }
      .bio-box a {
        color: green;
      }
    </style>
  </head>
  <body>
    .
    .
    .
    <h2>I'm an h2</h2>
    <div id="exec-bio" class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
  </body>
</html>

変更結果を保存してブラウザ表示を更新すると、画面の下半分にあるボーダーはこれまでとまったく同じですが、下半分の最初のリンクだけ明るい灰色の背景色が追加されているはずです（図 1.17）。

図 1.17: クラスやidでスタイルを指定された要素

おめでとうございます！ここまでに、idやクラスを用いて特定の要素だけを狙い撃ちでスタイル指定する方法を学び、CSSの基礎知識もレベルアップしました。CSSの宣言を記述する方法やidやクラスの使い方を会得したので、次からはいよいよCSSのしくみの核心部分を解説します。