オーサリングツールから HTML 4.01 + CSS への移行 #02

オーサリングツールから HTML 4.01 + CSS の移行 #02

装飾的な要素・属性を削除したドキュメントを Web ブラウザで見た場合は、下記のように閲覧されるはずである。再度確認したい。

移行手順 #02

次に 2.文書構造の成型(前ページの移行手順を参照)を行う。

文書構造を成型

HTML 文書とは、閲覧時に環境により左右されないように「マークアップ（しるしをつけた)」してある文書を指す。本来の文書は、見出しがあり、段落の中に本文があり、内容によってはリストなどが存在する。ただ、先ほどの例を Web ブラウザを使用して閲覧した場合も、問題なく表示されるはずである。しかし、これらを文書構造的に正しく成型することにより、正しい文書を作成、ひいてはスタイルシートの適用が生きてくるのである。具体的に作業を行おう。

例を使用し作業を検証する

先ほどの作業途中のドキュメントを新しいウインドウで表示させる。Windows 上で起動する Internet Explorer であれば、Shift キーを押下しながらクリックすれば新しいウインドウで表示されるであろう。

見出しの成型

このドキュメントを閲覧した場合、まず気が付くのが、僕のホームページ作成日記とした部分は「表題」として見えるように文字を大きくし、色も目立つものにして以前使用していたのが、先ほどの作業により通常の段落 <p> に含まれたために他の段落と違いがなくなっている。前後の文脈を参照すると、これは文書の中で言うと見出しとした方が正しい。ということで、最初に登場する「僕のホームページ作成日記」を見出しの最初 1 番目とする要素<h1> でくくることにしよう。

僕のホームページ作成日記を見出し 1 にしたドキュメント

さらに、次に現れる「日付」も見出しのレベルとしては、見出し 1 の次に位置するから見出し 2 にする。ただ、このドキュメントの作者は、改行 <br> を 2 回用いて「日記本文」までの行をレイアウトしている。これを成型するには、まず「日付」の最初に存在する <p> を<h2> とし、<br> を削除した上で、</h2> とし閉じる。さらに、どの要素にも含まれなくなった「日記本文」を段落として定義する。具体的には、全ての <br> を削除した上で、「日記本文」全体を <p> と </p> で囲う。

日付を見出し 2 にしたドキュメント

これまで行った作業をここでおさらいしてみよう。

削除作業: 装飾的な要素・属性を削除した。
文書成型作業: 見出しとすべき段落を見出しに変更。見出しレベルに合わせた見出しの定義。改行レイアウトから、段落としての定義への変更。

Top

<Back Next> (現在作成中です)