ボックス関連の主なプロパティ。
CSS(カスケーディングスタイルシート)でのボックスの大きさなどを指定するためのプロパティ(属性)について、主なものについて解説します。
- 以下の解説では値について一部解説を省略しております。詳細はCSSリファレンス内の各プロパティの記事をご覧ください。
display プロパティ(表示方法)。
display プロパティは要素の表示方法です。
display プロパティの値としては多岐に亘りますが、主なものとしては以下のものがあります。
尚、これらはHTMLでの定義と無関係に指定出来るため、例えば
- フレージング内容要素(原則としてインライン要素の形で表示される)をブロックレヴェル要素と同じ形式で(すなわち前後で改行させて)表示させたり、
- フレージング内容要素でない要素をインライン要素と同じように前後で改行しないように表示させたり
する事も出来ます。
- 但し、幾らCSSで表示方法を変更可能だからと言っても、HTMLの文法を違反するマークアップはいけません。
width プロパティ(要素の横幅)。
width プロパティは要素の横幅です。
尚、ここで言う横幅とは、要素の内容の横幅であり、枠線やパディングは含まれません。
- 但し、インターネットエクスプローラでは、これらの値を含めた値を横幅とする場合があります。但し、HTML 5 文書については、IE 6.0 以降ではそのような扱いにはなりません。
画像などの置換要素では予め横幅が定まっておりますが、width プロパティを指定する事に依り拡大または縮小が行われるようになります。
- 尚、画像などの置換要素に対して
widthプロパティのみ指定し、heightプロパティ(高さ)を指定しなかった場合は、高さも幅に合わせて拡大または縮小されるものとしております(CSS第二水準第一改訂版以降での扱い)。
width プロパティの値としては、以下のものがあります。
height プロパティ(要素の高さ)。
height プロパティは要素の高さです。
尚、ここで言う高さとは、要素の内容の高さであり、枠線やパディングは含まれません。
- 但し、インターネットエクスプローラでは、これらの値を含めた値を高さとする場合があります。但し、HTML 5 文書については、IE 6.0 以降ではそのような扱いにはなりません。
画像などの置換要素では予め横幅が定まっておりますが、height プロパティを指定する事に依り拡大または縮小が行われるようになります。
- 尚、画像などの置換要素に対して
heightプロパティのみ指定し、widthプロパティ(幅)を指定しなかった場合は、幅も高さに合わせて拡大または縮小されるものとしております(CSS第二水準第一改訂版以降での扱い)。
height プロパティの値としては、以下のものがあります。
overflow プロパティ(入り切らなかった場合の処遇)。
overflow プロパティは、当該要素に内容が入り切らなかった場合の処遇です。
- 通常、高さと幅が指定された状態で入り切らなかった場合は、何も考えずにはみ出してしまいます。
overflow プロパティの値としては、以下のものがあります。