XHTML+CSS コーディング習得コース 第4回:コーディング演習3

2007年11月 8日

講座のはじまる前に (19時になる前に)

  • Dreamweaverを起動
  • Firefoxアドオン Html Validator (win/mac) をインストール
  • レジュメをブラウザで開く (http://www.d-improvement.jp/lecture/)
  • 演習課題のプロフィールを用意された方は、共有フォルダから課題データをコピーし、Dreamweaverで内容を差し替えてください。

CSS関連の推薦本

アジェンダ

  • おさらい (10 / 19:00〜19:10)
  • 演習:CSSレイアウト 2段組・横幅固定 (30 / 19:10 〜 19:40)
  • 演習:CSSレイアウト 2段組・リキッドレイアウト (20 / 19:40 〜 20:00)
  • CSSの主要なプロパティその3 (20 / 20:00〜20:20)
  • 休憩 (10 / 20:20〜20:30)
  • 演習:背景画像よるCSSデザイン (50 / 20:30〜21:20)
  • まとめ、質疑応答 (10 / 21:20〜21:30)

おさらい (10 / 19:00〜19:10)

CSSレイアウト1段組の手順

  1. ブラウザCSSのリセット
  2. 大枠のレイアウト調整(ヘッダ、メイン、サブ、フッタ)
  3. 枠別に文字回りの調整、装飾
  4. 全体調整

HTML要素

  • グループ化要素 (p.100)
  • 箇条書きリスト (p.69)

CSSプロパティ

  • その要素のボーダーと他の要素との間の余白 (p.145)
  • その要素の内容とボーダーとの余白 (p.148)
  • その要素の枠線 (p.150)
  • ボックスの内容領域の幅 (p.179)
  • 要素ボックスを移動させる(浮動化する) (p.166)
  • floatによる回り込みの解除 (p.169)

id, class

  • id要素で定義された値はページ内に1回しか使えない。必然的に1回しか現れない(header)、目印のように使いたい(answer-80)HTML要素に付与する。
  • class要素で定義された値はページ内で何度も使える。ページ内で繰り返し現れる(ブログにおけるentry-date)HTML要素に付与する。

宿題の解答

  1. 住所、電話番号などの内容をalt属性値に設定する必要がある。
  2. そもそも画像にする必要がない。テキストで良い。

本日の目標(めざすゴール)

理解したいこと

  1. 2段組レイアウトの仕組み(横幅固定とリキッド)
  2. 背景画像を利用したCSSデザイン

演習:CSSレイアウト 2段組・横幅固定 (30 / 19:10 〜 19:40)

  • 共有フォルダから、2column_fixedフォルダをデスクトップにドラッグしてください。または、以下のリンクをクリックしてダウンロード
  • Firefoxで、index_study.htmlを開く
  • Dreamweaverで、style_study.cssを開く。
  • 1ステップ進んだら、cssファイルを保存(CTRL+S)。ブラウザの再読込(CTRL+R)で変化を確認。

「2段組・横幅固定」の主要な設定(CSSファイル)


div#container {
  margin:0 auto;
  width:760px;
}

div#header{
}

div#maincol{
  float:left;
  width:500px;
}
div#subcol{
  float:right;
  width:200px;
}

div#footer{
  clear:both;
}

カスタマイズしてみよう

  1. メインとサブの左右を逆に
  2. 幅の設定を変えてみる

2段組で注意したいこと

  • maincolとsubcolはHTMLでの記述順序に注意する。maincolを先に記述する。(携帯電話で閲覧してみると、その理由がよくわかる)テーブルレイアウトに対するメリットの一つ。
  • 複数のブラウザで閲覧確認をすること。

演習:CSSレイアウト 2段組・リキッドレイアウト (20 / 19:40 〜 20:00)

  • 共有フォルダから、2column_liquidフォルダをデスクトップにドラッグしてください。または、以下のリンクをクリックしてダウンロード
  • Firefoxで、index_study.htmlを開く
  • Dreamweaverで、style_study.cssを開く。
  • 1ステップ進んだら、cssファイルを保存(CTRL+S)。ブラウザの再読込(CTRL+R)で変化を確認。

「2段組・リキッドレイアウト」の主要な設定(CSSファイル)


#container {
}

#header {
}

#maincol {
  float:left;
  width:70%;
}
#subcol {
  float:right;
  width:25%;
}

#footer {
  clear:both;
}

カスタマイズしてみよう

  1. メインとサブの左右を逆に

固定とリキッドの使い分け

  • イメージカットを大きく見せるなど、ビジュアルにこだわるサイトは横幅固定
  • 文字中心のコンテンツはリキッドレイアウト

CSSの主要なプロパティその3 (20 / 20:00〜20:20)

display: 表示方法 (p.160)

