HTML5/CSS3の授業ノート

配置方法を指定したい

要素が生成するボックスの表示位置を決めるための、配置方法を指定します。

position:キーワード;

継承

継承しない

適用要素

すべての要素

値

説明

static

通常の配置で表示
top,right,bottom,leftは無効

relative

通常配置される場所からの相対的な位置に配置。
この後に続くボックスは、このボックスが通常に配置されているものとして配置される。
子のボックスはこれを基準にする

absolute

絶対的な位置。
親要素にstatic以外が設定されていればそのブロック、なければbody(表示領域)を基準としてそこからの距離で配置する。
他の要素の配置に関係なく独立した配置になる

fixed

通常はウィンドウの表示領域を基準とし、そこからの距離で配置。
独立した配置になり、位置が固定されてスクロールしても移動しなくなる

*は初期値

要素を配置する位置を指定したい

基準となるボックスから該当要素のボックスまでの距離を指定して、要素が配置される位置を指定します。
positionプロパティで「static」以外の値が指定されている要素に有効です。
top,right,bottom,leftプロパティのうち、2つを使って指定します。

top:キーワード; / right:キーワード; / bottom:キーワード; / left:キーワード;

継承

継承しない

適用要素

positionプロパティで"static"以外の値が設定されている要素

値

説明

auto

自動的に指定される

0

端。left:0;なら親ボックスの左端に寄る

(数値)px、(数値)％

基準となるボックスからその要素のボックスまでの距離を指定して、配置する位置を決める

*は初期値

要素の重なる順番を指定したい

位置指定されて重なったボックスの重なり順を指定します。
positionプロパティで「static」以外の値が指定されている要素に有効です。それ以外では無効になりますので注意してください。
0を基準にして数値が大きいほど前へ、小さいほど後ろへ回ります。

z-index:キーワード;

継承

継承しない

適用要素

positionプロパティで"static"以外の値が設定されている要素

値

説明

auto

HTMLに記述された順序が後ろのものほど全面に表示される

整数値

負の値も設定可能。設定できる数値は最大±2147483647

*は初期値

positionに関わるプロパティの練習用ファイルダウンロード

要素の表示形式を指定したい

display:キーワード;

継承

継承しない

適用要素

すべての要素

値

説明

block

指定した要素をブロックレベルにし、要素の前後で改行する。width,heightの指定が可能になる。

inline

指定した要素をインライン要素にする。次の要素は空間があれば同じ行に並ぶ。width,heightの指定ができなくなる。

inline-block

ブロックレベル要素のようにボックスを生成しますが、インライン要素のように空間があれば同じ行に並ぶ。width,heightの指定が可能になる。

none

要素の表示を無くし、領域も確保しない。要素が通常占める領域を確保しつつ、何も表示しないようにする場合はvisibility プロパティを使用する。

flex

ブロックレベル要素のように動作しながら、そのコンテンツをフレックスボックスモデルに従ってレイアウトする。

初期値は要素によって異なる。

練習用ファイルダウンロード

ボックスから内容が溢れる場合の表示方法を指定したい

要素の大きさから内容がはみ出た場合の表示方法を指定します。
幅(width)や高さ(height)で大きさを指定したボックスよりも内容量が多くはみ出してしまったものをどう表示させるのか、または隠すのかという設定です。

overflow:キーワード; / overflow-x:キーワード;(横方向) / overflow-y:キーワード;(縦方向)

継承

継承しない

適用要素

ブロックレベル要素、置換要素

値

説明

visible

収まりきれない内容はボックスからはみだして表示される

hidden

収まりきれない内容は表示せず、収まった分だけ表示する。

scroll

要素の縦横を固定し、スクロールして内容を表示できるようにする。

auto

ブラウザが自動的に処理。一般的にはscroll。

*は初期値

overflow-x(横方向)/y(縦方向)は、縦横同じではなく個別の設定をする場合に使います。
縦方向のみのスクロールバーを表示したい場合はoverflow-y:scroll;と記述します。

html{overflow-y:scroll;}

表示・非表示を指定したい

ボックスの表示・非表示を指定します。
非表示を指定した場合でも、表示した場合と同じだけのスペースは確保されたままになり、レイアウトに影響します。

visibility:キーワード;

継承

継承する

適用要素

すべての要素

値

説明

visible

表示される

hidden

ボックスが表示されない。(ただし領域は確保されたまま)

*は初期値