Webサイト構成要素のひとつであるCSS。HTML同様に、とても重要な要素であるにも関わらず、よくわからない人も多いことでしょう。それは多くの人が理解し難い「コンピュータ言語」の分野だからに他なりません。
しかしながら、CSSはプログラミング言語ではなく「スタイルシート言語」であり、習得もプログラミング言語ほど困難ではありません。
CSSを使えるメリットは大きく、Webサイト、ホームページの運営者であればぜひ覚えておきたい言語のひとつと言えるでしょう。
こちらではCSSとHTMLの関係性について触れ、CSSでできることや基本文法などについて解説します。
目次
CSSとは？HTMLとの関係性
CSSとHTMLは一緒に解説されることが多いコンピュータ言語ですが、どのような関係性があるのでしょうか。以下それぞれ解説していきます。
CSSとは
CSSとは「Cascading Style Sheets」の略称で、WebサイトやWebページ、Webサイト内のコンテンツに装飾を施すための「スタイルシート言語」です。
例えば「文字に色を付けたり太くしたりする」「ページ内のレイアウトを変更する」「背景画像を入れる」など、デザイン部分における調整や変更を行うことができます。
関連記事：CSSとは？基礎から基本的なコード例まで初心者向けに解説します
HTMLとは
一方、HTMLとは「HyperText Markup Language」の略称で、Webサイト内のコンテンツにおける「アウトライン＝骨子」の構成部分を担う、もっとも基本的な構成要素となります。
いわゆるWebサイト内のコンテンツをコンピュータが理解できるように定義するためのマークアップ言語です。
例えばWebサイトのコンテンツである文章は、そのまま入力してもコンピュータ側はどこが見出しでどこが段落なのかを理解することができません。
そこで、HTMLというマークアップ言語を使用して「ここが見出しですよ」「ここが段落ですよ」とコンピュータ側へ指示することで、理解できるようにしてあげるのです。
すると検索エンジンはそのWebサイトの構成や内容を把握しやすくなります。
マークアップ言語はHTMLの他に「XML」「XHTML」「SGML」などがあり、主に人間が作成したコンテンツをコンピュータが理解できるようにしてあげる言語を指します。
関連記事：HTMLとは？簡単なHTMLタグの基本からCSSの基礎まで初心者にもわかりやすく解説
CSSとHTMLは組み合わせて活用する
CSSやHTMLは、それ単体で使用しても意味がなかったり、効果を十分発揮したりすることができないものです。
HTMLで構成された「基礎＝アウトライン（骨子）」の上に、CSSで指示するデザインが施され、初めて見栄えの良いコンテンツとなります。
つまりCSSとHTMLを組み合わせて使用することにより相乗効果が生まれ、ひとつの完成されたコンテンツとなるのです。
CSSはなぜ重要なのか
SEOの内部対策上、そしてユーザビリティ向上を図る目的上、Webサイトの体裁を整えることは非常に重要なポイントとなります。
以下では検索順位決定にも影響を及ぼすWebデザインの重要性とCSS普及の経緯について解説しています。
関連記事：SEO対策をまずは自分でやるには？初心者がすぐに取り組める手法を解説！
CSSが誕生したのは1994年
とりわけWebデザインの良し悪しが検索エンジンの順位付けに反映することがなかった1990年代前半ですが、このころはWebサイトの見栄えはさほど重要ではありませんでした。
インターネットが普及しはじめて間もない1990年代はダイアルアップモデムが主流で、とにかくWebサイトを軽量化し、通信速度を少しでも早くする必要性があったからです。
CSSが普及し始めた2000年代初頭
しかしブロードバンド元年と呼ばれた2000年代初頭以降はADSLが登場し、通信回線も徐々に高速化されはじめていきました。
このころにはCSSも普及しはじめており、Webサイトをデザイン面から利用しやすくする「ユーザビリティ」が考慮されるようになっていったのです。
ユーザビリティも検索順位を決定する要因のひとつに
その結果Webデザインの良し悪しもユーザビリティの面から、検索エンジンの順位を決定づける要因になり得るとして、重要視されるようになっていきました。
以降「UI（ユーザーインターフェース）」「UX（ユーザーエクスペリエンス）＝顧客体験」という概念も注目を集めるようになり、デザインにおけるユーザビリティの重要性はますます高まっていったのです。
関連記事：【UI/UXとは？】それぞれの意味や違い、デザインの改善方法まで解説
CSSを覚えて自由自在にデザインを変更できるようにしよう
SEOの内部対策はクローラビリティの向上を図る上で重要であり、またユーザビリティの向上を図ることは、UXを向上させることにつながります。
これらの施策は検索結果上位表示を目指す上で、少なからず検索エンジンから良い評価を得られることにつながるのです。
CSSで変更できることとは
上述からもCSSで変更できることを把握し、実際変更できるようにしておくことが望ましいと言えるでしょう。CSSで変更できることは主に以下が挙げられます。
・ Webサイトの装飾
・ Webサイト内のレイアウト変更及び調整
・ アニメーションの使用
Webサイトの装飾
WebサイトがWebブラウザ上に表示されたときの見栄えを変更できます。例えば「文字を大きくしたり太くしたりする」「サイト全体の色を変更する」「背景画像やボタンのイラストを変更する」などが行なえます。
Webサイト内のレイアウト変更及び調整
CSSではさらに、Webブラウザ上に表示されたときのレイアウトを変更したり、微調整したりすることができます。
レイアウトとは「配置」や「配列」という意味で、レイアウトをしっかり均等に割り付けし、体裁を整えることでWebページ及びコンテンツの見栄えが良くなります。
通常CSSを使用せず、HTMLコードのみで文章をWebブラウザに表示させた場合、すべて左揃えで表示され、縦積み状態で配置されます。
このままでは情報が整理できず、情報量が増えるほどに内容が把握しづらくなっていきます。それらを解消、改善するためにもCSSでレイアウトの変更や余白の微調整などを行っていきます。
アニメーションの使用
CSSではアニメーションの使用もできます。例えばボタンや画像にマウスポインタを乗せると、色や画像がフワッと変わったり、少しへこんだりするような目を引く効果を与えることができます。
昨今ではユーザビリティの面から、単なる画像とリンク付きボタンとを明確に分ける目的で使用されることもあります。
CSSの基本文法
次からは実際にCSSがどういったものなのかを解説し、基本文法について触れていきます。
主にCSSは以下の3要素によって構成されています。
・ セレクタ
・ プロパティ
・ 値
まず「セレクタ」でどの要素なのかを指定し、次に「プロパティ」でどれを変更したいのかを指定、最後にプロパティをどのような状態にしたいのか「値」を指定します。
「プロパティ」と「値」の部分を「宣言（スタイル宣言）」と言い、「プロパティ」の後ろには「コロン＝:」、「値」の後ろには「セミコロン＝;」を記述、最後に中括弧（波括弧）で囲います。
中括弧（波括弧）で囲った部分を「宣言ブロック」といい、セレクタまで含めた部分を「ルール（ルールセット）」と言います。
セレクタ
CSSの基本セレクタとしては以下があります。
・ 全称セレクタ
・ 要素型セレクタ
・ クラス（class）セレクタ
・ idセレクタ
・ 属性セレクタ
全称セレクタ
全称セレクタは「*＝アスタリスク」を記述することにより、Webサイト内すべての要素においてスタイルを適用します。書式は「* {プロパティ名:値;}」となります。
要素型セレクタ
要素型セレクタは「要素名」を記述することにより、Webサイト内における特定の要素にのみスタイルを適用します。書式は「要素名 {プロパティ名:値;}」となります。
クラス（class）セレクタ
クラスセレクタはclass属性による「class名」が付帯された要素において、スタイルを適用します。書式は「.クラス名 {プロパティ名:値;}」となります。注意点として、クラス名の前に「.＝ドット」が入ります。
idセレクタ
idセレクタはid属性による「id名」が付帯された要素において、スタイルを適用します。書式は「#id名 {プロパティ名:値;}」となります。注意点として、id名の前に「#＝ハッシュ」が入ります。
属性セレクタ
属性セレクタは特定の属性を持った要素において、スタイルを適用します。書式は「要素名[属性名] {プロパティ名:値;}」となります。注意点として、属性名の前に要素名が入り、また属性名は「[ ]＝square brackets」で囲います。
プロパティ
CSSプロパティは機能別に非常にたくさんの種類があるため、ここでは基本的な内容のものに絞って紹介します。
・ 色
・ フォント
・ リスト
・ 罫線
・ アウトライン
・ 背景
色
色は「color」プロパティを記述することで、主に文字色や背景色などを指定します。
| プロパティ名 | 説明 |
| color | 文字色や前景色の指定を行う |
| background-color | 背景色の指定を行う |
| border-color | 罫線の色の指定を行う |
| border-top-color | 上罫線の色の指定を行う |
| border-bottom-color | 下罫線の色の指定を行う |
| outline-color | アウトラインの色の指定を行う |
フォント
フォントは「font」プロパティを記述することで、主にサイズや太さ、字体などを指定します。
| プロパティ名 | 説明 |
| font | フォントの指定を一括して行う |
| font-style | フォントにイタリック体及び斜体の指定を行う |
| font-weight | フォントの太さの指定を行う |
| font-size | フォントのサイズの指定を行う |
| font-family | フォントの種類の指定を行う |
リスト
リストは「list」プロパティを記述することで、文字列の先頭に表示される「マーカー」の指定を行います。
| プロパティ名 | 説明 |
| list-style | マーカーの指定を一括して行う |
| list-style-type | マーカー文字の種類の指定を行う |
| list-style-image | マーカーの画像の指定を行う |
| list-style-position | マーカーの表示位置の指定を行う |
罫線
罫線は「border」プロパティを記述することで、上下左右各罫線における指定を行います。
| プロパティ名 | 説明 |
| border | 罫線の色や太さ、スタイルなど一括して指定を行う |
| border-color | 罫線の色の指定を行う |
| border-width | 罫線の太さの指定を行う |
| border-style | 罫線のスタイルの指定を行う |
ちなみに上下左右の罫線を単体で変更する際は「border-〇〇-color」の〇〇の部分に「positionプロパティ（位置プロパティ）」を記述してあげることで変更が可能です。（この例では最後の項目が「color」ですので色の変更ができます）
■positionプロパティ（位置プロパティ）
| プロパティ名 | 説明 |
| top | 上 |
| bottom | 下 |
| left | 左 |
| right | 右 |
アウトライン
アウトラインは「outline」プロパティを記述することで、要素の外側に線を表示する指定を行います。
「outline」プロパティは、罫線の表示を行う「border」プロパティで表示された線の更に外側に線が表示されます。
| プロパティ名 | 説明 |
| outline | アウトラインの色や太さ、スタイルなど一括して指定を行う |
| outline-color | アウトラインの色の指定を行う |
| outline-width | アウトラインの太さの指定を行う |
| outline-style | アウトラインのスタイルの指定を行う |
背景
背景は「background」プロパティを記述することで、Webサイト全体における背景の指定を行います。
| プロパティ名 | 説明 |
| background | 背景の指定を一括して行う |
| background-color | 背景色の指定を行う |
| background-image | 背景画像の指定を行う |
値
CSSにおける値は英数や記号、そしてキーワードがあり、単位が付帯しているもの、していないものなどが含まれます。
こちらではWebサイトのデザイン変更における「数値データ型」の値について解説します。数値データ型の値は非常に多くあるため、代表的なものをいくつか紹介いたします。
・ 整数
・ 数値
・ 大きさ
・ パーセント
整数
CSSにおける整数の値の指定には「<integer>」を記述します。整数はゼロを含む9までの十進法で表される数字です。例えばマイナスを含む「1120」「-1120」などの値が「整数」に該当します。
ちなみに十進法とは、10を基数とし10倍ごとに新規単位を増やしていく数の表し方のことです。例えば1120であれば「1000+100+20+0」を意味します。
数値
CSSにおける数値は実数のことで、実数の値の指定には「<number>」を記述します。実数には整数の他、小数点以下も含まれ、マイナス記号を付帯することもできます。例えば「1120」「-1120」「1.120」などが実数に該当します。
大きさ
CSSにおける大きさの値の指定には「<dimension>」を記述します。大きさは「<number>+単位」となります。例えば「1120px（ピクセル）」「1120em（エム）」「1120cm（センチメートル）」などが該当します。
さらに以下の単位を表すためにも寸法を使用します。
・ 長さ
・ 時間
・ 角度
・ 解像度
＜長さ＞
CSSにおける長さの値の指定には「<length>」型を用います。単位としては主に以下があります。またCSSにおける長さには「絶対的」と「相対的」があります。
■長さの単位
| プロパティ名 | 説明 |
| em | フォントの大きさ |
| rem（root em） | 最上位階層（root）におけるフォントの大きさ |
| lh | 行の高さ |
| rlh（root lh） | 最上位階層（root）における行の高さ |
など
＜時間＞
CSSにおける時間の値の指定には「<time>」型を用います。単位としては主に以下があります。
■時間の単位
| プロパティ名 | 説明 |
| s | 秒 |
| ms | ミリ秒（0.001秒＝1秒の1000分の1） |
＜角度＞
CSSにおける角度の指定には「<angle>」型を用います。単位としては主に以下があります。
■角度の単位
| プロパティ名 | 説明 |
| deg | 度 |
| turn | 周 |
など
＜解像度＞
CSSにおける解像度の指定には「<resolution>」型を用います。単位としては主に以下があります。
■解像度の単位
| プロパティ名 | 説明 |
| dpi（dots per inch） | 1インチにおけるドットの数 |
| dpcm（dots per cm） | 1センチにおけるドットの数 |
| dppx（dots per px） | 1ピクセルにおけるドットの数 |
パーセント
CSSにおけるパーセント指定では「<percentage>」を記述します。特殊データ型として以下があります。
・ 色
・ 画像
・ 位置
色
CSSにおける色の指定には「<color>」を記述します。これは背景色などもすべて指定できます。
画像
CSSにおける画像の指定には「<image>」を記述します。CSSで扱うことができる二次元の画像を指定できます。
位置
CSSにおける位置の指定には「<position>」を記述します。「<position>」はオブジェクトの二次元における位置を示すことができます。
まとめ
HTMLが「コンテンツ構成要素の基礎＝アウトライン（骨子）」を担う一方、Webサイト内の装飾を担っているのがCSSです。
HTMLとCSSは組み合わせて活用するのが一般的であり、どちらも重要なWebサイト構成要素のひとつとなります。
近年ではWebサイト内のデザインにおけるユーザビリティも検索結果に影響を及ぼすことから、CSSもHTML同様に無視できない存在となっているのです。
