名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

ホームページ制作を行う中では、HTMLやCSSといったマークアップ言語で構築されており、その後、JavaScriptやPHPなどのプログラム言語によって、高度な機能をホームページに実装します。
HTMLとCSSは、学生時代に講義を通して触れる機会が多いため、HTML・CSSという言葉を知っている方も多いと思いますが、これらが実際にどのような機能を有し、役割を果たしているかまでを把握している方は、少ないように感じます。
そこで今回は、ホームページのコーディングにおけるCSSの役割と機能を説明します。

ホームページ制作におけるCSSとは

CSS(Cascading Style Sheets)とは、ホームページを構成する数あるソースコードの中の一つで、HTMLファイルに記述された要素（テキストや見出し、画像など）のスタイル（大きさや位置、余白など）を指定することができる言語です。
CSSは、HTMLと同様にマークアップ言語とも呼ばれていますが、あくまでも要素のスタイルを指定するファイルであるため、HTMLとは違い、単体でホームページを制作することはできません。よって、CSSは、必ずHTMLとセットで使用されます。
過去のホームページ制作では、CSSはあまり使用されておらず、HTMLのみでホームページを制作することが主流でしたが、ソースコードが多くなることによるメンテナンスの不便さや、クローラーがファイルの中身を読みづらくなるなどの欠点が目立つようになり、現在では、HTMLとCSSの二つの言語によってホームページを制作することが主流です。

CSSが使用される代表的な例

ここではCSSが使用される代表的な例を3つご紹介します。

ヘッダーのような全ページ共通のデザインの設定

ヘッダーやグローバルナビゲーションなどは、次の画像のように、全ページに共通して記載されていることが多々あります。

このようにホームページ内で共通している項目がある場合は、CSSを活用して共通項目のスタイルを一括で指定することで、ページごとに個別にスタイルを指定する必要がないため、不要な時間と労力を減らすことができます。

フォントや背景色などの基本設定

テキストのフォントサイズ・カラーや背景色など、ホームページのベースとなる情報を設定することで、フォントサイズがページごとに異なったり、見出しのデザインがページごとに異なるなど、ユーザーにとってホームページを閲覧しづらくなる要因をあらかじめ回避することができます。
CSSを活用してホームページ全体の共通要素のデザインを統一し、ユーザービリティを向上させましょう。

ホームページのレスポンシブ対応

ホームページをレスポンシブ（モバイル）対応させるために、CSSのメディアクエリと呼ばれる技術が広く使用されています。メディアクエリとは、画面幅ごとに個別でスタイルを設定することができる技術です。
レスポンシブデザインでホームページを制作する場合も、このCSSが広く使われています。

今回のまとめ

今回の記事を読むことで、ホームページにおけるCSSの役割や代表的な利用例をご理解いただけたかと思います。
CSSは、現代のホームページにおいては、必要不可欠なマークアップ言語であり、ほぼすべてのホームページに実装されています。
CSSの役割を正しく理解しておくことで、突然、自社のホームページの運営を任された場合でも役に立つかもしれませんね。