「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
CSSのレイアウトって難しいですね。
というか専門的にやったことなかったので、
この際、色々と調べてみました。
基本 †
ボックスモデル †
コンテンツ（content） †
- コンテンツ自体。
- コンテンツのwidth, height (= ボックスサイズ)は、
下記のボーダー（border）と、余白（padding、margin）を含まない。
ボーダー（border） †
- 境界線の太さを指定する。
- borderプロパティにて指定。
内容とボーダーの間の余白（padding） †
- 境界線とコンテンツの間の余白を指定する。
- paddingプロパティにて指定。
ボーダーと他のボックスとの間の余白（margin） †
- 境界線と包含ブロックの間の余白を指定する。
- marginプロパティにて指定。
- marginの重ね合わせ。
- 上下の要素間でmarginの重ね合わせが起きる。
- 親子の要素間でも、marginの重ね合わせが起きる。
- ただし、親要素にborderを指定すると重ね合わせは起きない。
- ただし、親要素にpaddingを指定すると重ね合わせは起きない。
包含ブロック（コンテナブロック） †
最も近い祖先の要素にあたるブロックボックスを形成する要素の内容領域
子要素の位置と大きさは、包含ブロックに依存 †
- 自要素の大きさ：width、height などの プロパティに依存。
- 子要素に width、height を指定してない場合、
- 子要素に width、height に % 指定をしている場合
子要素の位置の基準点 ≠ 包含ブロックのケース †
- 基本的に、子要素の位置の基準点は ≒ 包含ブロックだが、
- 自要素のposition プロパティがstaticの場合は、
子要素の位置の基準点は包含ブロック内の左上の要素になる。
（通常フロー：左上から右下にスタックしていく）。
包含ブロック内に配置されるボックスは、
ブロックボックスとインラインボックスのふたつに分けられる。
ブロックボックス †
- 行を専有して、下にスタックされていく。
- width や height を指定できる。
- ブロックレベル要素はブロックボックスを生成する。
インラインボックス †
- 行内に、どんどん右・下にスタックされていく。
- 以下を指定できない（img、input、textareaを除く）
- width や height (line-heightで代替)。
- margin、paddingの上下
- インラインレベル要素はインラインボックスを生成する。
displayプロパティ †
- ブロックレベル要素にdisplay: inline を指定すれば、インラインボックスとして表示
- インラインレベル要素にdisplay: block を指定すれば、ブロックボックスとして表示
これにより、単なるリンクをボタンのように表示することができる。
配置方法（position プロパティ） †
- ボックスの配置位置を決めるためのボックスの配置方法を指定
- 指定できる値には、static、relative、absolute、fixed がある。
static（静的配置） †
- 既定値（position プロパティを指定しないとき）
- 包含ブロックの左上 or スタック対象ブロックの右下が起点となる。
- 起点から、右下方向に順にスタックさせる通常フローと呼ばれるスタック方式
relative（相対配置） †
- 包含ブロックの左上 or スタック対象ブロックの右下が起点となる。
- 起点をtop、left、right、bottom プロパティの相対位置指定で変更可能。
- 変更後の起点から、右下方向に順にスタックさせる通常フローと呼ばれるスタック方式
absolute（絶対配置） †
- 包含ブロックの左上から、
左上座標の絶対配置をtop、left、right、bottom プロパティで指定可
- この場合、起点となるのは、
- static 以外の値が指定されているボックスの左上になる。
- 起点となるボックスがない場合、”HTMLの描画領域”が配置位置の基準点になる。
- これはスタックしないので、フローではない（Z軸で重なる）。
fixed（固定配置） †
- absolute を指定したときと同じ様な仕組みで配置
- absolute と異なる点、
- 配置位置の基準点が”画面表示領域”に固定される点。
- 従って、スクロールしても、常に同じ位置に表示され固定される。
- 同様に、これはスタックしないので、フローではない（Z軸で重なる）。
スタック方向（floatプロパティ） †
- ブロックボックスをフロートさせると、横いっぱいに広がらなくなる。
このため、幅指定が必要になる。決まったサイズがなければ、width: autoを指定する。
position プロパティ †
- absolute（絶対配置）・fixed（固定配置） に設定されている場合、
- static（静的配置）・relative（相対配置）に設定されている場合、
- ブロックボックスがスタックされる方向を
float: left; or float: right;によって、垂直方向から水平方向の左・右どちらかに変更する。
- これにより、ブロックボックスを右から左 or 左から右にスタックさせるフローを実装が可能になる。
float プロパティのフロート解除 †
- 子ブロックボックスがfloatプロパティで浮いて、親ブロックボックスが高さを認識できなくなる。
- これにより、高さによって決まる親ブロックボックスの描写領域が表示されなくなる。
- 以下の方法でfloatプロパティのフロートを解除することでこの問題にも対応できる。
- clear プロパティ
フロートしている子ブロックボックスの後続のブロックボックスに指定する。
子ブロックボックスの後続のブロックボックスが存在しない場合、空のdivを置いてコレに適用する。
- clear: left; 左側フロート要素の回り込み解除
- clear: right; 右側フロート要素の回り込み解除
- clear: both; 両側すべてのフロート要素の回り込み解除
- overflow: hidden
後続のブロックボックスではなく、親ブロックボックスにoverflow: hiddenを指定する。
（autoまたはscrollでも解除可能だがスクロールバーが表示されるので問題）
個別 †
tableタグ †
古の方法。
メリット †
CSSのレイアウトより簡単なので、
- 初心者でも使いやすい。
- 難しいことをしないのでブラウザ間の差異が無い。
デメリット †
以下の理由で、コンテンツのメンテナンス性の低下、レイアウト変更の手間が増加。
- HTMLとデザインを切り離せない（CSSなら切り離すことができる）。
- 文章構造の論理性・汎用性が確保できなくなる。
- 複雑化し易い（エクセル方眼紙 in Webみたいなことに）
参考 †
横並べ †
以下の2つの方法がある。
中央揃え †
text-align:center; vertical-align:middle; †
- インラインレベル要素を上下・左右の中央揃えにする最も一般的な方法。
- ブロックレベル要素は中央寄せにならないので、
line-height:heightの値px †
- インラインレベル要素を上下中央揃えにするハック的な方法。
- heightの値と、line-heightの値を同じにして上下中央揃え。
- 2行以上になると、2行目以降が要素からはみ出してしまう。
padding: xx px yy px; †
- 自要素に、高さ、幅の指定が無い（サイズが可変の）場合のみ有効。
- この場合、paddingは、記述した順に[上下][左右]のパディングとなる。
- この2つの値を指定したpaddingにより上下・左右の中央揃えになる。
marginを使う。 †
応用して、右寄せ・左寄せ、上寄せ・下寄せなどもできる。
- margin:auto
- 上下・左右の中央揃えにする。
- 自要素に、高さ、幅の指定が有るブロックボックスの場合のみ有効。
- 自要素に、高さ、幅の指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。
- margin:auto 0;
- 上下の中央揃えにする。
- 自要素に、高さの指定が有るブロックボックスの場合のみ有効。
- 自要素に、高さの指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。
- margin:0 auto;
- 左右の中央揃えにする。
- 自要素に、幅の指定が有るボックスの場合のみ有効。
- 自要素に、幅の指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。
positionを使う。 †
高さ、幅の指定が無いブロックボックスを上下・左右の中央揃えにする。
- 包含ブロック（コンテナブロック）からの絶対座標配置（position:absolute;）を使用する。
- 左上を、包含ブロック（コンテナブロック）中央に合わせる（top:50%; left:50%;）
- そこからCSS3の transform: translate(-50%,-50%);で左上を中央に調整する
display: table-cell;、display:table-cell; †
- 親要素に「display:table;」と子要素に「display:table-cell;」を指定する。
- display:table-row;
- tr要素のようになる。
- 子要素の高さが同じになる。
参考 †
その他 †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
