要素の表示や配置に関するスタイルを紹介します。
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
- 両方のフロートを解除します。