Table of Contents
前回のおさらい
前回は自己紹介のページを完成させました。
HTMLソースがかなり複雑になってきたので、どこでどんな処理を行っているかが分かりにくいですね。
「コメント」を使うと、HTMLソース内にメモ書きができるので、処理の説明などを書いてソースをわかりやすくできます。
コメントの書き方
コメントは <!– 〜 –> と書きます。
<!– と –> の間に書いた部分はHTMLとして認識されないので、どんなことを書いても大丈夫です。複数行書くこともできます。
前回作った自己紹介ページにコメントを使って説明を入れる例を以下に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介のページ</title>
</head>
<body>
<h1>私の自己紹介</h1>
<!--
自己紹介の項目は
1. プロフィール画像
2. 基本情報
3. 好きなもの・嫌いなもの
4. 一言
-->
<h2>プロフィール画像</h2>
<img src="images/profile.png">
<h2>基本情報</h2>
<!-- リストを作る -->
<ul>
<li>18歳</li>
<li>男性</li>
<li>東京在住</li>
</ul>
<h2>好きなもの・嫌いなもの</h2>
<!-- 4行4列のテーブル -->
<table>
<tr>
<th>項目</th><th>好き</th><th>嫌い</th>
</tr>
<tr>
<td>生き物</td><td>金魚</td><td>ムカデ</td>
</tr>
<tr>
<td>食べ物</td><td>ステーキ</td><td>なすび</td>
</tr>
<tr>
<td>飲み物</td><td>リンゴジュース</td><td>青汁</td>
</tr>
<tr>
<td>季節</td><td>夏</td><td>冬</td>
</tr>
</table>
<h2>一言</h2>
<!-- ここをもう少し内容を充実させたいかも -->
<p>はじめまして！<br>
私は家野ペイジと言います。<br>
私のことをみなさんに知っていただきたかったので、<br>
このホームページを作りました。</p>
<p>これから色々な情報を発信していきたいと考えています。<br>よろしくお願いします！</p>
</body>
</html>
ブラウザで見ても、表示される内容に全く変化がないことがわかると思います。
コメントを使った小技
今は使わないけれど、あとで使うかもしれないので消したくないタグがある場合、コメントを使うことで、HTMLソース内からは消さずにタグを一時的に無効化できます。
例を以下に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>コメントテスト</title>
</head>
<body>
<h1>テーブル</h1>
<table>
<tr>
<th>項目</th><th>好き</th><th>嫌い</th>
</tr>
<tr>
<td>生き物</td><td>金魚</td><td>ムカデ</td>
</tr>
<tr>
<td>食べ物</td><td>ステーキ</td><td>なすび</td>
</tr>
<tr>
<td>飲み物</td><td>リンゴジュース</td><td>青汁</td>
</tr>
<!-- この行は使わないかもしれない
<tr>
<td>季節</td><td>夏</td><td>冬</td>
</tr>
-->
</table>
</body>
</html>
コメントの注意点
コメントの中にコメントを書くことはできません。以下のように書いても、途中でコメントが終わってしまいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>コメントテスト</title>
</head>
<body>
<!--
<!-- コメントの中のコメント -->
これは表示されてしまう！
-->
</body>
</html>
おさらい
今回登場したタグについておさらいをしましょう。
- コメント <!– 〜 –> を使ってHTMLソース内にメモ書きができます。
- タグをコメントで囲めば、一時的にそのタグを無効化できます。
- コメントの中にコメントを書くことはできません。
次回は他のページに移動する「リンク」に関して説明します。