前回の復習

▲ ▼

前回の内容

HTML(Hyper Text Markup Language)を使った、 Webページの作成をはじめました。

まず、次のような概念を説明しました。

次に、HTMLを使ったWebページの作成として、タグ（文書の構造を示すマーク）をいくつか使ってみました。

HTMLファイルの「骨組み」をつくる（html, head, title, body）
「見出し」をつくる（h1, h2, h3, h4, h5, h6）
「段落」と「改行」をつくる（p, br）
「リンク」をつくる（hr）
「水平線」をつくる（a href）

▲ ▼

前回のポイント

提出された課題を見て、いくつか気になるポイントがありました。自分が提出した課題をチェックしてみましょう。

▲ ▼

(1) 文書の構造がわかりやすいですか？

「h1、h2」や「p」などの要素を上手く使い分けていますか？
HTMLでは、タグを使うことで、文書の構造（かたち）を表現します。「（大きな）見出し」「（小さな）見出し」「段落」など、人間ならとくに意識しなくても区別できるものを、コンピュータにも区別できるようにするのです。

文書の構造がコンピュータにわかるようになると、文書中のどの情報が重要なのか、「情報の優先順位（プライオリティ）」をコンピュータが判断できるようになります。このような技術は「検索サイト」でよく用いられており、検索結果で上位に表示されるためには重要になります。

▲ ▼

(2) 見出しをきちんと使えていますか？

「h1」要素は、本来、1回だけ使うものなので注意してください。
「h1」は最も大きな（重要な）見出しです。本でいえばタイトルにあたります。その大きな見出しが、2回以上使われている場合があります。

▲ ▼

(3) 文字を大きくするために見出しを使ってませんか？

「h1, h2, h3」要素は、「見出し」という構成要素をあらわしているものです。文字の大きさを変えるために使ってはいけません。
「h1→h2→h3…」の順に、見出しの優先順位があり、h1は最も大きなレベルの見出しとなります。次のように、レベルの順番を入れ替えて使うようなことは、できるだけ避けましょう。ただし、「h1→h3…」のように、途中の見出し要素を飛ばすのは、問題ないでしょう。

<h1>自己紹介</h1>
<h4>プロフィール</h4>
<h2>リンク集</h2>

▲ ▼

(4) 段落をきちんと使えていますか？

段落を示す「p」要素の使い方は、ちょっと難しいかもしれません。

段落とは、その中に伝えたい内容を一つだけ書くものです。文章が1つだけの場合もあれば複数ある場合もあります。ある程度まとまった文章を書いたら、「p」要素で段落にしておきましょう。

また、「p」要素を忘れている場合もあります。見出しなのか段落なのかわからなくなりますから、忘れずに段落に指定しておきましょう。

▲ ▼

(5) へんな入れ子になっていませんか？

次のように、見出しの中に段落を指定したりしていませんか？「見出し」と「段落」は、文書を構成する部品として、同等のものです。タグの使い方には注意しましょう。

<h3>
  見出し
  <p>
    あいうえおかきくけこ…
    ……
  </p>
</h3>

▲ ▼

(6) リンクに使う文字は、具体的ですか？

前回の課題ではとくに指示はしませんでしたが、リンクを作るときに、そのリンクに使う文章はとても重要です。リンク先の内容がわかるような、具体的な文章にしましょう。
よく使われる表現には、次のようなものがあります。

ページの役割
- 例: トップページ、ヘルプ
リンク先のページのタイトル
- 例: 日付の表記に関するノート
リンク先のページのタイトル + サイトの名前
- 例: 日付の表記に関するノート(The Web KANZAKI)

KAWANO's PukiWiki Plus! - 前回の復習