Webサイト構成要素のひとつであるCSS。HTML同様に、とても重要な要素であるにも関わらず、よくわからない人も多いことでしょう。それは多くの人が理解し難い「コンピュータ言語」の分野だからに他なりません。
しかしながら、CSSはプログラミング言語ではなく「スタイルシート言語」であり、習得もプログラミング言語ほど困難ではありません。CSSを使えるメリットは大きく、Webサイト、ホームページの運営者であればぜひ覚えておきたい言語のひとつと言えるでしょう。
こちらではCSSとHTMLの関係性について触れ、CSSでできることや基本文法などについて解説します。
関連記事
・ロイヤリティ向上をWebサイトで作り出す方法とは！具体的な方法も紹介！
・Webサイト制作のプロセスと制作会社の選び方
・Webサイトづくりで失敗しがちな「あるある」注意点とは？具体的な解決策も紹介
目次
CSSとは？HTMLとの関係性
CSSとHTMLは一緒に解説されることが多いコンピュータ言語ですが、どのような関係性があるのでしょうか。以下それぞれ解説していきます。
● 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を組み合わせて使用することにより相乗効果が生まれ、ひとつの完成されたコンテンツとなるのです。
関連記事
・Web(ウェブ)とは？初心者でも分かるよう意味や仕組みを解説します
・プログラミングとは？基本的な意味を理解しておけばビジネスでも役立ちます！
・brタグとは！HTMLタグの中でpタグとの違いも解説します！
CSSの重要性
CSSはSEO対策を行ううえで非常に重要な技術であるとともに、メンテナンスを容易にしたり、スタイルを指定できたりもします。以下ではCSSの重要性について解説します。
● SEOとCSS
● Webサイトのメンテナンス性向上
● スタイルを指定し簡単に変更できる
SEOとCSS
CSSを利用することでSEO対策上有利に働くことが期待できます。CSSを利用するとWebページ1ページに記載するソースコードの量を削減できるため、当該ページの軽量化につながります。ページのデータ量を軽量化すると、検索エンジンWebクローラーの読み込み速度が早くなり、また同時に表示速度も早くなります。
するとユーザビリティやUXの観点から、SEO効果の向上も見込めます。このように、ページ内のHTMLとCSSを別ファイルとして分けるだけでもページ読み込み速度の改善につながり、引いてはSEO対策上有利に働くのです。
Webサイトのメンテナンス性向上
CSSを利用することでWebサイトのメンテナンスも容易にできるようになります。例えば、Webページやコンテンツに装飾を施していく場合、HTMLに直接装飾することもできますが、Webサイト内のすべてのWebページにおいて、同様の指定を行っていく必要があります。
ですが、CSSを作成して一括管理を行えるようにしておけば、CSSから指定するだけでWebページ内の同様の要素をまとめて変更することができます。つまり、Webページの変更やコンテンツの装飾などを一括で行えるようになるため、Webサイトのメンテナンス性向上が期待できるのです。
スタイルを指定し簡単に変更できる
CSSはメディアに応じてスタイルを指定できます。つまり、WebサイトがPCで表示される場合、スマホで表示される場合、タブレットで表示される場合など、各デバイスに応じた表示形式で表示ができます。
こういった異なるメディアでそれぞれに最適なスタイルで表示ができ、またデザインの一括管理も可能なことから、幅広い分野で活用できる可能性が期待されています。
関連記事
・【2024年度版】SEOとは？基礎知識と具体的な施策を詳しく解説
・デッドリンクとは？原因やSEOへの影響を徹底解説
・Alternate（オルタネイト）タグとは！ 意味やSEOを意識した上での注意点を解説！
CSSのこれまで
SEOの内部対策上、そしてユーザビリティ向上を図る目的上、Webサイトの体裁を整えることは非常に重要なポイントとなります。以下では検索順位決定にも影響を及ぼすWebデザインの重要性とCSS普及の経緯について解説しています。
関連記事： SEO対策をまずは自分でやるには？初心者がすぐに取り組める手法を解説！
● CSSが誕生したのは1994年
● CSSが普及し始めた2000年代初頭
● ユーザビリティも検索順位を決定する要因のひとつに
● CSSを覚えて自由自在にデザインを変更できるようにしよう
CSSが誕生したのは1994年
とりわけWebデザインの良し悪しが検索エンジンの順位付けに反映することがなかった1990年代前半ですが、このころはWebサイトの見栄えはさほど重要ではありませんでした。インターネットが普及しはじめて間もない1990年代はダイアルアップモデムが主流で、とにかくWebサイトを軽量化し、通信速度を少しでも早くする必要性があったからです。
CSSが普及し始めた2000年代初頭
しかしブロードバンド元年と呼ばれた2000年代初頭以降はADSLが登場し、通信回線も徐々に高速化されはじめていきました。このころにはCSSも普及しはじめており、Webサイトをデザイン面から利用しやすくする「ユーザビリティ」が考慮されるようになっていったのです。
ユーザビリティも検索順位を決定する要因のひとつに
その結果Webデザインの良し悪しもユーザビリティの面から、検索エンジンの順位を決定づける要因になり得るとして、重要視されるようになっていきました。
以降「UI（ユーザーインターフェース）」「UX（ユーザーエクスペリエンス）＝顧客体験」という概念も注目を集めるようになり、デザインにおけるユーザビリティの重要性はますます高まっていったのです。
関連記事： 【UI/UXとは？】それぞれの意味や違い、デザインの改善方法まで解説
CSSを覚えて自由自在にデザインを変更できるようにしよう
SEOの内部対策はクローラビリティの向上を図る上で重要であり、またユーザビリティの向上を図ることは、UXを向上させることにつながります。これらの施策は検索結果上位表示を目指す上で、少なからず検索エンジンから良い評価を得られることにつながるのです。
関連記事
・検索アルゴリズムの変遷～歴史から読み解くSEOの未来について
・Webマーケティングの歴史～今後のトレンドまで徹底解説～
CSSの記述場所
CSSの記述場所としては主に以下があります。
● HTMLページ内に直接書く（インライン）
● Webページのヘッダーに書く（内部スタイルシート）
● CSSシートを別に作る（外部スタイルシート）
HTMLページ内に直接書く（インライン）
CSSをHTMLタグに直接記述する方法をインラインスタイルシートと言います。HTMLに「style＝””」を記述しセレクタ、プロパティ、値を指定します。直接記述するため理解しやすく直感的に使用できますが、一つひとつ手作業で書き込んでいき、なおかつ修正や追加も一括で行うことができないため非常に手間と時間を要します。
■インラインスタイルシート記述例
<p style=”font-weight: bold;”>文字が太字で表示されます</p>
Webページのヘッダーに書く（内部スタイルシート）
CSSをWebページのheadタグに記述する方法を内部スタイルシートと言います。特定のページにのみスタイルを適用したい場合に便利です。ただし他のHTMLファイルから、内部スタイルシートのCSSファイルを読み込むことはできなくなります。こちらも修正や追加を行う場合は一括でできないため非常に時間と手間を要します。
■内部スタイルシート記述例
<head>
<style>
h1{
color: red;
font-size:20px;
}
</style>
</head>
CSSシートを別に作る（外部スタイルシート）
CSSを別に作りHTMLファイルで読み込む設定にする方法を外部スタイルシートと言います。複数のWebページをリンクさせられるため、リンクさせているページの修正や追加は一括で行うことができます。
インラインスタイルシートや内部スタイルシートに比べて非常に効率的ですが、CSSファイルが大きくなるにつれ表示速度が遅くなっていくデメリットがあります。
■外部スタイルシート記述例
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
CSSで変更できることとは
上述からもCSSで変更できることを把握し、実際変更できるようにしておくことが望ましいと言えるでしょう。CSSで変更できることは主に以下が挙げられます。
● Webサイトの装飾
● Webサイト内のレイアウト変更及び調整
● アニメーションの使用
Webサイトの装飾
WebサイトがWebブラウザ上に表示されたときの見栄えを変更できます。例えば「文字を大きくしたり太くしたりする」「サイト全体の色を変更する」「背景画像やボタンのイラストを変更する」などが行えます。
Webサイト内のレイアウト変更及び調整
CSSではさらに、Webブラウザ上に表示されたときのレイアウトを変更したり、微調整したりすることができます。レイアウトとは「配置」や「配列」という意味で、レイアウトをしっかり均等に割り付けし、体裁を整えることでWebページ及びコンテンツの見栄えが良くなります。
通常CSSを使用せず、HTMLコードのみで文章をWebブラウザに表示させた場合、すべて左揃えで表示され、縦積み状態で配置されます。このままでは情報が整理できず、情報量が増えるほどに内容が把握しづらくなっていきます。それらを解消、改善するためにもCSSでレイアウトの変更や余白の微調整などを行っていきます。
アニメーションの使用
CSSではアニメーションの使用もできます。例えばボタンや画像にマウスポインタを乗せると、色や画像がフワッと変わったり、少しへこんだりするような目を引く効果を与えることができます。昨今ではユーザビリティの面から、単なる画像とリンク付きボタンとを明確に分ける目的で使用されることもあります。
関連記事
・モックアップとは！WEB制作時に欠かせない意味と作り方を解説！
・GIF（ジフ）アニメーションをスマホ・PCで作成する方法とは！
CSSの基本文法
次からは実際にCSSがどういったものなのかを解説し、基本文法について触れていきます。主にCSSは以下の要素によって構成されています。
● セレクタ
● プロパティ
● 値
● パーセント
まず「セレクタ」でどの要素なのかを指定し、次に「プロパティ」でどれを変更したいのかを指定、最後にプロパティをどのような状態にしたいのか「値」を指定します。
「プロパティ」と「値」の部分を「宣言（スタイル宣言）」と言い、「プロパティ」の後ろには「コロン＝:」、「値」の後ろには「セミコロン＝;」を記述、最後に中括弧（波括弧）で囲います。中括弧（波括弧）で囲った部分を「宣言ブロック」といい、セレクタまで含めた部分を「ルール（ルールセット）」と言います。
セレクタ
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>」はオブジェクトの二次元における位置を示すことができます。
関連記事
・JavaScriptとは！初心者でも分かる基本的な概念と仕組みを解説！
・JavaScriptの意味とは？Web開発で欠かせない基本を解説！
CSSとマルチデバイス対応
CSSをうまく活用することで、マルチデバイスに対応させることができます。マルチデバイス対応とはPCやスマホ、タブレットなど、デバイスが異なる環境下でも同じ内容のサービスを同じように利用できることを指します。マルチデバイス対応を実現するためには、主に以下の内容を把握しておく必要があります。
● レスポンシブデザインとは
● viewport設定
● メディアクエリ
レスポンシブデザインとは
レスポンシブデザインとは、デバイスごとの画面サイズに応じてWebページ及びWebページ中のコンテンツサイズが適宜自動調整され、見やすい画面表示となるように最適化されるデザインのことを言います。
「response＝レスポンス」は英語で「応答」や「反応」などの意味となり、また「Responsive＝レスポンシブ」で「応答性の高い」といった意味になります。
viewport設定
「viewport＝ビューポート」とは「表示領域」のことを指し、この部分を設定することでデバイスごとに画面表示サイズが最適化されます。
ビューポートを設定しない場合は、作成されたWebサイトのサイズがデフォルトで表示されてしまうため、大きすぎたり小さすぎたりして最適な画面表示にはなりません。つまりビューポート設定があることによって、マルチデバイスに対応させることができるのです。
メディアクエリ
メディアクエリとは、それぞれの異なるデバイスの条件に応じて、適宜最適なCSSに切り替えて適用させられる機能のことを指します。異なるデバイス環境に柔軟に適応させ、デザインやコンテンツを最適化して表示させます。
例えば、デバイスがPCの場合は1のCSS、スマホの場合は2のCSSといった具合にデバイスに応じて適宜CSSを切り替えることができます。ブレイクポイントと呼ばれる分岐点を設定することで、そこを境目にCSSの記述内容を変化させ表示を切り替える仕組みです。
CSSの学び方
CSSの学び方としては以下があります。
● 書籍や参考サイト
● 動画サービス
● 専門スクール
書籍や参考サイト
CSSを学ぶ身近な方法としてまずは、書籍や参考サイトなどから知識を吸収するところから始めるのがおすすめです。書籍や参考サイトに記載されている内容を眺めているだけでも、何となく知識としては身についていきます。とりあえず、まずは触れてみることが重要で、こういった地道な努力から開始するのが基本です。
動画サービス
ある程度CSSを勉強してきたら、ステップアップのために動画サービスを活用するのもおすすめです。動画では、書籍などでは理解し難い内容も分かりやすく言葉で解説している場合も多く、これまで勉強した内容の確認にはうってつけです。復習も兼ねて知識の定着には良い媒体と言えます。
専門スクール
「自分だけで勉強していても分からない」「時間を無駄にしないためにも最初からしっかりと講師に教えてもらう」といった人には、専門スクールで受講するのも一つの手です。
現世代の人は「タイパ＝タイムパフォーマンス」を重視する人も多く、はじめからきちんと教えてもらうことで、時間の節約につなげようとする人もいます。そういった人たちは、専門スクールで受講することがおすすめです。
まとめ
HTMLが「コンテンツ構成要素の基礎＝アウトライン（骨子）」を担う一方、Webサイト内の装飾を担っているのがCSSです。HTMLとCSSは組み合わせて活用するのが一般的であり、どちらも重要なWebサイト構成要素のひとつとなります。
近年ではWebサイト内のデザインにおけるユーザビリティも検索結果に影響を及ぼすことから、CSSもHTML同様に無視できない存在となっているのです。
