3. スタイルシートを書く

このチャプターでは、スタイルシートとは何か、またスタイルシートを書くにあたり事前に知っておくとよい情報などについて解説しています。

スタイルシートとは

スタイルシートの本来の意味としては、HTMLやXMLといった構造化文書などの表示を制御するしくみのことを指します。

スタイルシートと同義で扱われることの多い「CSS」は、正式名称を「Cascading Style Sheets（カスケーディング・スタイル・シーツ）」といい、主にウェブサイトを構成するHTML文書やXML文書のスタイリングに利用されます。

CSSは構造化文書の見た目を記述する「スタイルシート言語」のうちのひとつで、コンピュータ言語のひとつでもあります。そういう意味では、CSSはJavaScriptやPHPなどと同じプログラミング言語と言えるかもしれません。

厳密にはスタイルシートとCSSは必ずしもイコールではないですが、当コンテンツでは同じものとして扱います。また、これ以降は「CSS」と記載します。

HTML文書にCSSを反映させる方法

HTML文書にCSSを反映する方法としては、主に3つ方法があります。そのうちサイト制作においては、最初に紹介する「外部ファイルとしてHTML文書内で読み込む」方法がもっとも推奨されている方法です。

1. 外部ファイルとしてHTML文書内で読み込む

HTML文書とは別で用意したCSSファイル（拡張子は.css）をHTML文書内で読み込んでスタイルを反映します。

CSSファイルの文字コードは、HTML文書と同じ文字コードを使用します。現在ではutf-8を使用することが一般的です。

<head>
  <link rel="stylesheet" href="[CSSファイルのパス]">
</head>

この方式は現在もっとも一般的なCSSの反映方法であり、推奨されている方法です。CSSファイルは通常HTML文書のhead要素内で読み込まれることが一般的ですが、状況によりbody要素内で読み込まれる場合もあります。やむを得ない場合を除き、基本的にはhead内での読み込みを推奨します。

また、CSSファイルは複数読み込みが可能です。この場合、読み込むCSSファイルの数だけlinkを記述します。それぞれのCSSファイル内に同じ記述がある場合、あとから読み込まれたものが優先（前に読み込んだCSSに追加や上書き）されます。

<head>
  <link rel="stylesheet" href="./css/style_base.css">
  <link rel="stylesheet" href="./css/style_common.css">
  <link rel="stylesheet" href="./css/home.css">
</head>

CSSのファイルパスはこれまでのチャプターでも取り上げた画像やリンクの記述同様、CSSファイルを読み込むHTML文書ファイルから見た相対パスのほか、https://からはじまる絶対パス、サイトのドキュメントルート（public_htmlなど）である/からはじまるルートパスで指定します。

ローカルPC上での作業時は、CSSファイルに限らず相対パスでの記述を推奨します。この記述方式はレイアウトの変更や修正をする際、「現在表示しているHTML文書の置いてある場所を起点に」指定したファイルのパスをつなげるため、ローカル上・サーバー上関係なくファイルを読み込むことが可能です。

ちなみに、絶対パスはCDN（Contents Delivery Network）など外部のライブラリファイルなどを読み込む際に、またルートパスはプログラムで動くページで利用されていることが多いです。

なお、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が初期値となります。通常のウェブサイトでは、省略する形で問題ありません。

2. style要素で記述する

HTML文書内にstyle要素を記述して、スタイルを反映します。静的サイトジェネレーター（SSG）と呼ばれるツールにおいて、よく利用されています。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

<p>赤色です。</p>

style要素もbody要素内に記述できますが、通常はhead要素内に記述します。

この記述方式はCSSファイルを別途用意するほどのものではない簡易なHTML文書やテストページにおいて、HTML文書内（HTML文書ファイルひとつ）で完結できるという意味では、お手軽で有用です。

3. HTMLタグに`style`属性で記述する

HTML文書内のHTML要素にstyle属性の値として、直接CSSを記述する方法で、「インラインスタイル」とも呼ばれます。たとえば、JavaScriptやPHPなどのプログラム側でスタイルをあてる処理を行った際が、該当のHTML要素にstyle属性値が付与されます。

<p style="color: red;">赤色です。</p>

style属性はグローバル属性と呼ばれるもので、すべてのHTML要素に対して指定することが可能です。

この記述方式はプログラム側でスタイルをあてる処理のほか、デバッグや確認目的で「とりあえずスタイルの反映を確認したい」という場合に有用です。

ブラウザのデフォルトスタイル

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の記述方法

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でスタイルをあてることのできるボックス）を追加する）

セレクタのネスト

CSSのセレクタは、以下のようにネストした記述が可能です。

p {
  color: blue;
}

div p {
  color: red;
}

上記の例では、基本的にp要素は青字で表示されますが、div要素内のp要素は赤字で表示されます。

ネストはいくつも可能ですが、階層を深くしすぎると読みづらくなるので、HTML要素にclass属性を付与するなどして、可能な限りネストが深くならないようなHTMLマークアップを推奨します。

複数のセレクタに同じスタイルをあてる

同じスタイルを複数のセレクタに反映させるには、セレクタを「カンマ（,）」で区切って指定します。

a:hover,
a.active {
  color: red;
}

上記では、リンク（a要素）にマウスをあてたときとa要素にclass="active"属性値が付与されているときに赤字となります。

カンマ区切りのセレクタは、カンマで改行しても1行で続けて書いてもどちらも挙動は同じです。

/* 以下はいずれも動作は同じ */
a:hover,
a.active {
  color: red;
}

a:hover, a.active {
  color: red;
}

