MitoRoidCSS -レイアウト-
詳細なレイアウト
ウインドウ内におけるボックスの表示位置を詳細にレイアウトする場合は、配置 配置のルールを指定するpositionプロパティとその表示位置までの距離を指定する topプロパティ、leftプロパティ、rightプロパティ、bottomプロパティを使用します。
positionプロパティにてボックスをレイアウトする場合は、表示させたい ボックスの位置をtopプロパティ、leftプロパティなどで、距離を指定する必要があります。
| プロパティ | 値 |
|---|---|
| position | 配置のルールを指定するキーワード |
| top | 基点となる位置上端から表示させたいボックス上端までの距離 |
| left | 基点となる位置左端から、表示させたいボックスの左端までの距離 |
| right | 基点となる位置右端から、表示させたいボックスの右端までの距離 |
| bottom | 基点となる位置下端から、表示させたいボックスの下端までの距離 |
| キーワード | 説明 |
|---|---|
| absolute | 絶対位置への配置となります。 親ボックスにpositionプロパティのstatic以外の値が指定されている 場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic以外の値が 指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 |
| relative | 相対位置への配置となります。 positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 |
| fixed | 絶対位置への配置となるのはabsoluteと同じですが、 スクロールしても位置が固定されたままとなります。 |
| static | 特に配置方法を指定しません。 この値のときには、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 | 指定要素の内容をリスト（箇条書きの項目）として、内容が収められる ボックスとリストのマーカーのためのボックスを生成します。 |