講座のはじまる前に (19時になる前に)
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段組の手順
- ブラウザCSSのリセット
- 大枠のレイアウト調整(ヘッダ、メイン、サブ、フッタ)
- 枠別に文字回りの調整、装飾
- 全体調整
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要素に付与する。
宿題の解答
- 住所、電話番号などの内容をalt属性値に設定する必要がある。
- そもそも画像にする必要がない。テキストで良い。
本日の目標(めざすゴール)
理解したいこと
- 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;
}
カスタマイズしてみよう
- メインとサブの左右を逆に
- 幅の設定を変えてみる
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;
}
カスタマイズしてみよう
- メインとサブの左右を逆に
固定とリキッドの使い分け
- イメージカットを大きく見せるなど、ビジュアルにこだわるサイトは横幅固定
- 文字中心のコンテンツはリキッドレイアウト
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)で変化を確認。
コンテンツの余白に背景画像を設定する(タイリング)
- Stripe Generator (http://www.stripegenerator.com/) で画像を作成
- 生成した画像をリネームし、imgsフォルダに入れる
- bodyにbackgroundプロパティで背景画像を指定する
コンテンツの余白に背景画像を設定する(水平方向に繰り返し)
- Stripe Generator (http://www.stripegenerator.com/) で画像を作成
- 生成した画像をリネームし、imgsフォルダに入れる
- bodyにbackgroundプロパティで背景画像を指定する
- repeat-xを指定する
見出しに背景画像を設定する(一つだけ表示)
- 画像編集ソフトウェア(Fireworksなど)で画像を作成
- 作成した画像をimgsフォルダに入れる
- div.module h2にbackgroundプロパティで背景画像を指定する
- no-repeatを指定する
- paddingプロパティで位置調整
ヘッダーに背景画像を設定する(一つだけ表示・位置指定)
- 画像編集ソフトウェア(Fireworksなど)で画像を作成
- 作成した画像をimgsフォルダに入れる
- div#headerにbackgroundプロパティで背景画像を指定する
- no-repeatと位置を指定する
リストマーカーを背景画像で設定する(一つだけ表示・位置指定)
- 画像編集ソフトウェア(Fireworksなど)でマーカー画像を作成
- 作成した画像をimgsフォルダに入れる
- div.module liにbackgroundプロパティで背景画像を指定する
- no-repeatと位置を指定する
- paddingプロパティで位置調整
区切り線を背景画像で設定する(一つだけ表示・位置指定)
- 画像編集ソフトウェア(Fireworksなど)で区切り線を作成
- 作成した画像をimgsフォルダに入れる
- div.moduleにbackgroundプロパティで背景画像を指定する
- no-repeatと位置を指定する
- paddingプロパティで位置調整
まとめ、質疑応答 (10 / 21:20〜21:30)
- 2段組レイアウトを作成する場合、まず大枠のレイアウトを定めてから、細かい調整に入る。
- 背景画像を上手に利用することで、見た目の印象を向上させることができる。