【HTML/CSS】ホームページの解析

ホームページの解析を通して、ホームページの作りを学びます。

アウトラインを見る

ホームページのアウトラインを確認するにはChromeのアドオンであるHTM5 Outlinerを使う。

HTML5 Outliner - Chrome ウェブストア

URLバー右端のHTML5 Outlinerのボタンを押して、ページのアウトラインを確認します。

例：AMD

例：Intel

この時にuntitledと表示されている見出しは、見出しの中にテキストが含まれていないか、見出しに画像を使っている。見出しを全て画像にしてしまうと、検索エンジンはアウトラインを解析できないので、少なくともh1にはテキストを含めることが大切。

CSSを無効化して、HTMLの構造を読み取る。

CSSを無効化して、HTMLの構造やCSSの使い方を確認する。
CSS無効化にはFireFoxのアドオンの「Web Developer」を使用する。

ブラウザレビュー：

CSS無効化プレビュー：

ソースを見る

ブラウザ上を右クリックで「ページのソースを表示」で、HTMLの構文やCSSの設定を見る事ができます。

ブロック要素を視覚化して、ページレイアウトを見る

FireFoxのアドオン「Web Developer」で、ブロック要素を視覚化してページレイアウトを確認する事ができます。
「Web Developer」から「アウトライン」メニュー、「ブロックレベル要素を枠で囲む」を選択するとブロック要素にボーダーがついて、どういうレイアウトになっているのか確認する事ができます。

右クリックから「要素を検証」で、ブロック要素のプロパティを確認する事ができ、マージンやパッディングの値を見る事ができます。

ワイヤーフレームを描きだす

ワイヤーフレームをIllustratorで描きだします。

Illustratorでフレームワークを描きだします。

1. ブラウザでページ全体をキャプチャーして、画像を保存。
2. Photoshopで余計な所をトリミングして、Web用に保存。
3. IllustratorでプロファイルをWEBを選択し、新規ファイルを作成する。
4. 「ファイル」メニューから、「配置」。先ほどの画像を選択しテンプレートにチェックしてOKを押す。
5. 新規レイヤーを選択し長方形ツールでヘッダー・コンテント・フッターなどのブロック要素を囲む。新しい要素を囲むときは新しいレイヤーを作ってから、長方形ツールで囲み、１レイヤーに１要素になるようにする。
6. 各長方形に色を塗り、ボーダーを非表示にする。
7. 「ファイル」メニューから「書き出し」、PSD形式で保存。保存するときは解像度をスクリーンでレイヤーを維持します。
8. Photoshopで先ほど書き出したファイルを読み込み、ルーラーをつかって、各レイヤーを囲みます。

参考：銀座松屋

↓