前回の記事では、「今さら聞けない…HTMLとは？CSSとの違いをわかりやすく解説」の前編ということで、HTMLとは何かについて解説しました。そこで今回は後編ということで、CSSについて解説していきたいと思います。

前編の記事をまだご覧になっていない場合は、そちらからご覧いただくとより分かりやすいかと思いますので、ぜひチェックしてみてくださいね。

目次

1. CSSとは

1.1.言葉の意味
1.2.CSSでできること
1.3.CSSの必要性と活用するメリット

2. CSSのバージョンについて
3. HTMLとCSSの違い
4. まとめ

1.1. 言葉の意味

CSSとは「カスケーディングスタイルシート（Cascading Style Sheet）」の略でWebページの文字サイズ・色・デザイン・レイアウトといったいわゆる「見た目」を指定するためのスタイルシート言語です。「シーエスエス」や「スタイルシート」と呼ばれています。

1.2. CSSでできること

上述したとおり、CSSはHTMLで作ったWebページに対して装飾をおこなうことができます。

注意点は、CSSはあくまでもHTMLを装飾するためのスタイルシート言語であるため、単体での使用はできないことです。

1.3. CSSの必要性と活用するメリット

実は、フォントの色やサイズを変えるような装飾はHTMLでも可能です。では「どうしてCSSが必要なの？」「HTMLだけではだめなの？」と感じる方もいらっしゃるかもしれません。この疑問について、少しご説明しますね。

前回の記事で解説した通り、HTMLはWebページの情報を定義づけ（意味づけ）することが役割となっています。そのため、装飾をすることは本来の使い方ではありません。

本来の使い方ではない使い方をした場合、文章の情報構造が乱れてしまい、検索エンジンに上手く情報を理解してもらえない危険性があります。

また、HTMLだけでWebページの装飾部分までカバーしようとすると、ソースコードが膨大になり、情報の読み込み速度が低下してしまいます。一方、CSSを活用してWebページを装飾した場合の具体的なメリットには以下が挙げられます。

CSSには、CSS1、CSS2、CSS3という3つのバージョンがあります。

現在は最新版のCSS3が主流となっています。上述した「CSSのメリット」の中に記載している簡単なアニメーションの作成は、この「CSS3」で可能となっています。ここでは、CSSのバージョンは「CSS3」が主流であることを覚えていただければ大丈夫です。

これまで2回にわたってご説明してきたとおり、HTMLとCSSはセットで耳にすることが多い言葉ですが、それぞれに違った役割があります。

HTMLの役割は、Webページ内のテキスト情報を定義づけて構造化する、いわば「Webページの大枠・全体像」を作ることです。その一方で、CSSは、HTMLで作った大枠に対して「ページの見た目」を指定する役割を担っています。

また、HTMLは単体で使用して簡単なWebページを作ることが可能ではあるものの、できることが限られており、HTMLで装飾までカバーしようとすると、ソースコードが重くなり検索エンジンの読み込み速度が低下する要因となってしまいます。

つまり、整ったデザイン、かつ、スムーズな情報の読み込みが可能なWebページを制作する場合、HTMLとCSS両方の活用が必要となります。

いかがでしたか？今回は、Webページの制作や更新に関わる場合に1度は耳にする「CSS」について、それぞれの言葉の意味や、役割、必要性について解説しました。

「Webページの大枠・全体像」を作成するHTMLと、HTMLで作成したWebページを装飾するCSS。それぞれの役割に応じて両者を有効的に使用していくことで、魅力的なWebページを作成することができます。

次回はHTMLで使用するタグや記述の詳しい解説や、具体的な使い方について解説したいと思います。お楽しみに！

名古屋から愛知全域にて企業専門のホームページ制作をしています
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F（企画）＆9F（制作）

お電話でもホームページの制作相談ＯＫ： 052-890-7007
※ホームページ制作のお問い合わせフォーム（24時間365日受付）はコチラから
HP活用サポートだけでも大丈夫です。気軽にご相談・ご質問くださいませ。

株式会社WWG ブログ編集部

ライター O

WWGのブログ記事作成専門チームです。ホームページ制作やWEBに関することをはじめ、デザイン・コーディング・SEO・人材採用・ビジネス・地元についてのお役立ち情報やニュースを発信しています。