BODY部の書き方 - 情報サイト WIZ

HTMLの書き方 BODY

構造から書いて行け！

HTMLの構造

HTMLの規約によれば、BODY部は段落の集まりです。HTMLの文はいずれかの段落の中に入っていなければなりません。
普通は、段落の集まりを章とし、章ごとに見出しをつけます。
つまり、BODY部の構造は　ページ　＞　章　＞　段落　＞　文　となります。

構造は内容に優先する

WEB原理主義の第一教義は「構造はHTMLで！」となっています。
構造とは文書の構造＝コンテクストのことです。個々の文も大事ではありますが、WEBのようにさまざまな種類の文書が混在する世界では、内容以上にその文書がどのような構造で組み立てられているのかが重要です。ページを理解するには、文を最初から読んでいくのではなく、ページ全体の構成を把握することが肝心です。HTMLとはWEB上の文書の構造を記述する言語なのです。
始めに文から書き始め、後でその文がどの章の、どの段落に所属しているかを考える　などという書き方はHTMLの書法ではありません。まず文書の構造を考え、章の構成を考え、章見出しをつけ、段落の概要を決め、最後に文を書き出します。

構造を書く

標準的なBODY部のソース

WEB原理主義にもとづいて書かれたBODY部のサンプルです。

<body>
<h1>ページタイトル</h1>
<h2>第１章　　見出し</h2>
<h3>第１段落　見出し</h3>
<p>
第１段落
</p>
<h3>第２段落　見出し</h3>
<p>
第２段落
</p>
<h2>第２章　　見出し</h2>
<h3>第１段落　見出し</h3>
<p>
第１段落
</p>
<div class="history">
更新履歴
2001. 8. 9　第一刷第一版　作成
</div>
<address>
Copyright(C) <a href="http://www.isl-net.com/" alt="情報戦略研究所ホームページ">Imformation Starategy Laboratory</a> S.S
mail : <a href="mailto:[email protected]" alt="佐藤にメール">[email protected]</a> </address>
</body>

このパターンに従ってHTMLを記述していきます。

見出しをつける

ページタイトルをつけます。必ずしもHEAD部のタイトルと一致している必要はないと思いますが、ページの内容がわかるようなタイトルをつけましょう。

章ごとのタイトルをつけます。どのような章の構成にするを決めてからタイトルをつけることになります。この段階でページの構成がほぼ決まります。

段落の概要をイメージする

段落の始めは<p>、終わりは</p>となります。テーブルやリストの場合はpタグは書きません。段落がどのような内容になるか、おおよそのイメージをつかんでおきます。

最後に文を書く

ページにタイトルがつき、章見出しが入ると、全体の構造がはっきりしてきます。段落ごとのイメージを上から組み合わせて論旨の流れが自然かどうか、最終チェックします。

全体の構成に問題がなければ、いよいよ文を書き始めます。このとき構造がシッカリしていれば、最初から書く必要はありません。重要な部分から書き出し、導入部を最後に書くこともできます。特に時間の制約がある場合は、重要点から書き出したほうが破綻が少なくなります。

文書製造技術　再考

文書を書くな！　製造しろ！

昨年８月の講習で「文書製造技術」を取り上げ、文書は(仕事文は)書こうとすると書けない、文書は製造するものだ　という話しをしました。明快・簡潔・正確な文章を書く場合には、思いつくままに文を書き連ねるのではなく、システムを製造するときのように、設計が必要であり、設計にもとづいて文を製造していけば、わかりやすく、目的にかなった文章が書けるようになるという論旨でした。このことはHTMLも当てはまります。むしろ文書全体を見渡しにくいWEBだからこそ、文書製造技術が必要になるといえます。そこで昨年の講習内容を再確認しておきます。

基本計画

何のために文書を作るのか？をシッカリと把握するフェーズです。
ここで文書の目的をハッキリさせておかないと、後のフェーズがピンぼけとなり、文書自体が意味をなさなくなります。文書の目的がハッキリすれば、構造も自ずから見えてくるものです。

概要設計

