ボックスの種類を指定する …… display
ボックスの位置を指定する …… position, top, right, left, bottom
重なったボックスの前後関係を指定する ……z-index
あふれた内容の取り扱い …… overflow
クリッピング …… clip
表示/非表示 …… visibility
レベル: | 1〜2 |
---|---|
値: | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none |
初期値: | inline |
適用対象: | あらゆる要素に適用可能 |
継承: | しない |
パーセント値: | なし |
適用メディア: | すべて |
display プロパティは、ある要素がどのようなボックスを生成するのかを規定します。
block …… ブロックボックスを生成します。HTML では P, H1, DIV などが相当します。
inline …… インラインボックスを生成します。HTML では EM, Q, CITE などが相当します。
list-item …… リスト項目として、項目の内容が含まれるブロックボックスと、その頭につくマーカーのインラインボックスとを生成します。HTML では LI などが相当します。
marker …… マーカーとなるインラインボックスを生成します。この値は :before 疑似要素、:after疑似要素にしか設定できません。また、display が list-item となっている要素の前後に対して diaplay: marker を宣言すると、元のマーカーを置き換えることになります。それ以外の場合、この指定は inline として扱われます。
none …… ボックスをいっさい生成しません。中身は全くレンダリングされませんし、子孫要素に none 以外の指定があっても無視されます。
compact …… コンパクトボックスを生成します。コンパクトボックスは、その幅が後続する(浮動や絶対配置でない)ブロックボックスのマージン幅に収まるようならインラインボックスとして振る舞い、そうでなければブロックボックスとして振る舞います。HTML では、compact="compact" を指定された DT が相当します。
run-in …… ランインボックスを生成します。ランインボックスは、(浮動や絶対配置でない)ブロックボックスが後続する場合には、後続するブロックボックスに吸収されつつインラインボックスを生成します。そうでなければブロックボックスを生成します。
table …… その要素をブロックの表とします。HTMLでは TABLE が相当します。
inline-table …… その要素を表としますが、ブロックではなくインラインボックスとして整形されます。表全体を画像として、それをIMG要素として貼り付けたところを想像すると近いでしょう。
table-row …… その要素を表の行とします。HTML では TR が相当します。
table-row-group …… 表の行グループとします。HTML では TBODY などが相当します。
table-header-group …… 表のヘッダ行グループとします。HTML では THEAD が相当します。
table-footer-group …… 表のフッタ行グループとします。HTML では TFOOT が相当します。
table-column …… 表の列とします。HTML では COL が相当します。
table-column-group …… 列要素とします。HTML では COLGROUP が相当します。
table-cell …… 表のセルとします。HTML では TD, TH が相当します。
table-caption …… 表の表題とします。HTML では CAPTION が相当します。
HTML では、ある要素の display の値を変更しても無視されることがあります。
比較的良く使われるのは、以下のような用法です。
div.chapter{ margin: 3em 0; } hr.chapter-separate{ display: none; }
<div class="chapter"> ... </div> <hr class="chapter-separate"> <div class="chapter"> ...
このようにしておくと、CSS に対応していれば大きなマージンによって章の区切りが明確になりますし、CSS に対応していない環境では、マージンの代わりに水平線で区切りを明示することができます。
レベル: | 2 |
---|---|
値: | static | relative | absolute | fixed |
初期値: | static |
適用対象: | 全ての要素、ただし生成された内容を除く |
継承: | しない |
パーセント値: | なし |
適用メディア: | 視覚 |
position プロパティを指定すると、ボックスの配置方法を変えることができます。
static …… 初期値です。ボックスは通常に流し込まれます。top, right, bottom, leftの指定は無視されます。
relative …… 相対配置を行います。top, right, bottom, leftの値は、static と同様に配置された際の位置からの相対位置を指定することになります。すなわち、static と同様に配置されたあと、指定に従って位置をずらすことになります。なお、後続のボックスは、相対配置されていない時と同じように配置されます。
absolute …… ボックスの位置を絶対指定します。top, right, bottom, leftの値は、containing block からの距離となります。絶対配置されたブロックは、後続するブロックの配置には全く影響しません。また、絶対配置されたブロックのマージンは、他のどのマージンとも重なりません。
fixed …… ボックスは position: absolute; の時と同じように配置されますが、それに加えて固定されます。連続メディアならビューポートに対して固定され、スクロールしても同じ位置にとどまります。ページメディアならページに対して固定され、各ページの同じ位置に出力されます。
レベル: | 1〜2 |
---|---|
値: | <長さ> | <パーセント値> | auto |
初期値: | 0 |
適用対象: | 位置指定される要素 |
継承: | しない |
パーセント値: | top, bottom は containing block の高さ、right, left は横幅に対する割合 |
適用メディア: | 視覚 |
位置指定される要素の上下左右の位置を指定します。position の指定が static 以外の時のみ有効です。top で上からの距離を、right, bottom, left はそれぞれ右、下、左からの距離を指定しますが、position プロパティの値によってその意味するところは異なってきます。詳しくは position を参照してください。
レベル: | 1〜2 |
---|---|
値: | left | right | none |
初期値: | none |
適用対象: | あらゆる要素、ただし位置指定されたものと生成された物を除く |
継承: | しない |
パーセント値: | なし |
適用メディア: | 視覚 |
float プロパティを指定すると、フロート(浮動)の指定を行うことが出来ます。
left …… 左にフロートします。要素は左端に寄せられ、続く内容はその要素の右側に流し込まれます。
right …… 右にフロートします。
none …… フロートしません。
フロートさせる要素は、何らかの方法で幅が指定されていなければなりません。置換要素の場合は要素自体が内在する幅が採用され得ますが、そうでない場合、幅指定のないフロートは幅が 0 とみなされてしまいますので注意が必要です。
左フロートは、可能な限り左に、可能な限り上に配置されますが、以下の制限を越えることはありません。
原則として、フロートが包含ブロックからはみ出すことはありません。ただし、左フロートがきっちり左に寄せられていて、しかしながらフロートの幅が包含ブロックの幅よりも広いような場合、右にはみ出します。
フロート同士が重なることはありません。二つの左フロートが重なりそうなときは、二つ目の左フロートは一つ目のフロートの下に配置されます。左右のフロートが重なりそうなときも同様です。
フロートの上端は、ソース内でそれ以前に出現する要素よりも上には来ません。
ここでは左フロートについて説明しましたが、右フロートについても同じことが言えます(もちろん、左右は逆になりますが)。
レベル: | 1〜2 |
---|---|
値: | none | left | right | both |
初期値: | none |
適用対象: | ブロック要素 |
継承: | しない |
パーセント値: | なし |
適用メディア: | 視覚 |
clear: プロパティを指定すると、フロートによる流し込みを解除することが出来ます。
clear: left の指定があると、その要素の上境界線の上端(マージンの上端ではありません)が、ソース文書内でそれ以前に出現する左フロートの下端よりも下に来るように、要素の上マージンを大きくします。clear: right なら右フロートについて同じことを行います。clear: both であれば左右のフロートについて行います。
初期値は clear: none で、このような制御は特に行いません。
レベル: | 2 |
---|---|
値: | auto | <整数値> |
初期値: | auto |
適用対象: | 位置指定された要素 |
継承: | しない |
パーセント値: | なし |
適用メディア: | 視覚 |
z-index プロパティは、要素の Z軸方向の位置を指定します。左右方向の位置が X軸、上下の位置が Y軸、そして Z軸は前後の位置です。
たとえば、以下のような HTML と CSS の組み合わせを考えてみましょう。
p{ position: relative; top: -1.2em; background: #fff; color: #000; margin: 0.5em; } hr{ margin: 0.5em; } ... <hr><p id="test1">HTML鳩丸倶楽部</p> <hr><p id="test2">HTML鳩丸倶楽部</p> <hr><p id="test3">HTML鳩丸倶楽部</p>
P要素には position: relative; と top: -1.2em が指定されていますから、一つ前の HR要素と重なり合うことになります。このとき、P要素に含まれる文字は、HR によって描画された線の上に重なるのでしょうか、それとも下に重なるのでしょうか。
z-index は、このように要素が重なったときの上下関係を規定します。z-index プロパティに大きな値が指定されているものほど前方に来ます。
たとえば、先程の例に以下のような指定を加えます。
#test1{ z-index: auto; } #test2{ z-index: -1; } #test3{ z-index: 1; }
すると、たとえばこのようになります。
0を基準として、正の数が指定されていれば前方に、負の数が指定されていれば後方に配置されます。たとえば、z-index: -3 が指定されたものと z-index: -8 が指定されたものが重なったとき、-3 よりも -8 の方が後ろに行くわけです。
z-index の既定値は auto で、これは親要素と同じ前後関係として配置されます。
レベル: | 2 |
---|---|
値: | visible | hidden | scroll | auto |
初期値: | visible |
適用対象: | ブロック要素と置換要素 |
継承: | しない |
パーセント値: | 不可 |
適用メディア: | 視覚 |
無限にスクロールするメディアでは、ある要素はいくらでも上下に伸びることが出来て、中身のテキストがあふれるようなことはありません。しかし、要素の幅や高さに限界が定められていると、子要素のテキストが収まりきらないことがあります。具体的には、以下のような場合があります。
このような理由によって子要素が親要素の中に収まりきらないとき、その挙動を決めるのが overflow プロパティです。
visible が指定されていると、子要素は親要素からはみ出して外側にレンダリングされ得ます。切り抜きなどは行われません。
hidden が指定されていると、はみ出す部分は切り抜かれ、表示されません。また、スクロールバーなども提供されません。このとき、表示される部分の大きさと形は、clipプロパティによって決められます。
scroll が指定されていると、スクロールバーが表示されて、スクロールによってはみ出した部分を見ることが出来るようになります。このとき、たとえ内容が親要素に全て納まっていてもスクロールバーは表示されるので注意してください。はみ出さない場合にはスクロールバーを表示させたくない、という場合は auto を使います。
auto が指定されていると、はみ出し部分の処理はユーザエージェントに任されます。処理方法としては、「はみ出している場合はスクロールバーを提供する」というような動作が望まれます。
レベル: | 2 |
---|---|
値: | <形> | auto |
初期値: | auto |
適用対象: | ブロック要素と置換要素 |
継承: | しない |
パーセント値: | 不可 |
適用メディア: | 視覚 |
clip プロパティを使うと、要素を特定の形状に切り抜くことができます。
clip プロパティで指定された形状の部分はそのまま表示され、その外の部分は「はみ出す」ことになります。はみ出し部分をどう扱うかは overflowプロパティに依存します。
クリップする形状は、rect() 関数で指定します。rect(<top> <right> <bottom> <left>) という形で、要素の上、右、下、左の端からの距離を記述します。CSS2 で使えるのは、矩形だけです。
レベル: | 2 |
---|---|
値: | visible | hidden | collapse |
初期値: | visible |
適用対象: | あらゆる要素に適用可能 |
継承: | する |
パーセント値: | 不可 |
適用メディア: | 視覚 |
visibilityプロパティは、その要素の可視/不可視を指定します。
初期値は visible で、これは普通に「見える」状態です。
hidden を指定すると、要素は不可視になります。不可視になった要素は見えなくなりますが、要素自体がなくなってしまうわけではなく、レンダリングもされます。その要素が通常フローにあるなら、visibility: hidden が指定された要素の閉めるべき場所にはぽっかりと空間が開きます。空間も空けたくない(要素自体レンダリングしたくない)場合は、visibility ではなく、displayプロパティに none を指定してください。
もう一つ、collapse という値があります。visibility: collapse を指定された要素は、visibility: hidden と同じように、不可視になります。しかし、これが表の列、列グループ、行、行グループであるような要素(daiplayプロパティが table-column, table-column-group, table-row, table-header-group, table-footer-group, table-row-group のいずれかであるような要素)に指定された場合、その要素の占める空間はつぶされ(collapse され)、詰められます。