ちなみに、a.activeのようにHTML要素とそのclass属性値をセットで記述すると、「その属性値が付与されている該当のHTML要素にのみ」スタイルがあたります。上記の場合は「class="active"属性地が付与されたa要素」のみ赤字となり、ほかのa要素やclass="active"が付与されたほかのHTML要素（たとえば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;
}

上記の例では、div要素内のp要素は、青字ではなく赤字で表示されます。

CSSはセレクタがネストされている場合や、先述の属性セレクタなどが付与されているものの優先度が高くなります。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のうち、文字色だけが赤色になります。

なお、背景色（background-color）の宣言は子要素には引き継がれません。

先の項目で解説したCSSの優先度やこの継承は、CSSを学びはじめの頃はなかなか難しい概念かと思います。CSSを記述する上で重要な要素であり特徴でもありますが、CSSを書いているうちになんとなく理解できるようになっていくので、学びはじめの頃に無理をして覚える必要はなく、最初のうちは頭の片隅に置いておく程度で大丈夫です。

CSSで利用できる単位について

CSSでは、値に指定できる単位がいくつかあります。以下はウェブサイトにおいて主に利用される代表的な単位です。

px：ピクセル単位
%：他の要素に対する割合値
em：親要素のフォントサイズを基準とした単位（1emは親要素のフォントサイズに相当）
rem：ルート要素（html要素）のフォントサイズを基準とした単位（root em / 1remは16pxに相当）
vw：横のビューポート（幅）を基準とした単位
vh：縦のビューポート（高さ）を基準とした単位

昨今はデバイスサイズの多様化などにともない、単に数値と単位でサイズを指定するのではなく、場合によってはcalc()という関数を用いて細かくサイズを計算することもありますが、基本的には上記の単位を利用して指定するのが一般的です。

レスポンシブ対応について

デバイスの画面サイズやブラウザの表示幅に応じて表示レイアウトを調整・最適化する手法のことを「レスポンシブ対応」といいます。「ウェブサイトのスマホ（タブレット端末）対応」は「レスポンシブ対応」のひとつであり、「レスポンシブデザイン」は「レスポンシブ対応したデザイン」のことを指します。

デバイスサイズに対応したデザインの調整は、CSSで以下のように記述します。@mediaからはじめるこの記述方法は、「メディアクエリ」と呼ばれる手法です。

@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では横並びのレイアウト表示」が可能になります。

(max-width: 799px)や(min-width: 800px)など、(...)の部分はデバイスサイズを指定しますが、書き方はいろいろあり、単位もpxに限りません。とはいえ、ウェブサイトのCSS記述では上記のようにmax-width（最大幅）やmin-width（最小幅）、px単位で記述することが一般的です。詳細は参考情報もご覧ください。

本ハンズオンでも、すこしだけメディアクエリを使用した記述を行います。

なお、CSSの記述で/* */と書かれた部分はコメントになります。この記述部分はCSSの反映には影響を与えません。コメントは日本語の表記も可能です。

HTML要素のボックス領域

最後に、HTML要素のボックス領域について解説します。

HTML要素には外側と内側が存在し、ボーダーで境界が分かれています。ほぼすべてのHTML要素は、この3つの領域を保持しています。

ボーダー（border）の内側をパディング領域（padding）、外側をマージン領域（margin）といい、これらはCSSのプロパティにも割り当てられています（詳細は次のチャプター以降で解説します）

なお、すべてのHTML要素は「ブロックレベルコンテンツ（ブロック要素）」と「インラインレベルコンテンツ（インライン要素）」のどちらかに属しています。ブロックレベルコンテンツは、初期状態では縦積みで配置される要素、インラインレベルコンテンツは初期状態では横に並べて配置される要素で、たとえばdiv要素やp要素はブロックレベルコンテンツ、a要素やimg要素はインラインレベルコンテンツにそれぞれ属しています。

これ自体をしっかりと覚える必要はないですが、CSSを記述するにあたりよく出てくる概念なので、なんとなく頭の片隅に置いておくとよいかと思います。

おわりに

説明が長くなってしまいましたが、CSSを記述するにあたり最低限知っておくとよいことは以上です。おつかれさまでした。ここで解説した内容はCSSを書くうちに自然と理解できるようになるので、いま無理をして覚える必要はありません。

次のチャプターからはいよいよCSSを書いていきます。

参考情報など

このチャプターで解説した内容について、詳細を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントなどもご覧ください。

CSSネストのブラウザ対応状況については、以下のサイトもご参考ください。

CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc

3. スタイルシートを書く

3. スタイルシートを書く

スタイルシートとは

HTML文書にCSSを反映させる方法

1. 外部ファイルとしてHTML文書内で読み込む

2. style要素で記述する

3. HTMLタグに`style`属性で記述する

ブラウザのデフォルトスタイル

CSSの記述方法

セレクタのネスト

複数のセレクタに同じスタイルをあてる

CSSの優先順位

CSSの継承について

CSSで利用できる単位について

レスポンシブ対応について

HTML要素のボックス領域

おわりに

参考情報など

results matching ""

No results matching ""

3. スタイルシートを書く

スタイルシートとは

HTML文書にCSSを反映させる方法

1. 外部ファイルとしてHTML文書内で読み込む

2. style要素で記述する

3. HTMLタグにstyle属性で記述する

ブラウザのデフォルトスタイル

CSSの記述方法

セレクタのネスト

複数のセレクタに同じスタイルをあてる

CSSの優先順位

CSSの継承について

CSSで利用できる単位について

レスポンシブ対応について

HTML要素のボックス領域

おわりに

参考情報など

results matching ""

No results matching ""

3. HTMLタグに`style`属性で記述する