整理された構成に抽出したテキストを流し込み、見出しをマークアップすると、新しいソースの概要は以下のようになります。Designning</h1>ヘッダー<div><div><h2>CurrentIssue</h2>コンテンツ1(最新号の紹介)</div><div>コンテンツ2(バックナンバー)</div><div>コンテンツ3(関連情報)</div></div>フッター</body>なんだか、変ですね。......そう、コンテンツ2・3の見出しが足りないのです。抽出したテキストには、グループ2・3の見出しが欠けているのです。Issue</h2>コンテンツ1(最新号の紹介)</div><div><h2>Information</h2>コンテンツ2(バックナンバー)</div><div><h2>Item</h2>コンテンツ3(関連情報)</div></div>フッター</body>これですっきりしましたね。元のデザインには存在しない見出しですから、再現案ではこれらの追加情報は非表示とします。原本のデザインではその見出しを表示する必要がないから表示しないのであって、最初からなくていいというわけではないことに注意してください。特定の視覚デザインに依存して情報の整理をサボると、リニューアルのときなどに困ります。利用することにします。原本で画像が用いられている箇所はそのまま画像を用いることとし、さらに文書型宣言などを添えて、以下のような文書が出来上がりました。Designing』は、Webデザインのためのアイデアから、ホームページ作成のためのテクニック、そしてサイト構築のための基礎知識までをカバーしたWebデザインのための専門誌です。Designing』は、Webデザインのためのアイデアから、ホームページ作成のためのテクニック、<br>そしてサイト構築のための基礎知識までをカバーしたWebデザインのための専門誌です。reserved.</li></ul></body></html>CSSによる表示結果の再現まずは完成したサンプルをご覧ください。別ウィンドウに開くと便利です。CSS「01」〜「wd」は再現案が完成するまでの途中経過を示します。デザインの作業過程を追いかけることができるというわけです。JavaScriptの実行が許可されたWindows版IE6では、画面右上にCSSを選択するセレクトボックスが出現します。NNやMozillaなどGecko系ブラウザでは、JavaScriptの実行が不許可の場合にも"表示→スタイル"からCSSを選択できます。Operaにおいても製作者の用意した代替スタイルを利用できます。詳細はOperaのマニュアルをご覧下さい。以下の解説では、再現案を別ウィンドウに開いていることを前提として話を進めてまいります。切替スクリプトが利用できる環境の方は、再現案の画面右上に表示されているセレクトボックスで「no-style」を選択してください。表示された状態を示しています。デフォルトスタイルだけが適用されています。ユーザスタイルシートをご利用になられている方は、キャプチャ画像とは異なる表示結果となっているはずです。ユーザモードをご利用の方は、以下の解説を読み進む際には、製作者モードをご利用になることをお勧めします。古いブラウザは代替スタイルシートに対応していませんから、再現案はブラウザのデフォルトスタイルで表示することしかできません。私は本稿において原本の完璧な再現を目指しません。概ねそれらしくなれば良しという方針を採ります。広報サイトにはプロ一流の微調整が無数に加えられており、スタイルの指定が非常に煩雑だからです。この大量のスタイル指定を追いかけることは、本連載の趣旨を外れます。同様に、角丸の枠線も再現を諦めます。本連載の第2回で、無理・無茶はしない方が良い、と繰り返し説明しました。自然な使い方をするとき、最も力を発揮するのであります。私は再現案作成のために多少の手間は厭いませんが、どこまで徹底するかは考えどころです。1.全体を調整する代替スタイル「01」を選択してください。vertical-align:bottom;}a:link,a:visited,a:active,a:hover{color:#03c;}a:hover{text-decoration:underline;}難しいことは何もしていません。手順はいつも通りです。要素にグレーの背景を指定。要素に枠線を指定しました。枠線も同じスタイルなので、まとめて指定しておきます。