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>リンク1</li></a>
<a href="#"><li>リンク2</li></a>
<a href="#"><li>リンク3</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コードは次の3つの箇所で記述することができます。
- インラインスタイル
- 内部スタイルシート
- 外部スタイルシート
インラインスタイル
インラインスタイルは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の記述方法をそれぞれ試してみましょう!