WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

前回の記事では、「今さら聞けない…HTMLとは？CSSとの違いをわかりやすく解説」の前編ということで、HTMLとは何かについて解説しました。そこで今回は後編ということで、CSSについて解説していきたいと思います。
前編の記事をまだご覧になっていない場合は、そちらからご覧いただくとより分かりやすいかと思いますので、ぜひチェックしてみてくださいね。

CSSとは

言葉の意味

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

CSSでできること

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

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

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

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

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

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

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

CSSのバージョンについて

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

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

HTMLとCSSの違い

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

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

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

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

まとめ

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

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

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