HTMLとCSSの違いとは？Web制作初心者が覚えておきたいそれぞれの役割

htmlとcss。これらはwebの仕組みを学習するときに必ずセットで出てくる言語です。でも違いを尋ねられるとはっきりと答えられないという人は、Web制作初心者には意外とたくさんいるようです。今回の記事ではHTMLとCSSがどのようなものであるか、それらの違いや関係性についてご紹介しています。HTML、CSSの構文についても触れていますので、参考にしてみてください。

HTMLの役割とは

HTMLとは一言で表すと、Webページ内の文章構造を表す言語です。

Webページの枠組みさえ決定してしまえば、HTMLのみで簡単なWebページを作成することが可能です。

Webページの枠組みというのは、

「ここはタイトルです」
「ここは見出しです」
「ここはフッターです」
「ここは〇〇というページへのリンクです」

というどの部分が何を表しているかというものです。

しかしそれだけでは、黒文字のみで文字の大きさが若干違うだけの味気ないページになってしまいます。

更に、検索してそのようなページが現れても、大事な箇所や強調したい箇所が分かりづらいので、おそらく多くの人が離脱してしまうと予想されます。

CSSの役割とは

そこで、CSSの登場です。

CSSWebページ上で文章に装飾をするための言語です。

WebページはHTMLだけでも成り立つのですが、見やすく分かりやすいページにするためにはCSSをセットで使うことは必須になります。

例えば、タイトル、見出しは目立たせたいので、本文内の文章とはぱっと見で違いが分かる必要がありますから、背景をつけたり、文字を太くしたり、文字に色を付けたりといった装飾が必要です。

また、ヘッダーやフッターはメインのコンテンツとは異なる意味を持つを要素になるので、背景をがらりと変えて、違いをはっきりつけるなどの工夫があるとより見やすいページになります。

このように、CSSを使うことで文章構造を人間の目で見てより分かりやすくするための工夫を施すことが可能になるのです。

HTMLとCSSの違いと関係性

HTMLとCSSのそれぞれの役割については理解できたでしょうか。

大きな違いとしては1つ目に前述した役割、2つ目に構文の違いが挙げられます。

HTMLである程度サイト内の構造をつくり、CSSで色や形と言った見え方の部分をカスタマイズするといったイメージです。HTMLで形作ったものを、CSSで飾りつけをすると覚えておくとよいでしょう。

同じHTMLでもCSSでの装飾の仕方を変えることで、出来上がったページの印象を大きく変化させることも可能です。

構文の違い

構文というと難しく聞こえるかもしれませんが、HTMLやCSSをブラウザに正しく読んでもらうための文法です。

我々は数か所の誤字脱字であれば、あまり気にせず読むことができるかもしれませんが、HTMLやCSSは構文に関する記述が1文字でも間違えていると、ブラウザに正しく読み込んでもらうことができません。

HTMLもCSSも、タグと言われるものを構文内にあてはめていくだけなので、まずはそれぞれの構文をしっかり覚えておくことが重要です。

今回は分かりやすく、

1. 見出し2「HTML・CSSとは。」
2. 見出し3「HTML・CSSはマークアップ言語である」
3. 本文「HTMLは文章構造・CSSは装飾を表現するための言語です。」

の3つから構成された例文を記述していきます。

HTML構文

例文をHTML構文に当てはめていきます。

<h2>html・cssとは。</h2>
<h3>html・cssはマークアップ言語である</h3>
<p>htmlは文章構造・cssは装飾を表現するための言語です。</p>

これで見かけ上は下記のような状態になりました。ちなみに、行の冒頭の<>内がタグと呼ばれるものになりますが、基本的なものは使っているうちに覚えることができますので、はじめは入門書などを参照しながら使いましょう。

CSS構文

HTML構文だけでは色や文字の大きさのはっきりとした違いが分からないので、どこが見出しでどこが本文かを見ただけですぐに判断するのが難しいかと思います。そこで、今回は見出し2には背景を、見出し3には文字色を追加してみましょう。

このときにCSSを記述する方法はいくつかありますが、スタイルシートに記述していく方法が簡単なので、初めての方はスタイルシートを使ってみましょう。

h2 {
  background: #ffff00;
  font-size: 30px;
}

h3 {
  color: red;
  font-size: 20px;
}

このように見出しそれぞれに異なる装飾をすると、ブラウザ上には次のように表示されます。

HTMLとCSSの違いと役割を理解して自由にデザインを表現しよう

HTMLとCSSの大きな違いは

1. 役割の違い
2. 構文の違い

の2つです。

今回例に挙げた構文は基礎中の基礎になりますが、基礎をしっかり押さえなければ応用をしようとしたときに挫折してしまうことになりかねません。

素敵なデザインをブラウザ上で表現できるようになればweb制作を仕事にすることも可能です。

まずはHTML、CSSそれぞれの役割を理解して、簡単な構文を記述できるようになりましょう。