CSS: ボックス概念

CSSではHTMLの一つの要素が作る範囲をボックスとして考えます。

ボックス

HTMLの要素が作る範囲をボックスと呼び、各ボックスには周辺余白、枠、枠内余白の設定ができます。設定の詳細はCSSリファレンス: ボックスを参照してください。

box_concept

ブラウザは各ボックスの大きさを計算してページの表示を行います。

自分なりの答えが導けたら、【課題3】に進んでください。

テキストエディタを起動し、展開した「box_sample.html」をエディタにドラッグ＆ドロップします。

style要素の中身がCSSの表記です。今はまだCSSの中身をしっかりと理解する必要はありません。

サンプルページでは、各要素に幅15pxの枠、10pxの内側余白、20pxの外側余白を設定しています。また、個別に枠の色と背景色を設定し、見出しと段落には幅300pxの設定をしています。

それぞれの記述がどこに対応しているか、考えてみましょう。【課題2】の答えがソースコードからわかった筈です。

8行目の行の先頭に「/*」（半角文字）を入力し、保存しなさい。
NoEditorは「Ctrl」＋「S」、miは「コマンド」＋「S」で保存のショートカットです。必ずショートカットキーを覚えてください。

8行目は周辺余白の設定箇所です。「/*」「*/」で挟むことで８行目の設定を無効化しています。
ブラウザで表示を更新（F5キーまたは更新ボタンをクリック）し、表示がどう変わったか確認しなさい。
ブラウザごとに、周辺余白の初期値がきまっており、ブラウザごとに見た目が異なる原因にもなっています。
8行目の行の先頭に入力した「/*」を削除し、9行目の行の先頭に「/*」を入力してください。先ほどと同様に、保存した後、ブラウザで更新して画面の表示の変化を確認しなさい。

9行目は枠内余白の設定箇所です。周辺余白もブラウザごとに初期値が決まっています。

24行目の先頭の「p」のすぐ後ろに「#p1」（半角文字）を入力し、保存してブラウザで確認しなさい。

「#p1」の表記は、id属性が「p1」であるタグに限定するものです。前回の授業で、「共通属性」を学んだのを覚えているでしょうか。

id	要素に固有の識別子をつけます。文書中に一箇所しか使えません。
class	要素を分類する識別子をつけます。文書中の複数の要素で共有できます。また、空白でしきった複数の識別子を記述することもできます。
style	スタイルシートによるスタイルを指定します。

id属性とclass属性は、どちらも要素を区別するために用いられるものです。idとclassの違いは、学生の学籍番号とクラスと考えるとわかりやすいと思います。同じ学籍番号を持つ人はいませんよね。idは文書中に同じものを2つ使ってはいけないのです。classは同じものを複数の要素につけて構いません。