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