display: block; /*その要素をブロックボックスとして生成する*/
display: inline; /*その要素をインラインボックスとして生成する*/
display: none; /*その要素のボックスを生成せず、子孫要素についてもボックスを生成しない。非表示となる*/
  • ナビゲーション:a要素(インライン要素)に対してdisplay:block; を適用する。
  • タグクラウド:li要素(ブロックレベル要素)に対してdisplay:inline; を適用する。
  • display: none; を適用した要素・子孫要素は、音声ブラウザで読み上げの対象にならない。

list-style: リスト(リストマーカーの設定) (p.271)

list-style:none; /*リストマーカーの非表示*/
list-style:disc; /*リストマーカーを●にする*/

background: 背景 (p.209)

backgorund:#fff url("../imgs/bg.png");           
/*背景色を白 背景画像としてbg.pngを表示 水平・垂直方向に繰り返し(タイリング)*/

backgorund:#fff url("../imgs/bg.png") repeat;    
/*背景色を白 背景画像としてbg.pngを表示 水平・垂直方向に繰り返し(タイリング)*/

backgorund:#fff url("../imgs/bg.png") repeat-x;  
/*背景色を白 背景画像としてbg.pngを表示 水平方向にのみ繰り返し*/

backgorund:#fff url("../imgs/bg.png") repeat-y;  
/*背景色を白 背景画像としてbg.pngを表示 垂直方向にのみ繰り返し*/

backgorund:#fff url("../imgs/bg.png") no-repeat; 
/*背景色を白 背景画像としてbg.pngを表示 一つだけ表示し繰り返さない*/

backgorund:#fff url("../imgs/bg.png") no-repeat 0 10px; 
/*背景色を白 背景画像としてbg.pngを表示 一つだけ表示 画像の左上を水平方向に0・垂直方向に10px*/

backgorund:#fff url("../imgs/bg.png") no-repeat left center; 
/*背景色を白 背景画像としてbg.pngを表示 一つだけ表示 画像の左上を水平方向に左揃え・垂直方向に中央揃え*/
  • パディング領域の左上端が基準となる。
  • 背景画像の繰り返しについては、p.211の図解がわかりやすい。

休憩 (10 / 20:20〜20:30)

演習:背景画像よるCSSデザイン (50 / 20:30〜21:20)

  • 共有フォルダから、css_design_background-imageフォルダをデスクトップにドラッグしてください。または、以下のリンクをクリックしてダウンロード
  • Firefoxで、index_study.htmlを開く
  • Dreamweaverで、style_study.cssを開く。
  • 1ステップ進んだら、cssファイルを保存(CTRL+S)。ブラウザの再読込(CTRL+R)で変化を確認。

コンテンツの余白に背景画像を設定する(タイリング)

  1. Stripe Generator (http://www.stripegenerator.com/) で画像を作成
  2. 生成した画像をリネームし、imgsフォルダに入れる
  3. bodyにbackgroundプロパティで背景画像を指定する

コンテンツの余白に背景画像を設定する(水平方向に繰り返し)

  1. Stripe Generator (http://www.stripegenerator.com/) で画像を作成
  2. 生成した画像をリネームし、imgsフォルダに入れる
  3. bodyにbackgroundプロパティで背景画像を指定する
  4. repeat-xを指定する

見出しに背景画像を設定する(一つだけ表示)

  1. 画像編集ソフトウェア(Fireworksなど)で画像を作成
  2. 作成した画像をimgsフォルダに入れる
  3. div.module h2にbackgroundプロパティで背景画像を指定する
  4. no-repeatを指定する
  5. paddingプロパティで位置調整

ヘッダーに背景画像を設定する(一つだけ表示・位置指定)

  1. 画像編集ソフトウェア(Fireworksなど)で画像を作成
  2. 作成した画像をimgsフォルダに入れる
  3. div#headerにbackgroundプロパティで背景画像を指定する
  4. no-repeatと位置を指定する

リストマーカーを背景画像で設定する(一つだけ表示・位置指定)

  1. 画像編集ソフトウェア(Fireworksなど)でマーカー画像を作成
  2. 作成した画像をimgsフォルダに入れる
  3. div.module liにbackgroundプロパティで背景画像を指定する
  4. no-repeatと位置を指定する
  5. paddingプロパティで位置調整

区切り線を背景画像で設定する(一つだけ表示・位置指定)

  1. 画像編集ソフトウェア(Fireworksなど)で区切り線を作成
  2. 作成した画像をimgsフォルダに入れる
  3. div.moduleにbackgroundプロパティで背景画像を指定する
  4. no-repeatと位置を指定する
  5. paddingプロパティで位置調整

まとめ、質疑応答 (10 / 21:20〜21:30)

  • 2段組レイアウトを作成する場合、まず大枠のレイアウトを定めてから、細かい調整に入る。
  • 背景画像を上手に利用することで、見た目の印象を向上させることができる。
ページの
先頭へ