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

HTML要素

• 見出し (p.55)
• 段落 (p.57)
• 強調 (p.93)
• リンク（リンク先を値とする属性） (p.83)
• 画像（画像ファイルのリンク先を値とする属性、代替情報を値とする属性） (p.87)

CSSプロパティ

• 文字の大きさ (p.225)
• 文字の太さ (p.222)
• 文字のスタイル (p.219)
• 書体 (p.216)
• 行の高さ（行間を指定したいとき） (p.187)
• インデント幅 (p.232)
• テキストの行揃え (p.233)
• テキストの装飾 (p.237)
• テキストの文字間隔 (p.244)
• 色（正確には前景色） (p.204)
• 背景 (p.204)
• 他の要素との余白 (p.145)

問題：img要素のalt属性について

福井県立病院のWebサイト(http://info.pref.fukui.jp/imu/fph/)について、画面右下の「住所」に注目する。

この部分はimg要素でマークアップされている。

alt属性の値は"所在地、メール"となっている。

• 問1: alt属性値の誤りを指摘してください。
• 問2: alt属性値の誤り以前に、そもそも何を間違えているか指摘してください。

解答は、今回の授業アンケートにご記入ください。（しめきり：10月30日火曜日24時）

本日の目標（めざすゴール）

before

after

理解したいこと

1. div要素とid属性によるグループ化
2. id属性, class属性（HTML側）とidセレクタ, classセレクタ（CSS側）の関係
3. idセレクタに対してCSSを適用（より細かい対象にグラフィックデザインができる）
4. 1段組レイアウトの仕組み（ボックスモデルの理解）

※共有フォルダから、1columnフォルダをデスクトップにドラッグしてください。 または、以下のリンクをクリックしてダウンロード

CSSファイルの管理 (15 / 19:15〜19:30)

• cssファイルはcssフォルダに入れる。
• cssファイルの中身が長くなる場合は、役割別に複数のcssファイルで管理する。（基本設定、レイアウト設定、トップページ専用など）

HTMLファイルからCSSファイルを読み込む

HTMLファイルのhead要素から読み込む。

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

• 本講座では、相対パス（href="./css/style.css"）で指定する。htmlファイルの場所により、 href="./css/style.css"、href="../css/style.css"と記述する必要がある。位置関係に注意。
• 実務では、絶対パスでの指定 (href="/css/style.css")を推奨（サーバ上でないと確認できないので注意）
• media属性でscreen以外の値を指定することで、Netscape4にCSSが適用されない。(p. 394)

CSSファイルからCSSファイルを読み込む

HTMLファイルからリンクされたCSSファイルに記述し、読み込む。

@import "base.css";
@import "structure.css";
@import "common.css";

• @import url("ファイル名");という書式でも読み込めるが、2重引用符のみで読み込むことにより、IE4にCSSが適用されない。 (p.395)

HTML：グループ化要素、id属性・class属性 (30 / 19:30〜20:00)

グループ化要素 (p.100)

div: ブロック要素のグループ化

<div id="header">
<h1>株式会社ふくいWebデザイン</h1>
………
</div>
<div id="maincol">
<h2>社員紹介</h2>
………
</div>
………
………

※step0.html、step1.htmlを見ながら以下のポイントを押さえましょう。

• div要素では「意味的なグループ分け」をする。全ページ共通のヘッダ（文書の始まり）、メイン、サブ、フッタ（文書の終わり）など。
• id属性でグループ名を付ける。id="header", id="maincol"など。ネーミングは教科書を参考にして慣例に従うのが良い。独自ルールでなく、誰が見てもわかる必要がある。
• 実際の制作では、div要素を先に書き、その中に見出しや本文を書いていく。
• body要素内すべてをdiv id="container"でグループ化する。CSSで横幅の指定やページ全体の中央揃えの際などに必要となる。
• id属性はdiv要素だけでなく、すべての要素に対して付与できる。例）<h2 id="entry-title">こんぶチャーハンを食べた。</h2>
• id属性はページ内に1回しか使えない。
• id属性を利用して、ページ内リンクを作成できる。例）<a href="#header">ページの先頭へ</a>
• class属性でもグループ別に名前を付けることができる。class属性はページ内で何回も使える。 例）<p class="date">2007年10月25日</p>
• id属性、class属性ともに、値はアルファベットで開始し、アルファベット(a〜z)、数字(0〜9)、ハイフン(-)で構成する。文法上はアンダースコア(_)も使えるが、ブラウザのバグにより適切に動作しない場合があるので、利用は控えた方が良い。
• id="entryname"よりもid="entry-name"と記述しよう。
• div要素、id属性・class属性を上手に使うことで、CSSレイアウトが自由自在になる。

ul,li: 箇条書きリスト (p.69)

<ul id="nav">
<li><a href="/">ホーム</a></li>
<li><a href="/about/">会社紹介</a></li>
<li><a href="/showcase/">実績紹介</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>

CSSを使ってできる視覚表現 (p.271)

• リストマーカーを□や○に変更できる。
• リストマーカーを消すことができる。
• リストマーカーを独自の画像で表現することができる。
• リストを横に並べることができる（ナビゲーションとして）。

※ul要素をol要素に差し替えると、番号付きリストになる。

CSS：ボックスモデルの仕組み (20 / 20:00 〜 20:20)

ボックスモデル (p.144)

CSSレイアウトはボックスモデルの理解から！

Webディレクション、Webデザインを担当しています。「Webサイトに訪れた人の気持ちに配慮すること。」「Webサイトを運営している人の気持ちに配慮すること。」を心がけています。

• 要素にふくまれる「内容 (content)」（テキスト）
• 内容とボーダーの余白である「パディング (padding)」（テキストのまわりに40pxの余白）
• 枠線を表す「ボーダー (border)」（黒い線の部分）
• ボーダーと他の要素との余白である「マージン (margin)」（枠線の外に60pxの余白）

CSSの主要なプロパティ その2

margin: その要素のボーダーと他の要素との間の余白 (p.145)

margin-top: 20px; /*上に20pxの余白*/
margin-right: 20px; /*右に20pxの余白*/
margin-bottom: 20px; /*下に20pxの余白*/
margin-left: 20px; /*左に20pxの余白*/
margin: 20px; /*上下左右に20pxの余白*/
margin: 20px 10px; /*上下に20px、左右に10pxの余白*/
margin: 20px 5px 10px; /*上に20px、左右に5px、下に10xの余白*/
margin: 20px 5px 10px 0; /*上に20px、右に5px、下に10xの余白、左に0px（時計回り）*/

• 一括指定を覚えた方が楽。
• 上下のマージンは、大きい方を優先し相殺される。(p.147)

padding: その要素の内容とボーダーとの余白 (p.148)

padding-top: 20px; /*上に20pxの余白*/
padding-right: 20px; /*右に20pxの余白*/
padding-bottom: 20px; /*下に20pxの余白*/
padding-left: 20px; /*左に20pxの余白*/
padding: 20px; /*上下左右に20pxの余白*/
padding: 20px 10px; /*上下に20px、左右に10pxの余白*/
padding: 20px 5px 10px; /*上に20px、左右に5px、下に10xの余白*/
padding: 20px 5px 10px 0; /*上に20px、右に5px、下に10xの余白、左に0px（時計回り）*/

• その要素に設定した背景はpaddingの領域でも有効。

border: その要素の枠線 (p.150)

border-top: 5px solid #000; /*上に対して：太さは5px、形状は直線、色は黒*/
border-right: 5px dotted #333;
border-bottom: 5px dashed #666;
border: 5px solid #000;/*上下左右に対して：太さは5px、形状は直線、色は黒*/

• 形状の種類ついてはp.152参照。
• img要素にリンクを指定すると、画像の回りにのまわりに青い線が付く。これを消したい場合は、a imgに対して、border:0;またはborder:none;を指定すれば良い。

width, height: ボックスの内容領域の幅 (p.179)

width:760px; /*横幅を760px*/

width:100%; /*それを包むブロックに対して、横幅を100%*/

• 特別な意図がない限り、height指定は使わない。
• 内容(content)に対して設定される。

float: 要素ボックスを移動させる（浮動化する） (p.166)

float:right; 
/*その要素について、右にフロートされてブロックボックスを生成する。
後に続く内容は、そのブロックボックスの上辺から左側に回り込む。*/

• floatを適用する要素には、width(幅)を設定する必要がある。（img要素など幅を備えている要素は省略可）

clear: floatによる回り込みの解除 (p.169)

clear:both;  /*左右両側の回り込み解除*/

• ブロックレベル要素にのみ適用できる。

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

演習：ボックスモデルを使ったレイアウト 1段組 (50 / 20:30 〜 20:20)

• Firefoxで、index_study.htmlを開く
• Dreamweaverで、style_study.cssを開く。難易度を上げたい人は、style_study_hard.cssを選ぶ。
• 1ステップ進んだら、cssファイルを保存（CTRL+S）。ブラウザの再読込（CTRL+R）で変化を確認。ショートカットで素早くいきましょう！

CSSデザインの流れ：ステップを踏んで、1段組のレイアウトを完成させましょう！

1. CSSデザインの流れ
2. ブラウザCSSのリセット
3. 大枠のレイアウト調整（ヘッダ、メイン、サブ、フッタ）
4. 枠別に文字回りの調整、装飾
5. 全体調整
6. 完成

CSSのおさらい

セレクタ {プロパティ : 値;}

誰に {何を:どれだけまたはどのように;}

classセレクタとidセレクタ (p.125)

/* <div class="module"> 〜 </div> に対してスタイルを適用  */
div.module {
  margin-bottom:20px;
}

/* <div id="header"> 〜 </div> に対してスタイルを適用  */
div#header {
  margin-bottom:20px;
}

セレクタの組み合わせ (p.131)

/* <div id="maincol"> 〜 </div> の中のh2要素に対してスタイルを適用  */
div#maincol h2{
  font-size:120%;
}

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

• div要素、id属性、class属性をHTMLに加えていくことで、より文書構造が明確になる。
• 文書構造が細かく定義されたHTMLに対して、より詳細な視覚表現をCSSで実装できることになる。
• ボックスモデルとフロートを理解することが、CSSレイアウトの要。

宿題

• 次回、2段組は自身のプロフィールに差し替えてください（とりあえず入社ということで）。
• 400文字程度の自己紹介
• 縦横100pxのポートレイト画像