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