表示と配置のスタイル

要素の表示や配置に関するスタイルを紹介します。

displayプロパティ

ボックスの表示形式を変更します。表示形式は以下のとおりです。

block(ブロックレベル要素のデフォルト)
ブロックレベル形式で表示します。
inline(インライン要素のデフォルト)
インライン形式で表示します。
inline-block
インラインブロックレベル形式で表示します。
none
存在しないものとして処理します。

overflowプロパティ

ボックスの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible(デフォルト)
高さ、幅の指定を無視してすべて表示します。
hidden
高さ、幅の指定により範囲内のみ表示します。また、回り込み(float)の親要素に指定して、回り込みを解除します。
scroll
スクロールバーを表示します。
auto
ブラウザーの処理に任せます。(ブラウザにより異なる)

overflow-xプロパティ

ボックスの幅の内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible(デフォルト)
幅の指定を無視してすべて表示します。
hidden
幅の指定により範囲内のみ表示します。また、回り込み(float)の親要素に指定して、回り込みを解除します。
scroll
スクロールバーを表示します。
auto
ブラウザーの処理に任せます。(ブラウザにより異なる)

overflow-yプロパティ

ボックスの高さの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible(デフォルト)
高さの指定を無視してすべて表示する。
hidden
高さの指定により範囲内のみ表示。また、回り込み(float)の親要素に指定して、回り込みを解除する。
scroll
スクロールバーを表示
auto
ブラウザーの処理に任せます。(ブラウザにより異なる)

positionプロパティ

要素の配置方法を指定します。配置方法は以下のとおりです。

static(デフォルト)
通常通りの配置をします。
relative
通常通りの位置からの相対的な位置で指定します。また、絶対位置指定(absolute)の親要素に指定して、位置の基準とします。
absolute
親要素に対して絶対的な位置で指定をします。(left/right/top/bottomプロパティを使用)
fixed
位置を固定して配置します。

leftプロパティ

左からの位置を指定します。指定方法は以下のとおりです。

数値+単位
単位には、「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
位置をパーセントで指定します。

rightプロパティ

右からの位置を指定します。指定方法は以下のとおりです。

数値+単位
単位には、「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
位置をパーセントで指定します。

topプロパティ

上からの位置を指定します。指定方法は以下のとおりです。

数値+単位
単位には、「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
位置をパーセントで指定します。

bottomプロパティ

下からの位置を指定します。指定方法は以下のとおりです。

数値+単位
単位には、「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
位置をパーセントで指定します。

z-indexプロパティ

絶対位置指定(absolute)するときの、要素の重ね順を指定します。

数値
整数で指定し、値が大きいほうが上(手前)に表示され、値が小さい方が下(奥)に表示され、上のものに隠れます。

floatプロパティ

画像やボックスをフロートさせ、寄せて配置し、後続するボックスを回りこませます。フロートの種類は以下のとおりです。

left
左に寄せて、下の要素を右に回りこませます。
right
右に寄せて、下の要素を左に回りこませます。
none(デフォルト)
フロートしません。下の要素も回りこみません。

clearプロパティ

floatプロパティにより設定された、フロートを解除します。解除の種類は以下のとおりです。

left
左のフロートのみ解除します。
right
右のフロートのみ解除します。
both
両方のフロートを解除します。