HTMLとCSSの役割

Webサイトを作るには、HTMLファイルを作成しなければなりません。デザインなどは気にせずに文字だけをブラウザに表示させたいのあれば、最低1つのHTMLファイルを用意することで目的は達成されます。しかし、多くのWebページでは文字の大きさや色、背景色などを変更し独自のデザインを作成しています。そのために必要なのがCSSファイルとなります。

HTMLファイル

Web制作に馴染みのない人がHTMLファイルと聞くと特別なファイルのように感じてしまうかもしれません。しかし、その実体はただのテキストファイルでしかありません。作成したテキストファイルの拡張子を「.html」としたものがHTMLファイルなのです。試しにメモ帳などで適当な文字を入力したテキストファイルを作成し、その拡張子を「.html」にした後にブラウザで表示してみてください。ブラウザはHTMLとしてファイルを読み込みテキストの内容を表示してくれます。

ただし、文字を入力しただけではHTMLとしては不十分です。実際にHTMLファイルを作成するタグというものを使って文章の構造を指定します。例として、簡単なWebサイトの構造を示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>ページのタイトル</h1>
    <p>ここに文章を入れます</p>
  </body>
</html>

DOCTYPE宣言

1行目に記述されている<!DOCTYPE html>はDOCTYPE宣言と呼ばれるもので、「この文章をHTMLです」と宣言するためのものです。

以前はここに『<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">』などのように、HTMLのバージョンや種類などを記入していました。しかし、現在の主流なバージョンとなっているHTML5では、上記のようにとてもシンプルな宣言となっています。

DOCTYPE宣言がシンプルになった理由としては、以前のバージョンのHTMLではSGML(Standard Generalized Markup Language)にもとづいて作られた言語であったのに対して、HTML5からは以前と同じ構文でもSGMLとして扱われなくなったことが挙げられます。これらのことは専門的になってしまうので省略しますが、HTMLファイルを作成するときは、「とにかく最初にDOCTYPE宣言を記述する!」それだけは頭に入れておいてください。

なお、DOCTYPE宣言は実は記入しなくてもブラウザでHTMLとして表示されてしまいます。しかし、このとき多くのブラウザでは互換モードで表示され、以前のテーブルレイアウト時代の古い表示モードとなってしまいます。そのため、Webページのレイアウトによってはデザインが崩れてしまうこともあるので、絶対にDOCTYPE宣言は忘れないようにしてください!

html要素

DOCTYPE宣言のすぐ後にあるのがhtml要素です。

2行目の<html lang=”ja”>が開始タグ、11行目の</html>が終了タグとなりHTMLのすべての要素はこの中に記述します。また、HTMLでは多くのタグはこのhtml要素のように開始タグと終了タグを持っており、その間に文章などを入力するようになっています。

なお、html要素はルート要素と呼ばれることもあります。

head要素

HTML文章に中にはhead要素を1つ入れます。上の例では3〜6行目の<head>〜</head>の部分がhead要素となります。

head要素の中には、このHTML文章の情報を記述します。例えば、上の例では<title>〜</title>でこの文章のタイトルを示しています。他にもここには文章の概要や著作者、文字コードなどのメタ情報を記述したり、CSSやJavaScriptなどを使用する場合はそのファイルの場所を示したりもします。

head要素の中身はブラウザには直接表示されないのでWebサイトの閲覧者にはあまり意識されません。しかし、ここに記述された内容はブラウザや検索エンジンに文章の情報を伝えるためにとても重要なものとなっています。

body要素

head要素と同様に、HTML文章のなかにはbody要素を1つだけ入れます。head要素に記述した内容はブラウザには表示されませんが、それとは対照的にbody要素の中身は基本的にはすべてブラウザに表示されます。(ただし、CSSやJavaScriptなどで意図的に表示を隠すこともあります)

また、ここには文章のほかに画像や動画、音声なども入れることができます。

CSSファイル

CSSファイルもHTMLファイルと同様に、その実態は拡張子を「.css」としただけの、ただのテキストファイルです。ただしHTMLファイルとは違い、人間が読んでも意味不明な文章となっています。まずは、CSSファイルの簡単な例を見てください。

@charset "UTF-8";
h1 {
  color: red;
  font-size: 28px;
}
p {
  color: black;
  font-size: 18px;
}

この例では、まず1行目の「@charset」でこのCSSファイルの文章は文字コードが「UTF-8」であることを指定しています。

そして、2〜5行目の「h1 { … }」で囲まれた部分では、HTML文章のh1タグで囲まれた部分のスタイルの指定をしています。

具体的には次のように指定しています。

  • 文字色は赤色(color: red;)
  • フォントサイズは28px(font-size: 28px;)

同様に6〜9行目の「p { … }」で囲まれた部分では、HTML文章のpタグで囲んだ部分のスタイルを指定しています。

  • 文字色は黒(color: black;)
  • フォントサイズは18px(font-size: 18px;)

HTMLとCSSの役割

これらのようにHTMLとCSSでは、その役割ははっきりと分かれています。HTMLでは文章そのもの、そしてその論理構造を定義し、CSSでは文章の見た目を整えたり独自のデザインとするための装飾方法が定義されています。

検索

MENU

サンプルコード集

Webの基礎知識

coming soon…

  • コンテンツ制作中
PAGE TOP