ぼくのWEBあしあと

WEB制作勉強中michyの日記。「コーディング」や「CMS(wordpress、MovableType)によるサイト構築」、「SEO」などの話題を中心に。

  • フィード
  • サイトマップ
検索キーワード

第1回 コーディングの基礎 「ラフをぶったぎってidを見極める」

  • 2008年10月12日
  • WEB

以前、このサイトをサンプルにコーディングをするというシリーズが「コーディングの前の準備」、「ベースHTML&CSSでコーディング」とありました。しかし一見単純なデザインに見えて、実は背景の作りがけっこう複雑なのでもう少し簡単な構造のデザインをコーディングしてみましょう。

サンプルラフ
新たに簡単なデザインラフを用意しました。(本来であれば、先にワイヤーフレームがあって、それに基づいてデザインラフが出てくるものですが、私のようなコーダーはデザインラフを受け取ります。)

ワイヤーフレーム1
ラフをぶつ切りにしていきましょう。まず、ヘッダーとコンテンツとフッターを見極めます。これはさすがにわかりやすーーーですね。さらに中へ中へとグループを見極めていきます。ヘッダーとフッターは大変簡単な構造になっているので省略します。

ワイヤーフレーム2
コンテンツ部分は左部分と右部分(実際内容を表示する)に分かれています。今回は、左部分を「sidebar(サイドバー)」、右部分を「contents_inner(内容の中身)」と呼ぶことにします。これを後にdivなどのidとして使用しますので結構重要です。

ワイヤーフレーム3
さらに細かく見ていくと、サイドバーは2つに分かれます。上部を「gloval_navi(グローバルナビ)」、下部を「banner(バナー)」と呼ぶことにします。ココまで来ると最小単位にあとわずかとなりました。gloval_navi、bannerの中の各要素をリストにすれば、divで囲う必要はありません。というよりも同じ項目がいくつも並んでいるメニューリストなので、<li>を使用することが正しいコーディングとなります。コレについては別の機会に詳しくご紹介いたします。

次回は10月15日(水)に、第2回 コーディングの基礎 「正しいコーディングreset.cssで下ごしらえ」をお届けします。

Comment

本文

このページの先頭へ戻る