トップ » 参考資料・TIPS集 » TIPS » CSS講座 » CSS基礎講座　CSSで楽しよう！vol.5　レイアウト編

CSS基礎講座　CSSで楽しよう！vol.5　レイアウト編

～レイアウトしてみよう！float攻略！

印刷用ページを表示する

関連タグ

( 2008/6/2　グリニッジ有限会社　金井佳子　)

しっかりと下準備が出来た所で、今度は細かい設定の前に、大まかなレイアウトを決めてしまいましょう。
今回使用するのはfloatというプロパティです。苦手だと思われる方も多い、段組に挑戦です。

vol.2　作業の流れ編で作ったHTMLを整形し、これにスタイル指定を行う事にします。まずはこちらを用意して下さい！

PLAIN TEXT
CODE:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
  5. <title>商品ページサンプル</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9.     <img src="cup.jpg" alt="シンプルカップ" />
  10.     <img src="cup2.jpg" alt="シンプルカップ2" />
  11.     <img src="h2_text.gif" alt="気が付けばいつもコレ・・なんでかな？" />
  12.     <h3>シンプル・イズ・ザ・ベスト♪</h3>
  13.     <p>
  14.         シンプルな真っ白のコーヒーカップは、朝食の食卓にも、リビングでゆっくり
  15.         読書をする時もしっくりマッチ。
  16.         丸っこい可愛いフォルムは、見る人を癒します。
  17.     </p>   
  18.     <h3>可愛いだけじゃない、優れもの！</h3>
  19.     <p>
  20.         しかし、この形、実は「持ちやすさ」と「飲みやすさ」を考えつくしたメーカーの出した
  21.         最善の答えだったのです。
  22.         可愛いだけじゃない、この機能性。うんちく好きにもピッタリ！？
  23.     </p>   
  24.     <h3>プレゼントにも！</h3>
  25.     <p>
  26.         シンプルで飽きのこないデザインだから、プレゼントにも最適。
  27.         余計なデザインがないから、年齢問わず気に入っていただけそう♪
  28.         勿論、ご夫婦やカップルでさりげなくおそろい！なんて、いうのも可愛い！
  29.     </p>
  30.     <table>
  31.     <caption>スペック</caption>
  32.         <tr><th>素材:</th><td>磁器</td></tr>
  33.         <tr><th>カラー:</th><td>ホワイト</td></tr>
  34.         <tr><th>直径:</th><td>10cm</td></tr>
  35.         <tr><th>高さ:</th><td>10cm</td></tr>
  36.     </table>   
  37. </body>
  38. </html>

設計図を作ろう！

さて、vol.2の作業の流れ編で、完成図を考えました。
完成図

次は、これをどうやってコーディングするのか、設計図を作りましょう。これがあれば、コーディングに迷いが出ませんし、レイアウトなど、特に全体を把握する必要がある部分にはとても役立ちます。（この設計図の事をワイヤーフレームと呼びます。）

完成図をもう一度見てみると、左に写真、右に文章となっています。全体の幅は、写真部分プラス文章部分で550pxとして作成しています。

写真の幅は210pxで作成しましたので、widthは210px。右の文章部分は、550-210で340px。写真と文章の間に余白として10px入れるので、widthは330pxとなります。

以上の事から設計図はこうなります。

設計図.gif

左に領域を一つ、右に領域を一つ、この二つを囲む様に、大きな領域を一つという設計図になりましたね。この領域は何を表しているのかという言うと、何度も出てきた「ボックス」です。

ボックスとは、ブロック要素やインライン要素の領域の事で、余白と枠線を持つ四角形の事でした（vol.3参照）さて、この領域、どんなタグ付けをすれば適当でしょうか。

ここでは、<div>というタグを使います。

<div>というタグは、特に意味を持たない珍しいタグです。強いて言うなら「ここから」でしょうか。

「ここからここまでを、まとめてセンタリングしたい」等という時に使います。スタイルシートを適用するためのタグと考えて良いでしょう。（同じようなタグに<span>があります。こちらは、インライン要素です。）

タグが決まった所で、設計図に基づいて、「領域」を作成してしまいましょう。