文書の大まかな構造を決めるフェーズです。書くべき内容を吟味し、その流れを考えます。
重点事項が明らかになるように、ブロック＝章や段落の並びを考えます。
いわば文書の背骨を作る段階です。

HTMLでは章の構成を決定し、章見出しを書いて行きます。

詳細設計

文書の構造を決める段階です。背骨に他の骨格を付加し、全体の構造を組み上げます。ブロックの主体となる文を考え、主体文のつながりを確認していきます。

HTMLでは段落の概要を考え、段落の主体となる文から、章のごとの構造を決めていきます。

製造

文を書きます。全体の構造に従い、論旨が一貫するように記述していきます。
段落が長くなった場合は、分割したほうがよいこともありますが、その場合も全体の構造を乱さないように注意します。

WEB文書考

ナビゲーション

迷子をださないためのナビゲーションが迷子を産みだしている。ナビゲーションの保守に時間がかかる。更新がナビゲーションに反映されていない。
サイトが大きくなると全体のナビゲーションを入れることは非効率。ページのまとまり＝ブロックごとにブロック内のナビを入れ、トップではブロックへのナビを入れる。あるいは、サイトマップを充実させ、全ページからリンクする？
次ページ、前ページナビは必要か？
ページの呼び名　トップページ・次のページ・前のページ・最初のページ・最後のページ・目次ページ・索引ページ

画面サイズ

かつて平均的な受信側のモニタ解像度は　640×480であると言われたが、現在では10%以下、800×600が50％以上、1024×768も30％弱いる。
しかし、だからと言って画面サイズを大きくしすぎてはいけない。誰もが全画面表示で見ているわけではないし、ブックマークが表示されているかもしれない。
画面を特定のサイズに固定するためにテーブルを使ってコンテンツ全体を囲むなどとはもってのほかである。印刷時に右端が切れるかもしれないし、表示も遅くなってしまう。画面サイズの小さいユーザにスクロールを強いることになる。画面サイズはユーザの好みに任せること。サイズを小さくされたからといって、理解できないようなページは作らないこと。

署名

WEB上の文書には全ページに署名を入れること。読む人が必ずトップページから入ってくるとは限らない。検索エンジンで途中のページを読むこともある。
普通はホームページのURLとメールアドレス

<address> Copyright(C) <a href="http://www.isl-net.com/" alt="情報戦略研究所ホームページ">Imformation Starategy Laboratory</a> S.S
mail : <a href="mailto:[email protected]" alt="佐藤にメール">[email protected]</a> </address>

更新履歴

更新履歴はキチンと入れておくこと。更新されていないページは価値がない。

イメージ

GIFは使用しない。PNGまたはJPG
代替テキスト情報を必ず入れる。それもわかりやすい説明を入れる。
表示速くするため、極力表示サイズを入れる。表示サイズを入れると読み込み中のテキストの再表示もなくなる。

<img src="mountain.png" width="300" height="200" alt="青木湖に映った白馬三山">

アイコン等で代替テキスト情報が入れにくい時は alt="・"　飾り線は alt="-----------"とするとテキストブラウザでも見やすくなる。

テーブル

テーブルによるレイアウトの是非

是々非々、複雑なテーブルは避けること

フォーム内のテーブル

容認

表示に時間のかかるテーブル

ブラウザは、テーブルの全データを読み込んだ後で、セルの大きさを決めてテーブルを表示している。テーブルの組み合わせが複雑になればなるほど、テーブル内のコンテンツが多くなればなるほど、表示に時間がかかる。特にイメージデータは最後まで読み込まれないので要注意。コンテンツ全体をテーブルで囲むと全コンテンツを読み込むまで表示できない。
<table width=300 border=1 style="table-layout:fixed">で固定する

改行

改行のコントロールは最低限に留め、ここでは絶対改行が必要だ！というところにのみ使用する。改行のコントロールはユーザの画面サイズによっては読みにくくなり、裏目にでることが多い。
brタグの繰り返しによる複数改行はHTMLの規約違反

更新履歴
2001. 8. 9　第一刷第一版　作成
2001.12. 4　Another HTML-lintで満点がもらえるよう修正