ばけらの CSSリファレンス

レンダリング

ボックスの種類を指定する …… display

ボックスの位置を指定する …… position, top, right, left, bottom

ボックスを浮かせる …… float, clear

重なったボックスの前後関係を指定する ……z-index

あふれた内容の取り扱い …… overflow

クリッピング …… clip

表示/非表示 …… visibility

display - ボックスの種類を決める

レベル: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 プロパティは、ある要素がどのようなボックスを生成するのかを規定します。

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 - 配置方法の指定

レベル:2
値:static | relative | absolute | fixed
初期値:static
適用対象:全ての要素、ただし生成された内容を除く
継承:しない
パーセント値:なし
適用メディア:視覚

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

↑先頭へ

top, right, bottom, left - 上位置、右位置、下位置、左位置

レベル:1〜2
値:<長さ> | <パーセント値> | auto
初期値:0
適用対象:位置指定される要素
継承:しない
パーセント値:top, bottom は containing block の高さ、right, left は横幅に対する割合
適用メディア:視覚

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

↑先頭へ

float - 浮動の指定

レベル:1〜2
値:left | right | none
初期値:none
適用対象:あらゆる要素、ただし位置指定されたものと生成された物を除く
継承:しない
パーセント値:なし
適用メディア:視覚

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

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

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

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

↑先頭へ

clear - フロート流し込みのクリア

レベル:1〜2
値:none | left | right | both
初期値:none
適用対象:ブロック要素
継承:しない
パーセント値:なし
適用メディア:視覚

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

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

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

↑先頭へ

z-index - Z軸方向の位置指定

レベル: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; }

すると、たとえばこのようになります。

[z-indexの図]

0を基準として、正の数が指定されていれば前方に、負の数が指定されていれば後方に配置されます。たとえば、z-index: -3 が指定されたものと z-index: -8 が指定されたものが重なったとき、-3 よりも -8 の方が後ろに行くわけです。

z-index の既定値は auto で、これは親要素と同じ前後関係として配置されます。

↑先頭へ

overflow - あふれた内容の取り扱い

レベル:2
値:visible | hidden | scroll | auto
初期値:visible
適用対象:ブロック要素と置換要素
継承:しない
パーセント値:不可
適用メディア:視覚

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

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

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

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

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

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

↑先頭へ

clip - クリッピング

レベル:2
値:<> | auto
初期値:auto
適用対象:ブロック要素と置換要素
継承:しない
パーセント値:不可
適用メディア:視覚

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

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

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

↑先頭へ

visibility - 要素の可視性

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

↑先頭へ


ばけらのCSSリファレンス

HTML鳩丸倶楽部

水無月ばけら, MINAZUKI Bakera
E-mail: bakera@star.email.ne.jp