サイトを作ろう HTML

はじめに
HTMLの基本的な書式
1. タグについて
2. HTMLの書式について
  1. タグの記述は半角で
  2. インデント
最後に

はじめに

HTMLは難しくありません。以下には教科書的にまとめていますが、以下の10種類ほどのタグを覚えるだけで簡単なWebサイトを作成することができます。全部読むのがめんどくさい方は以下をぜひご覧になってみてください。

まずは試しに作成してみましょう。

エディタ（メモ帳など）に以下をコピペして拡張子「.html」で保存しhtmlファイルの完成です。

<HTML>
<head>
<title>タイトル</title>
</head>
<body>
<h1>サイトの見出し</h1>
<p class="Paragraph">サイトの本文</p>
</body>
</HTML>

保存したhtmlファイルをダブルクリックして実際にどのように表示されるか確認しましょう。

今はシンプルすぎる画面ですが、ここからタグを追加していって、自分好みのオリジナルサイトを作成しましょう。

HTMLの基本的な書式

HTMLを作成するために必要な基本的なタグについて学習していきます。

タグについて

上記で例に挙げたHTMLについてみていきます。

HTMLタグとは、<HTML>や<head>などの（<）と（>）に囲まれた部分のことを言います。
タグには<HTML>や<head>などの開始タグと</HTML>や</head>などの終了タグで構成されています。
<>の中に書かれているHTMLやheadなどをタグ名といいます。<h1>サイトの見出し</h1>のタグで囲まれた「サイトの見出し」はh1の要素の文字であることを示しています。
適切なタグを選択してコンテンツを囲み、そのコンテンツに意味付けをしていきます。

よく使用するHTMLタグ一覧

属性

タグに情報を付け加えるのが属性です。属性は必ず付くわけではなく、1つもつかないタグもあれば複数付くタグがあります。

<p class=”Paragraph”>サイトの本文</p>

上記では<p>タグにclass属性を設定しています。
属性を付ける際には属性値を設定する必要があります。<p>タグにclass属性を追加して属性値を「Paragraph」にしています。

属性と属性値はイコール（=）でつなげて書きます。属性値はダブルクォート（”）で囲むことを忘れないように注意しましょう。

コンテンツ

開始タグと終了タグに囲まれた部分のことをコンテンツといいます。

<h1>サイトの見出し</h1>

上記の「サイトの見出し」の部分がコンテンツです。HTMLファイルやWebブラウザが開いたときに実際に画面に表示されるのはこのコンテンツの部分です。

コンテンツには「サイトの見出し」の文字だけでなく、タグもコンテンツに含まれることがあります。
（タグ自体は画面には表示されません）

HTMLの書式について

ここからは実際に書いていく際に注意する点を学習していきます。

タグの記述は半角で

開始タグ、終了タグ、タグ名、属性などのコンテンツ以外の部分はすべて半角文字で記載します。
またタグ名と属性の間、複数の属性がある場合の属性と属性の間は半角スペースで区切ります。全角スペースを入力しないように注意しましょう。

コンテンツ部分は半角の「<」、「>」以外であれば、表示したい文字を記載することが可能です。
「<」、「>」を表示したい場合は、文字実体参照（記号を表す文字や数字）を記載します。

表示	文字実体	数値文字	表示	文字実体	数値実体
<	<	<	>	>	>
&	&	&	“	"	"
©	©	©	®	®	®
™	&trade	&8482	改行しないスペース

よく使用する文字実体参照の一例

インデント

HTMLを記載する際にインデント（字下げ）を行いHTMLを読みやすく整理しましょう。

<HTML> 
<head> 
<title>タイトル</title>
</head> 
<body> 
<h1>サイトの見出し</h1> 
<p class="Paragraph">サイトの本文</p> 
</body> 
</HTML>

上記をインデントを付けて読みやすくしましょう。

<HTML> 
    <head> 
        <title>タイトル</title>
     </head> 
    <body> 
        <h1>サイトの見出し</h1> 
        <p class="Paragraph">サイトの本文</p> 
    </body> 
</HTML>

どのタグにどのタグが要素として含まれているかわかりやすく整理できます。
インデントをしても表示される内容が変化することはありませんので、読みやすくインデントを付けるようにしましょう。

最後に

HTMLの基本はこれだけです。あとは適切なタグを使って、自分だけのサイトを作成していきましょう。
初めは文法の間違いなどをしてしまうかもしれませんが、htmlファイルは何度でも修正できるので心配いりません。たくさん作成して慣れていくことが大切です。