初心者のためのホームページ作り 第29号

Web作成支援

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号
第9号  第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属性があります。

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

右の「桜」の画像を切り抜くための設定を示したものです。
CSSの clip: rect で画像の明るい部分を、ピクセル単位で切抜きの設定をします。

(1)画像の上辺から切り抜く範囲のピクセル単位を指定

(2)画像の左辺から切り抜く左側の範囲のピクセル単位を指定

(3)画像の上辺から切り抜く下側の範囲のピクセル単位を指定

(3)画像の左辺から切り抜くの範囲のピクセル単位を指定

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

溢れたコンテンツ

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

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

サンプル その2   (詳しい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-lineMSIE5.5以降、Netscape6.0以降、Opera6.05以降、iCab不可
:beforeMSIE不可、iCab不可、Netscape6.0以降、Opera6.05以降
:afterMSIE不可、iCab不可、Netscape6.0以降、Opera6.05以降
なお、Mozillaに関しては、Versin1.0以降、すべてサポートしております。Macintosh版 MSIEにおける、first-letter属性ではサポートを表明していますが、残念ながら文字化けのバグがあります。

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



Copyright(C) 2002-2003 banban@scollabo.com