CSSの宿題

宿題03の解説とヒント

1. HTMLの要素

問題

ここのページのインライン要素には青色、ブロックレベル要素には赤色の枠線を付けてください。

HTMLファイルは、タグで指定された要素の集まりである。これらの要素は、大きく二つの種類に分類できる。一つ目はインライン要素と呼ばれるもので、ブラウザでは左から右へ順番に表示される。二つ目はブロックレベル要素で、ブラウザでは上から下へ順番に表示される。インライン要素とブロックレベル要素の種類や、配置の仕方の詳細は、ここで確認してほしい。

要素に枠線を付けるには、CSSのタイプセレクタ（要素型セレクタ）を使用するのが簡単である。例えば、インライン要素のIMG要素に青い枠線を表示するよにするには、STYLE要素の内容に以下のCSSの記述を追加すれば良い。

img {
border: solid thin blue;
}

同様に例えば、ブロックレベル要素のH1要素に赤い枠線を表示するよにするには、STYLE要素の内容に以下のCSSの記述を追加すれば良い。

h1 {
border: solid thin red;
}

宿題の注意点

CSSは記述した順番の内容で上書きされるので、最後に記述したCSSが優先されてブラウザに表示される。更に、外部ファイル < STYLE要素内の記述 < インライン記述(style属性での記述)の順に優先度が高くなる。したがって、宿題のインライン要素とブロックレベル要素の枠線は、STYLE要素の最後か、最後のSTYLE要素に追加すること。
画像は、kkimagesというディレクトリに入っているので、パスに気を付けること。

2. CSSによるレイアウト

問題

一番上にタイトルバー（幅600px、高さ80px）、左にナビゲーションバー（幅200px、高さ500px）、その右にコンテンツという典型的なレイアウトを、CSSを使って作成してください。

サンプルについての解説

ブロックレベル要素のDIV要素として、タイトルバー（id="title_bar"）、ナビゲーションバー（id="navi"）、コンテンツ（id="contents"）を作成した。
幅や高さは、各々のidセレクターで指定した。但し、各々のmarginを1pxとしたので、id="contents"の幅widthは、600-200-2=398pxにした。
id="navi"とid="contents"にfloat: left;を指定して、ブロックレベル要素であるが、左右に表示されるようにした。
float: left;を解除するために、<br style="clear: both;" >を最後に挿入してある。
ブロックレベル要素のボックスをページの中央に表示するのは、ボックスの幅を指定して、左右のmarginを自動(auto)にすることによって可能となる。
bodyセレクタでCSSのtext-align: center;を設定して、タイトル等の文字を中央揃えにしている。尚、上下方向に中央揃えにするには、display: table-cell;と設定すると可能だか、設定はしていないので、上寄せになっている。

3. TABLE要素によるレイアウト

問題

一番上にタイトルバー（幅600px、高さ80px）、左にナビゲーションバー（幅200px、高さ500px）、その右にコンテンツという典型的なレイアウトを、TABLE要素を使って作成してください。

表（table）を使ってレイアウトする方法は、HTMLに限らず、他のワープロなどでも使われる一般的な技法である。

サンプルについての解説

TABLE要素は、行を表すTR要素、TR要素内の項目を表すTD要素またはTH要素から成る。この例のレイアウトを作成するには、２行２列のTABLE要素を作成し、

	<table border="1" >
	  <tr><td>タイトル</td><td></td></tr> 
	  <tr><td>ナビゲーションバー</td><td>コンテンツ</td></tr> 
	</table>

その１行目を列結合（colspan="2"）したものにする。

	<table border="1" >
	  <tr><td colspan="2">タイトル</td></tr> 
	  <tr><td>ナビゲーションバー</td><td>コンテンツ</td></tr> 
	</table>

TABLE要素のセルの大きさは、TD要素にwidth属性、height属性で指定した。
タイトル等の文字を中央揃えにするために、BODY要素のstyle属性でCSSのプロパティtext-align: center;をインラインで指定した。
TABLE要素のセルの背景色は、TD要素にstyle属性でCSSのbackground-colorプロパティをインラインで指定した。

戻る