まずは基本をしっかりしよう!「HTML」と「CSS」の違い

違いのギモン

目覚ましい勢いでテクノロジーが進化している現代社会で、一度は自分の力でウェブページを作ってみたいと意気込んだ方もいるのではないでしょうか。

しかし、いざ自分でウェブページを作ろうと考えてみても、プログラミングのやり方がわからない、そもそも色々なプログラミング言語があるけど何から勉強したら良いかわからない、などとハードルが高いと思います。

ここでは、まずウェブページを作る上で必要不可欠な「HTML」と「CSS」の違いを簡単に解説していきたいと思います。

スポンサードリンク

結論:役割の違い

「HTML」はウェブページの枠組みを作成し、サイト内の情報整理をするために開発された言語です。

「CSS」はウェブページのデザインを指定するための言語です。

「HTML」とは


HTML とは HyperText Markup Language の略称です。簡潔にいうと、ウェブページの骨組みを作り、情報を整理するという役割を持ちます。例えばタイトルや見出しを設けたり、本文を入力したりするのも HTML 内で行われます。

その他にも、画像や音声のデータファイルのリンクを組み込むこともできます。その組み込まれた画像をクリックすることで別のページに移動させることもできます。様々なウェブサイトで見かける、ロゴマークをクリックすることでホーム画面に戻ることができる機能も、HTML で書かれたものなのです。

このように HTML は、ウェブページの土台を形作り、リンクを移動できるような機能を用いて情報同士を関連付けて情報を整理する役割を持つのです。

スポンサードリンク

「CSS」とは


CSS とは Cascading Style Sheets の略称です。主に、ウェブページのデザインを変更する役割を持ちます。そのため、CSS は HTML と組み合わせて使われることが多いのです。

例えば、文字のフォントのサイズや色、背景を変えたい場合、CSS を用いて行います。そのほかにも、文字に影をつけたり、下線部や二重線を引くこともできます。

注意点!

解説した通り、HTML と CSS のプログラミング言語にはそれぞれ異なった役割が与えられています。それにもかかわらず、 HTML を用いてデザインに変化をつけることも可能なのです。しかし、ウェブページ作成において、HTML で CSS の役割を担おうとしてはいけないのです。

なぜ可能なことをしてはいけないのか、その答えは HTML の元来の役割にあります。元々、HTML というのはウェブページに組み込みたい情報を他の情報と関連付けたり、情報の構造を定義することを目的に作られた言語なので、原則としてそれ以上の装飾は行ってはいけないのです。

確認テスト

次のような状況の場合、どの言語を用いるのが適切でしょうか。

  1. フォントの色を変えたい時
  2. 見出しを加えたい時
  3. 他のサイトに移動できるリンクを貼りたい時

答え:❶CSS ❷HTML ❸HTML

スポンサードリンク

まとめ

この記事では、HTMLとCSSの役割の違いについて簡単に解説しました。

  • HTML:主に、ウェブページの構造やサイト内の情報を関連づける役割を持つ言語
  • CSS:HTML で書かれた文字や背景を装飾するための言語

この二つの言語の役割を理解することで、ウェブサイトを作成するときに、どちらの言語も使いこなせるようになれると思います。ウェブページの構造を編集したいのか、その文章やウェブページの枠組みに装飾したいのかの違いに気をつけて使い分けをしましょう。

スポンサードリンク