今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号
第９号  第10号  第11号  第12号  第13号  第14号  第15号  第16号
第17号  第18号  第19号  第20号   第21号  第22号  第23号  第24号
第25号  第26号  第27号  第28号  目次

プレーンテキスト版バックナンバー

今週＜第29号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　 毎週金曜日配信　What's New 2002/11/29
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題 ■ ボックスの応用

■ ボックス

テキストブロック、画像、位置を指定されたコンテナ、スタイルシートを施された各要素は、ボックス化された四角い領域を生成します。

つまり、どのような要素でも、画面に表示させた時には、四角い領域を持って 表示することになります。

例えば、見出し要素では、横に長い四角い領域を持ち、ブラウザによっては余白を与えられます。段落も、テーブルも、リストも基本的には、四角い領域であるわけです。それらすべてをボックスという概念に当てはめられます。

◆ ボックスの見え方を指定する

四角の領域をもつボックスの見え方を指定する CSS Level 2 に clip属性があります。

属性名	値	機能
clip	rect	ピクセル単位で指定した矩形領域を切り取る
	auto	デフォルト値：すべてを表示

サンプル その１   （詳しいHTML文は、今週のメールマガジンをお読みください。)

◆ 溢れたコンテンツ

ボックスの設定によっては、（width、height の設定で）コンテンツ全体が収まりきれない場合が発生します。そんな時には、CSS Level 2 の overflow属性を指定して、コンテンツの見せ方を設定します。

属性名	値	機能
overflow	visible	領域指定を無視して高さや幅を自動調節し、すべてのコンテンツを表示させます。
	scroll	縦横にスクロールバーを設けて、ユーザの操作によりコンテンツを見せる方法です。
	hidden	領域指定に従って、収まりきれないコンテンツは表示しません。
	auto	ブラウザが自動処理します。

サンプル その２   （詳しいHTML文は、今週のメールマガジンをお読みください。)

◆ 擬似要素

擬似要素とは、要素の位置関係によって適用するスタイルシートです。

属性名	機能	記述法
:first-letter	要素の最初の文字のみ適用	h1:first-letter { color: #f00 }
:first-line	要素の最初の行のみ適用	p:first-letter { background: #ff0 }
:before	要素の直前に適用	h1:before { content: "【" }
:after	要素の直後に適用	h1:after { content: "】" }

なお、上記 CSS の各ブラウザにおけるサポート状況は下記の通りです。

属性名	サポート状況
:first-letter	MSIE5.5以降（Macintosh版不可）、Netscape6.0以降、Opera6.05以降、iCab不可
:first-line	MSIE5.5以降、Netscape6.0以降、Opera6.05以降、iCab不可
:before	MSIE不可、iCab不可、Netscape6.0以降、Opera6.05以降
:after	MSIE不可、iCab不可、Netscape6.0以降、Opera6.05以降

なお、Mozillaに関しては、Versin1.0以降、すべてサポートしております。Macintosh版 MSIEにおける、first-letter属性ではサポートを表明していますが、残念ながら文字化けのバグがあります。

サンプル その３   （詳しいHTML文は、今週のメールマガジンをお読みください。)