ホームページのCSSとは?

ホームページのCSSとは?

ホームページCSSとは、どのようなものであるか説明します。読者対象は、「CSSって何?」と疑問をお持ちで、詳しく知りたい方です。CSSとは何かという説明だけでなく、基本的な使い方も分かりやすく解説しています。

なぜホームページでは、CSSが重要なのか?

ホームページ作成を始めるとすぐにぶつかる壁が、HTMLとCSSの記述だと思います。それぞれ必要なことを覚える(学ぶ)ことになりますが、多くの方がそこで疑問を感じるのではないでしょうか。「なぜ、HTMLに記述できるものを、わざわざCSSで別に記述するんだろうか?」

確かに、HTMLに記述できるのであれば、そちらの方が一か所にまとまるから便利ですよね。ところが、現代のホームページ作成では、別ファイルのCSSに記述することが推奨されています。もちろんそこには深い意味があるんです。

そこで、CSSを別ファイルで記述する意味について、考えてみましょう。

CSSが理解できる、4つのポイント!

それでは、CSSが理解できるように、4つのポイントに分けて説明します。

そもそも、CSSって何ですか?

最初に、そもそもCSSとは一体何なのか、根本的なところを確認しておきましょう。 CSSとは、「カスケーディング・スタイル・シート(Cascading Style Sheets)」の略語です。具体的に何をしているのかというと、装飾に関する情報をまとめています。

例えば、文字サイズや文字の色、行間隔や段落間隔、画像の配置や全体のデザインなど見た目に関するすべての情報を記述します。つまり、ほとんどすべての装飾に関係する情報を、CSSにまとめることができるわけなんです。

※ CSS記述の例

@charset “UTF-8”;
.title {text-align: center;font-size: 150%;font-weight: bold;}
.center {text-align: center;font-weight: bold;color: #ff0000;}
.under-line {text-decoration: underline;}

以前であれば、装飾関係の設定はHTMLの各タグに記述していました。しかし、現代では装飾専用の記述方法としてCSSを使う方式に、ほぼ移行しました。なお、 CSSはHTML内に記述することもできますが、多くの場合は別ファイルにして、独立した存在にしています。

※ HTML直接記述の例

<p align=center style=”font-size: 150%;font-weight: bold;”>文字列</p>

このようにして、ホームページに必要な装飾情報をまとめるのが、CSSです。

なぜホームページ作成でCSSを使うのか?

ところで、なぜホームページ作成で、CSSを使うのでしょうか? それは、装飾に関する記述を独立させることで、できるだけHTMLファイルを軽量化したいからです。では、なぜ軽量化するのかというと、読み込みやレンダリング(表示処理)の速度を早くしたいからです。

つまり、表示が早くなるので利用者(閲覧者)にとって利便性が高くなります。ある調べによると、閲覧を快適に行うには2秒以内の表示が重要らしく、4秒が待てる限界だそうです。このように、表示を高速化する意味で、きるだけHTMLを軽量化したいんですね。

また、検索大手の Googleも高速化については推奨しています。Googleは、検索結果に表示速度の加味を発表していますので、そういった意味でも重要です。つまり、表示の高速化がSEO対策にも影響がある(もちろん良い意味で)ということなんです。

ご覧いただいたように、CSSを使うことで装飾に関する記述を一元管理するだけでなく、 HTMLを軽量化することで、表示速度を早くするという狙いがあるんですね。

CSSの基本的な使い方や記述方法とは?

続いて、CSSファイルの使い方や記述方法をご紹介しましょう。

CSS記述の例

こちらはCSSの例です。こちらをイメージしながら、説明に目を通してください。

@charset “UTF-8”;
.title {text-align: center;font-size: 150%;font-weight: bold;}
.center {text-align: center;font-weight: bold;color: #ff0000;}
.under-line {text-decoration: underline;}

CSSファイルの作り方

CSSファイルは、次のような手順で作ります。

  1. テキストエディタ(メモ帳など)を起動する。
  2. 先頭行に「@charset “UTF-8”;」と記述して、文字コードを設定する。
    ※上記はUnicodeにした場合。シフトJISの場合は「@charset “Shift_JIS”;」とします。
  3. ファイル名を「○○.css」として、設定した文字コードで保存する。

これで、CSSファイルの準備が出来ました。

CSSの使い方と記述方法

CSSは、クラス(class)と呼ばれる名前を自分で作成し、そこに書式を記述します。

例えば、文字列の中央揃えなら次のように記述します。(center というクラスを作成した場合の例で考えてみます。)

  • CSSの記述….center {text-align: center;}
  • HTML の記述…<p class=”center”>文字列</p>

これで、「文字列」が中央揃えで表示されます。(「.」をつけるとクラスを意味し、その後ろに続けて名前を記述します。)

また、文字列を中央揃え・太字・赤色にするなら、次のように記述します。

  • CSSの記述….center {text-align: center;font-weight: bold;color: #ff0000;}
  • HTML の記述…<p class=”center”>文字列</p>

これで、「文字列」が中央揃え・太字・赤色で表示されます。このように、1つのクラスに複数の書式を設定することができます。

ここまでの説明でお分かり頂けたと思いますが、CSSは複数の書式をまとめたうえで名前を付け、オリジナルの書式を作るということなんですね。書式が1つの場合は面倒ですが、10個など複数になれば別名を付けてまとめられるので、かなり簡単になることが理解できると思います。

CSSはコーディング量を確実に減らします。

CSSを利用することによって、コーディング(記述)量が確実に減らせます。例えば、先ほどの「中央揃え・太字・赤色」を100ページで直接 HTMLに記述してしまうと、当然ですがすべてのページで同じ記述をすることになります。

しかし、CSSのクラスを利用すれば、「center」と記述するだけで済みます。 HTMLファイルには、表示用の文字列や画像の記述だけを置き、それ以外の記述を極力置かないようにすることで、記述量を削減できるわけです。

また、CSSには別の利点もあります。例えば、「色を青色に変えたいなあ」と思った場合に、CSSであれば1か所を書き換えるだけで済みます。これが HTMLの場合だと、記述した100ページすべてで書き換えが必要ですので、使用箇所が多いほど恩恵があるんです。

このようにCSSは、単にコーディング量が減るだけでなく、後々一斉に書式を変更したいときに、1か所を変えるだけで済むという非常に賢いやり方ができるんですね。

まとめ

いかがでしたか?

今回は、ホームページのCSSについて、そのはたらきと目的を明確にしました。ポイントは、CSSをHTML ファイルの軽量化のために使用している点でした。CSSには、HTMLにできる限り余計なものを書かず、絶対必要なものだけにする狙いがあるんですね。

このような意図がありますので、HTMLの記述ではCSS に記述できるものはできる限りCSSに記述するようにしてください。そうすれば、CSS利用の意図に沿うだけでなく、Googleからも高い評価が得られると思います。

ペナルティーがあるような、絶対守らないといけないことではありませんが、CSSにはそれなりの意図がありますので、ぜひそれを汲み取ってホームページを作成していただきたいと思います。

以上、「ホームページのCSSとは?」と題して説明しました。