ホーム > HTML > レイアウト

CSS -レイアウト-

詳細なレイアウト

ウインドウ内におけるボックスの表示位置を詳細にレイアウトする場合は、配置 配置のルールを指定するpositionプロパティとその表示位置までの距離を指定する topプロパティ、leftプロパティ、rightプロパティ、bottomプロパティを使用します。

positionプロパティにてボックスをレイアウトする場合は、表示させたい ボックスの位置をtopプロパティ、leftプロパティなどで、距離を指定する必要があります。

プロパティ
position 配置のルールを指定するキーワード
top 基点となる位置上端から表示させたいボックス上端までの距離
left 基点となる位置左端から、表示させたいボックスの左端までの距離
right 基点となる位置右端から、表示させたいボックスの右端までの距離
bottom 基点となる位置下端から、表示させたいボックスの下端までの距離
positionプロパティ
キーワード 説明
absolute 絶対位置への配置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されている 場合には、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティのstatic以外の値が 指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
relative 相対位置への配置となります。
positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
fixed 絶対位置への配置となるのはabsoluteと同じですが、 スクロールしても位置が固定されたままとなります。
static 特に配置方法を指定しません。
この値のときには、top、bottom、left、rightプロパティは適用されません。これが初期値です。
top、bottom、left、rightプロパティ
説明
auto 自動的に調整されます。これが初期値です。
数値 数値にpxやemやexなどの単位をつけて指定します。
割合(%) 基準となる親ボックスの幅・高さに対する割合を%値で指定します。

高さ

ボックス要素の高さを指定する場合は、heightプロパティを使用します

height:値;

説明
auto 状況に応じて自動的に調整されます。これが初期値です。
数値 数値にpxやemやexなどの単位をつけて指定します。
割合(%) %値で指定します。

領域の幅を指定する場合は、widhtプロパティを使用します

widht:値;

説明
auto 状況に応じて自動的に調整されます。これが初期値です。
数値 数値にpxやemやexなどの単位をつけて指定します。
割合(%) %値で指定します。

はみ出た内容の表示方法を指定

ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する 場合は、overflowプロパティを使用します

overflow:値;

説明
visible ボックスからはみ出して表示されます。これが初期値です。
scroll 入りきらない内容はスクロールして見られるようになります。
hidden はみ出た部分は表示されません。
auto ブラウザに依存します。

ボックスの重なりの順序の指定

ボックスの重なりの順序を指定する場合には、z-indexプロパティを使用します

z-index:値;

説明
整数値 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
auto 親要素と同じ階層になります。これが初期値です。

ボックスの表示・非表示の指定

ボックスの表示(visible)・非表示(hidden)を指定する場合には、visibilityプロパティを使用します

非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えても ページのレイアウトは変わりません。

visibility:値;

説明
visible ボックスを表示します。
hidden ボックスを非表示します。
collapse テーブル(表)の行や列にこの値を指定すると、その部分を詰めて表示します。

要素の表示形式を指定

ブロックレベル・インラインレベル等の、要素の表示形式を指定する場合には、 displayプロパティを使用します

非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えても ページのレイアウトは変わりません。

display:値;

説明
none 指定要素とそこに含まれる子要素のボックスが生成されず、表示されません。
block 指定要素がブロックレベルで表示されます。
inline 指定要素がインラインレベルで表示されます。
list-item 指定要素の内容をリスト(箇条書きの項目)として、内容が収められる ボックスとリストのマーカーのためのボックスを生成します。