PLAIN TEXT
CODE:
  1. <!-- 一番大きな外側の領域 -->
  2. <div>   
  3.     <!-- 左の領域 -->
  4.     <div>
  5.         <img src="cup.jpg" alt="シンプルカップ" />
  6.         <img src="cup2.jpg" alt="シンプルカップ2" />
  7.     </div>
  8.     <!-- 左の領域おわり -->
  9.     <!-- 右の領域 -->
  10.     <div>
  11.         <img src="h2_text.gif" alt="気が付けばいつもコレ・・なんでかな？" /> 
  12.         <h3>シンプル・イズ・ザ・ベスト♪</h3>
  13.         <p>
  14.             シンプルな真っ白のコーヒーカップは、朝食の食卓にも、リビングでゆっくり
  15.             読書をする時もしっくりマッチ。
  16.             丸っこい可愛いフォルムは、見る人を癒します。
  17.         </p>       
  18.         <h3>可愛いだけじゃない、優れもの！</h3>
  19.         <p>
  20.             しかし、この形、実は「持ちやすさ」と「飲みやすさ」を考えつくしたメーカーの出した
  21.             最善の答えだったのです。
  22.             可愛いだけじゃない、この機能性。うんちく好きにもピッタリ！？
  23.         </p>       
  24.         <h3>プレゼントにも！</h3>
  25.         <p>
  26.             シンプルで飽きのこないデザインだから、プレゼントにも最適。
  27.             余計なデザインがないから、年齢問わず気に入っていただけそう♪
  28.             勿論、ご夫婦やカップルでさりげなくおそろい！なんて、いうのも可愛い！
  29.         </p>   
  30.         <table>
  31.         <caption>スペック</caption>
  32.             <tr><th>素材:</th><td>磁器</td></tr>
  33.             <tr><th>カラー:</th><td>ホワイト</td></tr>
  34.             <tr><th>直径:</th><td>10cm</td></tr>
  35.             <tr><th>高さ:</th><td>10cm</td></tr>
  36.         </table>
  37.     </div>
  38.     <!-- 右の領域おわり -->
  39. </div>
  40. <!-- 一番大きな外側の領域おわり -->

名前を付けよう！

さて、写真の部分を左、文章の部分を右に寄せたいのですがdivタグにスタイルを指定すると、全てのdivタグに指定した事になります。
全体のdiv、右部分のdiv・・と別々にスタイルを指定したい場合は、どうすれば良いのでしょうか。

複数あるタグの中で、ひとつを指定したい時は、名前を付けます。方法は、タグが持つ、「id属性」に任意の名前を指定します。

この「id属性」を使った名前付けをする場合は、同じ名前を他の要素に付ける事は出来ません。
ですので、id属性で名前を付ける時は、同じようなスタイル指定を繰り返さない、例えばヘッダーやフッターなど、一つのHTMLファイルに一つしかない要素に使用します。

この場合も、左側のボックスという意味のdivは、もう2度と出てこないという意味で、id属性を使用します。
（反対に、同じスタイルを持つ要素が複数出てくる場合に使われる名前付けの方法として、class属性というものもあります。）

今回は、各々のdivタグに幅(width)やレイアウト用に回りこみの属性を指定したいので、3つ全てに名前をつけます。
それでは、外側の大きなdivには「container」、写真部分には「pic_area」、文章部分には「text_area」という名前をつけてみましょう。
書き方は

PLAIN TEXT
CODE:
  1. <!-- 一番大きな外側の領域 -->
  2. <div id="container">       
  3.     <!-- 左の領域 -->
  4.     <div id="pic_area">
  5.         <img src="cup.jpg" alt="シンプルカップ" />
  6.         <img src="cup2.jpg" alt="シンプルカップ2" />
  7.     </div>
  8.     <!-- 左の領域おわり -->
  9.     <!-- 右の領域 -->
  10.     <div id="text_area">
  11.     ～以下、省略

こうなります。

名前付けが終わり、いよいよスタイル付けが出来る状態になりました。
次のページは幅指定と、floatプロパティについてです。

ページ: 1 2

トラックバックURL

コメントをどうぞ

※初回のみ、管理者の承認が必要となります。