スタイルシートを書く
このチャプターでは、スタイルシートを書くにあたり事前に知っておくとよい情報などについて解説しています。
スタイルシートとは
スタイルシートとは、HTMLやXMLといった構造化文書などの表示を制御するしくみのことです。
スタイルシートと同義で扱われることの多いCSSは正式名称を「Cascading Style Sheets（カスケーディング・スタイル・シーツ）」といい、主にWebサイトを構成するHTML文書やXML文書のスタイリングに利用されます。CSSは構造化文書の見た目を記述する「スタイルシート言語」のうちのひとつで、これはコンピュータ言語でもあり、そういう意味ではJavaScriptやPHPなどと同じプログラミング言語と言えるかもしれません。
厳密にはスタイルシートとCSSは必ずしもイコールではないですが、当コンテンツでは同じものとして扱います。
HTML文書にCSSを反映させる方法
HTML文書にCSSを反映する方法としては3つあります。サイト制作時にもっとも推奨されている方法としては、最初に紹介する「外部ファイルとしてHTML文書内で読み込む」方法です。
1. 外部ファイルとしてHTML文書内で読み込む
HTML文書とは別で用意したCSSファイル（拡張子は.css）をHTML文書内で読み込んでスタイルを反映します。
CSSファイルの文字コードはutf-8を使用します。
<head>
<link rel="stylesheet" href="[CSSファイルのパス]">
</head>
この方式は現在もっとも一般的なCSSの反映方法であり、推奨されている方法です。この記述はbody要素内にも記述できますが、通常はhead要素内に記述します。
CSSファイルは複数読み込みが可能です。この場合、読み込むCSSファイルの数だけlinkを記述します。それぞれのCSSファイル内に同じ記述がある場合、あとから読み込まれたものが優先（上書き）されます。
CSSファイルパスは、CSSファイルを読み込むHTMLファイルから見た相対パスのほか、https://からはじまる絶対パス、サイトのドキュメントルート（public_htmlなど）である/からはじまるルートパスでも指定できますが、いったんローカルのPC上で作業するのであれば、相対パスでの記述をおすすめします。
この記述方式はレイアウトの修正をする際、HTML文書の構造や付与したclass属性値に変更がなければ、CSSファイルを更新するのみで修正が可能です。
このハンズオンでは、この方法でCSSファイルを読み込み・反映しています（1. HTML文書の基本構造をつくるで実装済み）
なお、link要素にmedia属性を付与することで、後述する「メディアクエリ」と同じ指定することが可能です。以下のように「プリント時に追加でCSSを読み込む」という指定が可能です。
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./print.css" media="print">
media属性の値としてはall screen printのほか、後述するscreen and (...)も指定できるので、スマホ表示とPC表示で読み込むCSSを変えるということも可能です。media属性の記述は省略するとallが初期値となります。通常のWebサイトでは省略する形で問題ありません。
2. style要素で記述する
HTML文書内にstyle要素を記述して、スタイルを反映します。
この方式は、静的サイトジェネレーター（SSG）と呼ばれるツールにおいて、よく利用されています。
<style>
p {
color: red;
}
</style>
<p>赤色です。</p>
styleタグもbody要素内に記述できますが、通常はhead要素内に記述します。
この記述方式はCSSファイルを別途用意するほどのものではない簡易なHTML文書やテストページにおいて、HTML文書内で完結するという意味では手軽で有用です。
3. HTMLタグにstyle属性で記述する
HTML文書内のHTMLタグにstyle属性の値として、直接スタイルを反映します。「インラインスタイル」とも呼ばれます。
この方式は、たとえばJavaScriptやPHPのプログラム側でスタイルをあてる場合に、プログラムの処理で付与されます。
<p style="color: red;">赤色です。</p>
style属性はグローバル属性と呼ばれるもので、すべてのHTML要素に対して指定することが可能です。
この記述方式はスタイルの反映をテストしたいときやデバッグ時には有用です。
CSSの記述方法
CSSは基本的に以下の型で記述します。半角英数字で記述します。
セレクタ {
プロパティ: 値;
}
「セレクタ」はCSSを反映させる対象です。HTML要素やHTML要素に付与したclass属性の値が該当します。{}は「宣言ブロック」といい、この宣言ブロックで囲まれた内容がセレクタにスタイルとして反映されます。
「プロパティ: 値;」の部分をまとめて「宣言」といいます。「プロパティ（特性）」と「値」の間は「コロン（:）」を挟み、宣言の終わりは「セミコロン（;）を入れます。セミコロンを入れることにより、宣言ブロック内で複数の宣言を記述することが可能です。
なお、セレクタと宣言ブロック、プロパティと値の間の半角スペースは入れても入れなくなも挙動に違いはありません。半角スペースを入れておくと、より読みやすいコードになるのでおすすめです。
p {
color: red;
}
.text_color {
color: red;
}
上記では、pや.text_colorが「セレクタ」、colorが「プロパティ（特性）」、#fooが「値」になります。.text_colorはHTML文書のHTMLタグにclass="text_color"と属性値を付与した場合の書き方です。class属性の値をセレクタとする場合は、先頭に「ドット（.）」をつけます。
なお、セレクタの指定方法として以下に代表される指定方法もありますが、ここでは詳細説明を割愛し、ハンズオンの中で必要になったタイミングで随時解説します。
- 属性セレクタ（
a[title]/title属性が付与されたa要素に反映する） - 直下セレクタ（
div > p/div要素直下のp要素に反映する） - 隣接セレクタ（
div + p/div要素に続く（隣りの）p要素に反映する） - 擬似クラス（
:hoverや:first-childなど） - 擬似要素（
::beforeや::afterなど）
セレクタのネスト
CSSのセレクタは、以下のようにネストした記述が可能です。
p {
color: blue;
}
div p {
color: red;
}
ネストはいくつも可能ですが、階層を深くしすぎると読みづらくなるので、ほどほどにしておくのがよいです。
上記では、基本的にp要素は青字で表示されますが、div要素内のp要素は赤字で表示されます。
複数のセレクタに同じスタイルをあてる
同じスタイルを複数のセレクタに反映させるには、セレクタを「カンマ（,）」で区切って指定します。
a:hover,
a.active {
color: red;
}
上記では、リンク（a要素）にマウスをあてたときとa要素にclass="active"属性値が付与されているときに赤字となります。
カンマ区切りのセレクタは、カンマで改行しても1行で続けて書いてもどちらも挙動は同じです。
ちなみに、a.activeのようにHTML要素とそのclass属性値をセットで記述すると、「その属性値が付与されている該当のHTML要素」にのみスタイルがあたります。上記の場合は「class="active"が付与されたa要素」のみ赤字となり、ほかのa要素やclass="active"が付与されたdiv要素などは赤字になりません。
なお、CSSの記述に関しては、以下のように宣言ブロック内で入れ子にして記述する方法もあります。
div {
margin: 3em;
p {
color: red;
}
}
上記は以下の記述と同等です。
div {
margin: 3em;
}
div p {
color: red;
}
このハンズオンでは主にはじめてHTML/CSSでサイトをつくる方を対象としているため、入れ子形式ではない従来の形式でCSSを記述しています。
CSSの優先順位
HTML文書やCSSは、基本的に1行目から順番に情報が読み取られ反映されていきます。そのため、基本的にはあとに記述されたもの（あとに読み込まれたもの）が優先して反映されます。
以下はどちらも同じp要素にあてられたスタイルですが、ブラウザに表示される際はあとに記述されたcolor: blue;が反映されます。
p {
color: red;
}
p {
color: blue;
}
ただし、以下のようにセレクタがネストや属性値をともなっている場合は、そちらが優先されます。この場合、記述の順番は関係ありません。
p {
color: red;
}
div p {
color: red;
}
p {
color: blue;
}
「CSSを記述したけど反映されない」という場合は、書き間違いのほかこの優先順位も確認してみてください。
CSSの優先順位についてもいろいろありますが、ハンズオンの中で必要になったタイミングで随時解説します。
CSSの継承について
文字色（color）やフォントサイズ（font-size）や行間の指定（line-height）など、とくに文字周りの宣言（すべてではないです）は子要素にもその情報が受け継がれます。継承されるのは一部のプロパティで、marginやpaddingといった余白を指定するもの、backgroundなど背景を指定するものなどは継承されません。
以下のHTML文書とCSSを例に挙げます。body要素にあてられた文字色やフォントサイズの情報は、body要素（親）が内包するHTML要素（子）にもそのまま引き継がれます。ただし、親要素と子要素に同じプロパティの宣言がある場合は、子要素の記述が優先されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!--（略）-->
</head>
<body>
<p>テキスト</p>
<div class="box">
<p>テキスト</p>
</div>
</body>
</html>
body {
color: #000;
font-size: 1rem;
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
line-height: 1.8;
background-color: #fff;
}
.box p {
color: red;
}
body要素には以下の指定をしています。
- 文字色（
color） - フォントサイズ（
font-size） - フォントファミリー（
font-family） - 行間（
line-height） - 背景色（
background-color）
この指定のうち、body要素の直下にあるHTML要素には、背景色以外のCSSが継承されます。テキストは黒色で表示されますが、div要素の内側にあるp要素にはcolor: red;の指定がされているため、bodyから継承されたCSSのうち、文字色だけが赤色になります。
先の項目で解説したCSSの優先度やこの継承は、CSSを学びはじめの頃はなかなか難しい概念かと思います。CSSの特徴でもあるのでこの項目でも解説していますが、CSSを書いているうちになんとなく理解できるようになっていくので、学びはじめの頃に無理をして覚える必要はなく、頭の片隅に置いておく程度で大丈夫です。
レスポンシブ対応について
デバイスの画面サイズ（ブラウザの表示幅）に応じて表示レイアウトを調整・最適化する手法のことを「レスポンシブ対応」といいます。「スマホ（タブレット端末）対応」は「レスポンシブ対応」のひとつであり、「レスポンシブデザイン」は「レスポンシブ対応したデザイン」のことを指します。
デバイスサイズに対応したデザインの調整は、CSSで以下のように記述します。「メディアクエリ」と呼ばれる手法です。
@media screen and (max-width: 799px) {
/* 表示幅の横幅サイズが799px以下の場合 */
p {
color: red;
}
}
@media screen and (min-width: 800px) {
/* 表示幅の横幅サイズが800px以上の場合 */
p {
color: blue;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
/* 表示幅の横幅サイズが768px以上1024px以下の場合 */
p {
color: green;
}
}
上記はデバイスの横幅サイズによりp要素の文字色がそれぞれ変化します。メディアクエリを使用することにより、たとえば「スマホでは縦積み、PCでは横並びのレイアウト表示」が可能になります。
(...)の部分はデバイスサイズを指定しますが、書き方はいろいろあり、単位もpxに限りません。ただ、WebサイトのCSS記述では上記のように記述することが多いです。詳細は参考情報もご覧ください。
本ハンズオンでもすこしだけメディアクエリを使用した記述を行います。
なお、CSSに/* */で書かれた部分はコメントになります。この記述部分はCSSの反映には影響を与えません。コメントは日本語の表記も可能です。
ブラウザのデフォルトスタイル
Google ChromeやMicrosoft Edge、SafariやFirefoxなどに代表されるブラウザは、それぞれ「デフォルトCSS」を用意しています。先のチャプターで書いたHTML文書をブラウザで表示すると、CSSはまだ書いていないにもかかわらず、すでに見出し要素が大文字で表示されていたり、文字と文字の行間が空いていたり、リスト項目の先頭にマークがついているのが確認できますが、これはブラウザが用意しているデフォルトのCSSをHTML文書に反映しているためです。デフォルトCSSにより、HTML文書だけでも整形されて読みやすくなります。
このデフォルトCSSはブラウザごとに内容が異なっており、たとえばGoogle Chromeなどではフォントはゴシック体（Sans Serif）がデフォルトの表示ですが、Safariでは明朝体（Serif）で表示されます。
CSSを記述する際は、このデフォルトCSSを最初にリセット（CSSで上書き）するなどします。このリセットCSSの記述に特に決まりはありませんが、検索するとさまざまな種類のリセットCSSやそれに類するCSSが配布されています。
もちろん、これらを利用せず自分でリセットCSSを書くこともできます。本ハンズオンでは、自分でリセットCSSを記述します。
HTML要素のボックス領域
最後に、HTML要素のボックス領域について解説します。
HTML要素には外側と内側が存在し、ボーダーで境界が分かれています。ほぼすべてのHTML要素は、この3つの領域を保持しています。
ボーダー（border）の内側をパディング領域（padding）、外側をマージン領域（margin）といい、これらはCSSのプロパティにも割り当てられています（詳細は次のチャプター以降で解説しますが、上側だけ、左右だけといった指定も可能です）
なお、すべてのHTML要素は「ブロックレベルコンテンツ（要素）」と「インラインレベルコンテンツ（要素）」のどちらかに属しています。ブロックレベルコンテンツは、初期状態では縦積みで配置される要素、インラインレベルコンテンツは初期状態では横に並べて配置される要素で、たとえばdiv要素やp要素はブロックレベルコンテンツ、a要素やimg要素はインラインレベルコンテンツにそれぞれ属しています。
これ自体をしっかりと覚える必要はないですが、CSSを記述するにあたりよく出てくる概念なので、なんとなく頭の片隅に置いておくとよいかと思います。
おわりに
説明が長くなってしまいましたが、CSSを記述するにあたり知っておくとよいことは以上です。おつかれさまでした。ここで解説した内容はCSSを書くうちにそのうち理解できるようになるので、いま無理をして覚える必要はありません。
次のチャプターからはいよいよCSSを書いていきます。
参考情報など
このチャプターで解説した内容について、詳細を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントなどもご覧ください。
- スタイルシート - Wikipedia
- <style>: スタイル情報要素 - HTML | MDN
- CSS によるスタイル設定の基本 - ウェブ開発の学習 | MDN
- メディアクエリーの基本 - ウェブ開発の学習 | MDN
- コメント - CSS: カスケーディングスタイルシート | MDN
- 継承 - CSS: カスケーディングスタイルシート | MDN
- Block-level content (ブロックレベルコンテンツ) - MDN Web Docs 用語集 | MDN
- Inline-level content (インラインレベルコンテンツ) - MDN Web Docs 用語集 | MDN