HTMLはホームページの基礎
HTMLはHyperText Markup Languageの略語で、ホームページの基礎となるものです。
具体的にどのようにHTMLが関与しているかというと、ホームページ内の各構成要素の意味を定義するために使われています。
HTMLを使って構成要素に意味の印をつけていくことを「マークアップ」といいます。
また、HTMLによる印そのもののことを「タグ」といい、例えば見出し・本文の例だと下記のようなタグづけをおこないます。
見出し
<h1>ここに見出しとして扱いたいテキストを入れる</h1>
本文の段落
<p>ここに本文の段落として扱いたいテキストを入れる</p>
このようにすることで、ホームページを表示するためのシステムが正しくページの意味・構成を理解できるようになります。
ただし、HTMLでタグづけしただけだと、ページにデザインは無い状態です。
ホームページにデザインを施すために必要になるのが、次に説明するCSSというものです。
ホームページのデザインにはCSSを使う
CSSはCascading Style Sheetsの略語で、ホームページにデザインを施すために必要となる技術です。
例えば「見出しは、文字サイズを大きくし、なおかつ背景色をつけて目立たせる」など意味づけとマッチしたデザイン表現を付与することが必要になります。
そのために必要になるのがCSSです。
例えば先ほど例に出した「見出しのタグづけに使う<h1>」の文字のサイズを大きく（40px）し、背景色をグレー（#F3F3F3）にするには、下記のようにCSSを記述します。
h1 {
font-size: 40px;
background-color: #F3F3F3;
ホームページをHTMLで作成する手順
- テキストエディタを用意する
- HTMLの基本となるタグを記述する
- 作りたいページ内容に応じてタグを記述する
- HTMLファイルとして保存する
- 作成したファイルをブラウザで表示してみる
- サーバーにアップロードする
- テキストエディタを用意する
はじめに、HTMLを書く場所を用意する必要があります。
それが、テキストエディタと呼ばれるツールです。
テキストエディタと聞くと難しそうなイメージを持つかもしれませんが、Windowsに標準的に備わっている「メモ帳」もテキストエディタの1つです。
そのため、以降の手順をメモ帳を使って進めていただいても構いません。
- HTMLの基本となるタグを記述する
まずはHTMLの基本になるいくつかのタグを記述します
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
</body>
</html>
それぞれの意味は下記の通りです。
<!DOCTYPE html> HTMLを記述する上で必須となる前置き。
<html></html> HTMLの文書の起点を表す記述。
<head></head> ページ上には表示されない裏側の設定を記述するエリア。
<meta charset=”utf-8″> 文字エンコードの指定。簡単に言うと文字化けを防ぐための記述。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
ページを様々な画面幅のデバイスでの表示に適応させるための記述。
<title></title> ページタイトルを指定するための記述。
<body></body> ページ上に実際に表示される要素を記述するエリア。
３，作りたいページ内容に応じてHTMLタグを記述する
基本的なタグの準備が済んだら、作りたいページの内容に応じてHTMLを追加していきましょう。
例えば、大見出しの後に文章と箇条書きが続くページを作成したいとします。
その場合、以下のようなHTMLを<body>と</body>の間に書きます。
前述したようにbodyはページ上に表示される要素を記述するエリアです。
<h1>h1はページの大見出しを表します</h1>
<p>pは文章の段落（paragraph）を表します。</p>
<ol>
<li>olは番号付きのリスト（ordered list）を表します</li>
<li>番号無しのリストにしたい場合は、ul（unordered list）を使います</li>
<li>li（listitem）はolやulの中でリスト内の項目を表します</li>
</ol>
このようにHTMLで構成要素の意味を定義できたら、CSSでデザインを当てていきます。
今回は、下記のようにしてみましょう。
大見出しの<h1>：
文字サイズを大きくして、文字の色と背景色を変えて、適度に余白をつける
箇条書きの<ol>：
枠線をつけて、適度に余白をつける
そのために、以下を<head>と</head>の間に入れてください。
<style type=”text/css”>
h1 {
font-size: 30px;
background-color: #00af3a;
color: #ffffff;
padding: 8px 14px;
}
ol {
border: 2px solid #F3F3F3;
padding: 14px 14px 14px 32px;
}
</style>
HTMLファイルとして保存する
ファイル名は「任意の半角英数字.html」としてください。.htmlの拡張子で使うことで、HTMLファイルとして保存できます。
作成したファイルをブラウザで表示してみる
HTMLファイルを保存したら、実際にページを表示させてみましょう。
index.htmlを、普段使用しているブラウザ（Google Chrome や Microsoft Edge、Safari など）で開きます。
すると、以下のようなページが表示されます。
サーバーにアップロードする
