見出しと段落
＞HPの作り方TOP ＞メニューとコンテンツの作成
ここまででサイトの概観はほぼ完成ですが、なんか見栄えが悪くないですか？
サイトの見栄えを整えていく前に、基本的な文の構造について学びましょう。参考にすべきは新聞です。
新聞は
|
見出し 要約 小見出し 説明文 小見出し 説明文 発行元 |
のような構造で文章が書かれていますが、これはウェブサイトを作るときにも当てはまります。
「こんなめんどくさいことしなくても別にいいよ。」という人もいるかと思いますが、これは書き手の問題というよりも、読み手と、その情報を拾っていく検索エンジンのクローラー がわかりやすいと思うかわかりにくいと思うかの問題です。
googleやyahooで検索したときにトップに表示されるようなサイトの全てがこの文の構造を守って記述していると思います。
|
<h1>見出し</h1> <p>要約</p> <h2>小見出し</h2> <p>説明文</p> <h2>小見出し</h2> <p>説明文</p> <address>発行元</address> |
<h1>は大見出しであることを伝えるタグで、一つのページに1度しか使うことが出来ません。h2,h3,h4...h6というようにhの後の文字が増えるごとに見出しの重要度が下がっていく 上、デフォルト設定での文字の大きさや太さが小さく、細くなっていきます（h2～h6までは何度でも使用可能です）。
<p>は段落を示すタグですので<h○>のあとに通常記述します。<address>は先に出てきたとおり著作権情報や発行元情報を記述するタグです。
最初は早く作りたいという気持ちが先走って文の構造にまで注意がいかないこともしばしばですが、pのあとにh1が記述されたり、h2のあとにh1だったり順番をばらばらにしてしまうことだけは 避けてください。
サンプルにこの構造を適用してみますと、大体は以下のようになります。
|
<h1>ロゴの画像</h1> <p>メニュー1</p> <p>メニュー2</p> <h2>■Lesson1</h2> <p>Lesson1ではSample1を用いたHPの作成方法を解説しています。</p> <address>Copyright(C) ○○○ all right reserved.</address> |
メニュー1やメニュー2はどのページにも表示させる部分なので、見出しは付けずにpで記述します（普通はliですけど最初はpでok）。
改行の見出しや段落の設定をすれば自動的に改行されるので、改行タグbrは消してしまいます。そして、先ほどのサンプルにhとpタグを追加してみますと、 下のようになります。
|
<table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2"> <h1><img src="gif/4.gif" alt="sample page" width="150" /></h1> </td> </tr> <tr> <td colspan="2"> <p>｜ Sample1 ｜ Sample2 ｜ Sample3 ｜</p> </td> </tr> <tr> <td> <p><img src="gif/6.gif" alt="menu" width="40" /></p> <p>・Lesson1</p> <p>・Lesson2</p> <p>・Lesson3</p> </td> <td> <img src="gif/5.gif" alt="" width="100" /> <h2>■Lesson1</h2> <p> Lesson1ではSample1を用いたHPの作成方法を解説しています。 </p> </td> </tr> <tr> <td colspan="2"> <address>Copyright(C) ○○○ all right reserved.</address> </td> </tr> </table> |