CSSとは？HTMLとの違いから記述場所・具体的な書き方まで
Webサイト作りにおいて、CSSはHTMLと同じくらい重要です。CSSは、文字色やフォントサイズを変更したり画像を調整したりと、Webページの見た目を演出するために欠かせません。CSSは、基本を理解しておけばさまざまな視覚効果に幅広く応用できる、便利な方法です。
今回は、CSSの概要やHTMLとの違い、仕組み・記述場所・記述例を解説します。簡単なCSSの書き方も初心者向けに紹介するため、Webサイト作成の技術を高めたい人は、ぜひ参考にしてください。
1.CSS（カスケーディング・スタイルシート）とは？
CSS（カスケーディング・スタイルシート）とは、WebページをWebブラウザから閲覧する際に、視覚的な見やすさを演出するための言語です。HTMLに記述された各要素へ指示を追加することによって、さまざまな装飾を施すことができます。
下記は、CSSで指定できるデザインの代表的な例です。
- 文字色を変える
- フォントサイズを変える
- 文字の位置を指定する
- 背景色を変える
- 画像の表示位置を調整する
- 余白を作る
CSSは、Webページのレイアウトやデザインを調整する役割を果たします。
1-1.CSSとHTMLの違い
HTMLとは、Webページ全体の構造を決める、基本的なマークアップ言語のことです。HTMLは、テキストをタグで囲うことで「見出し」「リンク」といった、「Webページ内における役割情報」を宣言します。
HTMLでもテキストへの装飾は可能なものの、各テキストごとに指示を記述しなければなりません。また、凝ったデザインにしようとすると一つひとつのタグが長くなり、HTMLソースコードが複雑で読みにくくなる欠点があります。
CSSを使用し、デザインに使う分を簡略化することによって、同じ装飾であればまとめて指定でき、さらに多彩な表現が可能となりました。Webページの作成において、HTMLは骨組みを作る役割、CSSは肉付けして飾る役割を果たします。
2.CSSの仕組み｜見栄えを整える上で用いる要素
CSSを効果的に使用するためには、まずCSSの仕様を理解しなければなりません。CSSでは、「セレクタ」「プロパティ」「値」の3要素を用います。
各要素の概要は下記のとおりです。
| セレクタ | 対応するHTMLタグの種類は何か |
|---|---|
| プロパティ | 適用させるデザインの種類は何か |
| 値 | 適用させたデザインをどのくらい（どれに）変えるか |
例えば、見出しの色を青くしたい場合は、「セレクタ」「プロパティ」「値」を下記のように記述します。
- セレクタ
- プロパティ
- 値
- h1
- {
- color
- :
- blue
- ;}
- 見出しの
- 色を
- 青くする
3要素で指示する内容は、「何の」「何を」「どうするか」です。セレクタのタグ名を「h1」から「p」に、値を「blue」から「red」に変更すると、「段落」の色を「赤くする」という指示に変更可能です。
セレクタは、同一のHTMLタグに対してまとめて指示を出せる他、ID名を付けた特定のタグだけに指示を出すことも可能です。また、プロパティと値でワンセットがルールとなり、1つのセレクタに対して複数のプロパティを指定することができます。
下記に、「セレクタ」「プロパティ」「値」の指定に使用される一例をそれぞれ紹介します。
| セレクタの種類 | 意味 |
|---|---|
| h1 | 見出し |
| p | 段落 |
| ul | リスト |
| ol | 番号リスト |
| div | ブロック要素 |
| プロパティの種類 | 意味 |
|---|---|
| font-family | 文字の種類 |
| font-size | 文字サイズ |
| color | 色 |
| font-weight | 文字の太さ |
| background | 背景 |
| 値の種類 | 意味 |
|---|---|
| blue | 青 |
| px | ピクセル |
| cm | センチメートル |
| pt | ポイント |
| s | 秒 |
上記以外にもさまざまな種類があるため、必要に応じて少しずつ覚えましょう。
3.CSSの記述場所と記述例
CCSを記述する場所は、主に下記の3つです。
- 外部ファイル
- headタグ
- HTMLタグ
上記の記述場所は併用が可能です。ただし、指示の優先順位は「HTMLタグ」「headタグ」「外部ファイル」となっています。
以下では、それぞれの場所にCSSを書く方法を解説します。
3-1.外部ファイルのCSSを読み込む方法
HTMLを記述するためのファイルとは別に、CSSの専用ファイル（スタイルシート）を用意して、各ページごとに読み込ませる方法です。CSSの記述方法としては最も一般的であり、Webサイト全体で同じスタイルを共有できるため、何か変更する場合も一度の手間で済みます。
下記は、WebページにCSSの外部ファイルを読み込ませるための手順です。
| （1） | CSSの専用ファイルを用意する |
|---|---|
| テキストエディタに任意のCSSを記述して保存します。CSSファイルの拡張子は「.css」です。 | |
| CSSの記述例 | |
| ファイル名の例 | style.css |
| （2） | HTMLファイルにCSSへのリンクを貼る |
|---|---|
| HTMLのhead要素内に、CSSの専用ファイルへリンクを貼ります。 | |
| HTMLの記述例 |
|
外部ファイルを相対パスで指定する場合は、2つのファイルの位置を確認しましょう。
3-2.headタグにCSSを記述する方法
HTMLファイルのhead要素内に、styleタグを設けてCSSを記述する方法です。デザインを反映させたいWebページのHTMLに、そのページ内に使用するCSSをまとめて書き込み、一括指定します。head要素内に記述されたCSSは、他のWebページに影響を及ぼすことはありません。
下記は、head要素内にCSSを記述する場合の例です。
<head>
<style>
h1{color: blue;}
</style>
</head>
<head>～</head>内であれば、どの位置に記述しても問題ありません。後から見ても分かりやすく、編集しやすい場所に記述するとよいでしょう。
3-3.HTMLタグに直接CSSを記述する方法
body要素内の各テキストに配置されたHTMLタグに、直接CSSを記述してstyle属性を付与する方法です。Webページ内の1カ所だけに装飾を施したい場合に利用します。
下記は、見出し1の文字色を青に変更する場合の例です。
<h1 style="color: blue;">見出し1</h1>複数のタグを同時に指定することはできないため、変更が必要な場合は個別に設定し直さなければなりません。
4.【初心者向け】CSSの書き方
最後は、初心者向けに、文字のカラーやサイズを変える場合と、複数のスタイルを指定するための具体的なCSSの書き方を紹介します。
下記は、基本的なCSSの構成です。
- セレクタ
- {
- プロパティ
- :
- 値
- ;}
まずは、セレクタで指示する場所を指定し、プロパティと値を「:」で区切って「{}」で囲います。
■文字のカラーを変える場合
文字のカラーを変更する場合は、プロパティに「color」を指定し、値に任意のカラーを記述しましょう。主なカラーの指定方法は、下記の3種類です。
- カラーコード
- RGB
- RGBA
また、一般的なカラーであれば下記のように、色名で指定することもできます。
h1{color:blue;}■文字のサイズを変える場合
文字のサイズを変更する場合は、プロパティに「font-size」を指定し、値に任意の数値を記述しましょう。主なサイズの指定単位は、下記の4種類です。
- px
- em
- rem
- %
下記は、文字サイズ変更の記述例です。
h1{font-size: 30px;}■複数のスタイルを指定する場合
1つのセレクタにスタイル指定を複数する場合は「プロパティ+値」を一塊と考え、塊と塊の間を「;（セミコロン）」で区切ります。下記は、文字のカラーとサイズを同時に変更する場合の記述例です。
h1{
color: blue;
font-size: 30px;
}
CSSの記述では改行や半角スペースが無視されるため、上記のように各プロパティごとに分けて記述すると見やすくなります。また、最後の「;」は省略可能です。
まとめ
CSSは、HTMLと組み合わせることで、Webページの各要素に装飾を施すことができる言語です。外部ファイルに記述すればWebサイト全体に、headタグに記述すればWebページ内に、HTMLタグに記述すれば特定の要素内に影響を及ぼすことができます。
CSSの基本的な書き方が理解できていれば、さまざまな視覚効果の演出が可能です。最初は文字のカラーやサイズを変更するなど、簡単な指示から順に学習するとよいでしょう。
