もくじ
CSSとは
CSS（Cascading Style Sheets: シー・エス・エス）はWebページを装飾するために使用します。
具体的には、Webページの骨組みであるHTMLの各要素（aやp、imgなど）の色付けや大きさの指定、表示位置などのレイアウトを行います。
例えば、body要素に次の要素が記述されたHTMLを見てみましょう。
<header>
<div>
<img src="https://picsum.photos/200" alt="ランダムで表示される画像">
</div>
<nav>
<ul>
<a href="#"><li>リンク１</li></a>
<a href="#"><li>リンク２</li></a>
<a href="#"><li>リンク３</li></a>
</ul>
</nav>
</header>
<main>
メインコンテンツエリア
</main>
これをブラウザに表示すると次のような結果になります。
これをCSSを使用して装飾してみると次のように表示することができます。
この様に、CSSを使うことでWebページを自由に装飾することができます。
理解度チェック
- CSSにはどんな特徴がありますか？
CSSの書き方
CSSは「セレクタ」と「宣言ブロック」の二つで構成されます。
セレクタ
セレクタは「どの要素」に装飾を行うかを選択する箇所です。
このセレクタの書き方には複数の方法があり、書き方や書く場所によって適用される装飾の優先度が異なります。
宣言ブロック
セレクタで指定した要素の「どの属性にどの値」を設定するかを指定します。
例えば「文字の色を赤色にする」場合は color: red; のように記述します。
（宣言ブロック）属性
CSSの属性（プロパティ: property）には非常に多くの種類があります。
自分の要素を装飾する属性や、子要素の配置を変える属性など多くの種類があります。
どの様な属性があるかについてはCSS Referenceを確認してみてください。
（宣言ブロック）値
属性に設定できる値は属性によって異なります。
また値には複数の書き方がある場合があります。指定できる単位も複数の種類があるので、最初は混乱するかもしれませんが、一つずつ試して理解することが重要です。
-
属性や値には多くの種類があり、すべてを覚えることは難しく効率的ではありません。そのため、それらを検索（逆引き）する能力が最も重要となります。
例として「背景を黒色」にする場合は、「CSS 背景 色変更」などで検索すると属性と値の書き方を得ることができます。
h1要素に装飾する例
h1 {
color: red;
font-size: 24px;
}
この例では、h1要素 の文字色（color）を 赤（red）に、フォントサイズ（font-size）を 24px に装飾するように宣言しています。
セレクタの宣言ブロックは波括弧（{}）で括り、属性 と 値はコロン（:）で繋げます。
また、終端文字にセミコロン（;）が必要です。
書き方として重要なことは、改行とインデント（文頭のスペース）です。
この例のコードは次のように書くこともできます。
h1{color: red;font-size:24px;}
見て分かるとおり、このように書いてしまうとCSSのコードが見づらくなってしまいます。
複数人で開発する場合は特にコードの書き方には気を使う必要があります。
また個人開発であっても、一度書いたコードは将来的に見直す可能性があるため、可読性を意識してコーディングするようにしましょう。
理解度チェック
- CSSのセレクタについて説明してください。
- CSSの宣言ブロックについて説明してください。
- CSSの属性について説明してください。
- CSSの値について説明してください。
- 読みやすいコードを意識して書く必要があるのはなぜですか？
VS Codeの拡張機能
VS Codeを使用してHTMLやCSS、JavaScriptなどを記述する際に便利な拡張機能を紹介します。
拡張機能の使い方や、その他の拡張機能のインストールについてはVS Codeのダウンロードページをご確認ください。
ESLint
この拡張機能をインストールすると、HTML、CSSやJavaScriptのエラーを探索し、波線やメッセージで教えてくれるようになります。
拡張機能: ESLint
Bracket Pair Colorizer 2をインストールしている場合、インストール直後は括弧の色が適用されない場合があります。VS Codeを再起動すれば正常に反映されます。
CSSを書けるところ
CSSコードは次の３つの箇所で記述することができます。
- インラインスタイル
- 内部スタイルシート
- 外部スタイルシート
インラインスタイル
インラインスタイルはHTMLのstyle属性にスタイルを記述します。style属性はHTMLのグローバル属性となっているため、どのタグにも記述できます。
要素そのものに記述するため、CSSのセレクタは不要です。
<h1 style="color: red;font-size: 24px;">PROGRABIでコーディング学習</h1>
このインラインスタイルは使用する際に気をつけなければならないいくつかの注意事項があります。
- 可読性が下がる
style属性に記述されたスタイルは読みづらくなります。改行やインデントで整形した場合でも、他のHTMLの要素と混在してしまうためです。 - 優先度が高い
他の書き方で宣言されたCSSよりも優先度が高くなります。そのため外部からの修正、更新が難しくなります。 - 汎用性がない
その要素にしか適用されないため他の要素で同じスタイルを繰り返し使用することができません。そのためコード量が増えてしまうことがあります。
-
style属性を使用するインラインスタイルはテスト時や試してみる場合に限定して使用することが推奨されています。
内部スタイルシート
HTMLのタグを使用してCSSを記述することができます。
<style>
h1 {
color: red;
font-size: 24px;
}
</style>
この様にstyle要素を使用すれば、開始タグから終了タグの内部でCSSを記述することができます。
またstyle要素の中にCSS以外の言語（HTMLなど）は記述することができません。
head要素で使用されることが多いですが、body要素でも使用することができます。
外部スタイルシート
CSSファイルを作成し、その中にCSSを記述します。HTMLファイル内でCSSファイルを読み込むことでCSSを適用することができます。
h1 {
color: red;
font-size: 24px;
}
<head>
<!-- head要素からCSSを読み込みます -->
<link rel="stylesheet" href="style.css">
</head>
CSSを読み込むためにlink要素を使用します。link要素のrel属性には「どんな内容のファイルを読み込むか」の意味であるリンク種別を指定します。
CSSを読み込む場合はrel="stylesheet"となります。
href属性にはCSSファイルの位置（パス）を設定します。この例のhref="style.css"はindex.htmlと同じ階層にあるstyle.cssを読み込むという意味となります。
CSSの場合は、head要素でもbody要素でもlink要素を使用してCSSファイルを読み込むことができます。
しかし、body要素は画面に表示するための要素を記述する箇所ですので、通常はhead要素で使用されます。
理解度チェック
- CSSのインラインスタイルはどのようなものですか？
- CSSの内部スタイルシートとはどのようなものですか？
- CSSの外部スタイルシートとはどのようなものですか？
- CSSの記述方法をそれぞれ試してみましょう！