Chapter08 Webページの基本構造

誰も教えてくれないページ制作の準備〜絵を描くだけで作業時間が爆速する方法〜 ちょっとブログ風に見出しをつけましたが、それぐらい注目して欲しい内容です。初めから効率の良い方法で作成しても、本当に作業時間が早くなったか実感できませんが、間違いなくミスは減っていきます。 CSSでレイアウトする前に必要な準備と、作業の流れについて理解するのが目的です。 CSSコーディングの作業フロー ワイヤーフレームやデザインカンプを元に、HTMLタグでレイアウトの図を作成 作成するレイアウトデザインをタグで考えます。この時にレイアウトで必要になる&lt;div&gt;やid名・クラス名も一緒に考えていきます。この作業をするとしないとでは、作業効率に大きな差が出ます。 HTMLに&lt;div&gt;、id・クラス名を追加 CSSの作業に入るための最終準備です リセット用のCSSファイルを&lt;link&gt;で参照する 異なるブラウザ間での表示の違いをなくすために必要です CSSファイルを新規作成・保存し、&lt;link&gt;で参照する 他のページでもデザインを共有するため、リンキングスタイルで作成します レイアウトに必要なCSSを記述し、作成する CSSの最初の作業は各ページの共通デザインとなる部分や、レイアウトから作成します ヘッダーから順にデザインを完成させる ミスを防ぐためにも、HTMLの記述順でCSSを作成していきます MasterCSSは、とにかくこまめにブラウザで表示チェックするのが安全です。どこでミスをしたのかがわかり、リカバリーしやすくなります。 レイアウトの図をダウンロード 猫カフェトップページの、レイアウトを考えて図にする作業ですが、あらかじめ用意してありますのでブラウザで確認するか、ダウンロードして使ってください。 レイアウトの図はここから Masterこの図を描くと描かないとでは、全然違います！絶対に描いた方がいい！ HTMLに&lt;div&gt;、id・クラス名をつける レイアウトの図を見ながら、HTMLの必要な箇所に&lt;div&gt;やid・クラス名をつけていきます。 &lt;section id=&quot;cont-1&quot;&gt; &lt;div&gt; &lt;h2&gt;同居中の猫ちゃんたち&lt;/h2&gt; &lt;dl&gt; &lt;div&gt; &lt;dt&gt;ブウくん 3歳&lt;/dt&gt; &lt;dd&gt;エキゾチックショートヘアー&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_1.jpg&quot; alt=&quot;ブウくんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;ワラビくん 3歳&lt;/dt&gt; &lt;dd&gt;シンガプーラ&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_2.jpg&quot; alt=&quot;ワラビくんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;キイくん 2歳&lt;/dt&gt; &lt;dd&gt;スコティッシュフォールド&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_3.jpg&quot; alt=&quot;キイくんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;ミイちゃん 2歳&lt;/dt&gt; &lt;dd&gt;スコティッシュフォールド&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_4.jpg&quot; alt=&quot;ミイちゃんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;/dl&gt; &lt;p&gt;お部屋によって、待っている猫ちゃんが違います。&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; Masterarticle部分はsectionに変更してください！ ワークフロー資料（PDF）

Chapter08 Webページの基本構造

Chap8-1 ページレイアウトの骨組み

Chap8-2 ページ本文の分類

Chap8-3 HTMLで実践

Chap8-4 ページレイアウトの準備