ばけらの CSSリファレンス

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 に対応していない環境では、マージンの代わりに水平線で区切りを明示することができます。

position プロパティを指定すると、ボックスの配置方法を変えることができます。

• static …… 初期値です。ボックスは通常に流し込まれます。top, right, bottom, leftの指定は無視されます。

• relative …… 相対配置を行います。top, right, bottom, leftの値は、static と同様に配置された際の位置からの相対位置を指定することになります。すなわち、static と同様に配置されたあと、指定に従って位置をずらすことになります。なお、後続のボックスは、相対配置されていない時と同じように配置されます。

• absolute …… ボックスの位置を絶対指定します。top, right, bottom, leftの値は、containing block からの距離となります。絶対配置されたブロックは、後続するブロックの配置には全く影響しません。また、絶対配置されたブロックのマージンは、他のどのマージンとも重なりません。

• fixed …… ボックスは position: absolute; の時と同じように配置されますが、それに加えて固定されます。連続メディアならビューポートに対して固定され、スクロールしても同じ位置にとどまります。ページメディアならページに対して固定され、各ページの同じ位置に出力されます。

位置指定される要素の上下左右の位置を指定します。position の指定が static 以外の時のみ有効です。top で上からの距離を、right, bottom, left はそれぞれ右、下、左からの距離を指定しますが、position プロパティの値によってその意味するところは異なってきます。詳しくは position を参照してください。

float プロパティを指定すると、フロート(浮動)の指定を行うことが出来ます。

• left …… 左にフロートします。要素は左端に寄せられ、続く内容はその要素の右側に流し込まれます。

• right …… 右にフロートします。

• none …… フロートしません。

フロートさせる要素は、何らかの方法で幅が指定されていなければなりません。置換要素の場合は要素自体が内在する幅が採用され得ますが、そうでない場合、幅指定のないフロートは幅が 0 とみなされてしまいますので注意が必要です。

左フロートは、可能な限り左に、可能な限り上に配置されますが、以下の制限を越えることはありません。

• 原則として、フロートが包含ブロックからはみ出すことはありません。ただし、左フロートがきっちり左に寄せられていて、しかしながらフロートの幅が包含ブロックの幅よりも広いような場合、右にはみ出します。

• フロート同士が重なることはありません。二つの左フロートが重なりそうなときは、二つ目の左フロートは一つ目のフロートの下に配置されます。左右のフロートが重なりそうなときも同様です。

• フロートの上端は、ソース内でそれ以前に出現する要素よりも上には来ません。

ここでは左フロートについて説明しましたが、右フロートについても同じことが言えます(もちろん、左右は逆になりますが)。

clear: プロパティを指定すると、フロートによる流し込みを解除することが出来ます。

clear: left の指定があると、その要素の上境界線の上端(マージンの上端ではありません)が、ソース文書内でそれ以前に出現する左フロートの下端よりも下に来るように、要素の上マージンを大きくします。clear: right なら右フロートについて同じことを行います。clear: both であれば左右のフロートについて行います。

初期値は clear: none で、このような制御は特に行いません。

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 で、これは親要素と同じ前後関係として配置されます。

無限にスクロールするメディアでは、ある要素はいくらでも上下に伸びることが出来て、中身のテキストがあふれるようなことはありません。しかし、要素の幅や高さに限界が定められていると、子要素のテキストが収まりきらないことがあります。具体的には、以下のような場合があります。

• white-space: nowrap などによってテキストの改行が禁止されている場合。行ボックスは折り返せないので、親要素の横幅を越えてしまうことがある。
• 子要素がブロック要素や置換要素で、親要素よりも大きな横幅を持つ場合。たとえば、子要素に親要素より大きな width が指定されていたり、子要素が画面の横幅を越えるような大きな画像であったりする場合。
• 親要素に height が指定されていて、高さが決められている場合。親要素は上下に伸びる事がないので、中身のテキストが収まりきらないことがある。
• 子要素が絶対配置されている場合。たとえば、top: -10px; などと指定されていると、その要素は containing block の上にはみ出します。
• 子要素が負のマージンを持つ場合。たとえば、margin-top: -10px; などと指定されていると、その要素は親要素の上にはみ出します。

このような理由によって子要素が親要素の中に収まりきらないとき、その挙動を決めるのが overflow プロパティです。

visible が指定されていると、子要素は親要素からはみ出して外側にレンダリングされ得ます。切り抜きなどは行われません。

hidden が指定されていると、はみ出す部分は切り抜かれ、表示されません。また、スクロールバーなども提供されません。このとき、表示される部分の大きさと形は、clipプロパティによって決められます。

scroll が指定されていると、スクロールバーが表示されて、スクロールによってはみ出した部分を見ることが出来るようになります。このとき、たとえ内容が親要素に全て納まっていてもスクロールバーは表示されるので注意してください。はみ出さない場合にはスクロールバーを表示させたくない、という場合は auto を使います。

auto が指定されていると、はみ出し部分の処理はユーザエージェントに任されます。処理方法としては、「はみ出している場合はスクロールバーを提供する」というような動作が望まれます。

clip プロパティを使うと、要素を特定の形状に切り抜くことができます。

clip プロパティで指定された形状の部分はそのまま表示され、その外の部分は「はみ出す」ことになります。はみ出し部分をどう扱うかは overflowプロパティに依存します。

クリップする形状は、rect() 関数で指定します。rect(<top> <right> <bottom> <left>) という形で、要素の上、右、下、左の端からの距離を記述します。CSS2 で使えるのは、矩形だけです。

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 され)、詰められます。