デジハリ070325

19時よりデジハリ「XHTML+CSS講座(4)」

まず、前半１時間で用語の確認。

■ボックス構造
・内容領域
・周辺領域（内から、パディング・ボーダー・マージン）
・各領域で、背景・背景画像が適用されるか否か

■ブロックレベル要素
・ブロックレベル要素は親要素の内容幅全体に広がって配置
・つまりブロックレベル要素の横には他の要素は並べられない
・したがって、改行を伴う要素
■インライン要素
・文中の一部分にだけに意味づけや、 書式設定を行う
・要素中に改行があると、生成されるボックスは分割されることがある
・ブロックレベル要素を子孫要素として持つことができない
■インラインブロックレベル（置換インライン）要素
・インライン要素のように改行を伴わない
・幅(width)や高さ(height)を持つ
・見た目に関する決まり事はブロックレベル要素、文法上はインライン要素といったイメージ

■CSS2におけるdisplayプロパティ
・ブロックレベル、インライン要素を互いに変更することが可能
・インライン要素であるspan要素の子にブロックレベル要素のdiv要素を記述できるわけではない
・あくまで見た目の定義を変更できるのみで、要素の性格はCSSの仕様ではなく、HTMLの仕様によって定義される

後半は実際にボックス構造を設定し、各種ブラウザで確認する。

■ブラウザによるボックス構造の違い

Dreamweaverでｐタグで囲まれた一行に以下の設定のクラス（boxtest）を適用した。DWではCSSの設定項目を理解していると、このように簡単に設定できる。もちろん、CSSを内部に記述することも、外部ファイルで持つことも簡単だ。

この設定を４種類のブラウザで開いて比較した。

左上から、NN4.78／NN7.1／IE6／FF1.5だが、NN4.78では明らかに異なる。

このように、ブラウザによってCSSの解釈が異なる。IE5xについては特に問題がある。Webデザイナーとしては、どのブラウザでも意図した表示をさせたい訳で、そのためにブラウザごとのバグをついて、ブラウザごとに用意した個別のCSSファイルにリンクさせるようにする。これが俗に「CSSハック」と呼ばれる技術。

■次に、ｐタグだけでできているソースを見出しやキャッチフレーズごとにHタグをつけてHタグの再定義を行ったり、クラスを設定したりする実習。SEO対策の為にも、ｈ１タグはそのページに一つだけにするように注意があった。

「コース紹介」というpタグで囲まれていた段落を、フォーマットで「見出し１」つまりh1タグに変えたところ。DWではこのようにして、メモのように記述されたソースにタグ付けし、先に示したCSSルール設定ダイアログで装飾を設定していく。

講座の名称部分はh3タグとし、このh3タグをCSSで再定義している。講座名の下の説明文はh4タグとした。ここで
この要素どうしの間隔を確保するために、h3タグには下に10pxのマージンを設定してある。

全ての設定が完了したら、IE6とFF1.5で比較してみる。見た目には同じ配置だが、講座名の枠のドットの大きさが異なっている。

これだけを見ても、ブログを管理している方は、明らかにCSSの恩恵を受けていることが分かると思う。

次回（再来週）はフロートについて。