.NET 開発基盤部会 Wiki
目次 †
概要 †
CSSのレイアウトって難しいですね。
というか専門的にやったことなかったので、
この際、色々と調べてみました。
基本 †
以下のコンテンツを参考にしました。
CSSでレイアウト †
http://www7b.biglobe.ne.jp/~homepage-note/css-base-4.html
- 難しいCSSでレイアウト
- positionプロパティ
- floatプロパティ
- CSSテーブルレイアウト
- CSS 実用サンプル
- 2カラムCSSレイアウト例
- 3カラムCSSレイアウト例
Webデザインレシピ †
配置方法（position プロパティ †
- ボックスの配置位置を決めるためのボックスの配置方法を指定
- 指定できる値には、static、relative、absolute、fixed がある。
static（静的配置） †
- 既定値（position プロパティを指定しないとき）
- 包含ブロック or スタック対象ブロックの左下から、左下方向に順にスタックさせる配置方法
- 通常フローと呼ばれるスタック方式
relative（相対配置） †
- 包含ブロック or スタック対象ブロックの左下から、左下方向に順にスタックさせる配置方法
- スタック開始位置からの左上座標の相対位置をtop、left、right、bottom プロパティで指定可
- これも通常フローと呼ばれるスタック方式
absolute（絶対配置） †
- 包含ブロックの左下から、
左上座標の絶対配置をtop、left、right、bottom プロパティで指定可
- 包含ブロックとなるのは、
- static 以外の値が指定されているボックスになる。
- 包含ブロックが無い場合、画面の表示領域が配置の基準点になる。
- これはスタックしないので、フローではない。
fixed（固定配置） †
- absolute を指定したときと同じ仕組みで配置
- absolute と異なる点、
- 配置位置が”画面表示領域”に対して固定される点。
- 従って、スクロールしても、常に同じ位置に表示され固定される。
- 同様にスタックしないので、フローではない。
スタック方法（floatプロパティ †
- ブロックボックスのposition プロパティがstatic（静的配置）・relative（相対配置）に設定されている場合、
ブロックボックスがスタックされる方向を垂直方向から水平方向の左・右どちらかに変更する。
- ブロックボックスをインラインボックスのように、左、または右に寄せて配置し、
後続のブロックボックスを 指定した方向と反対方向にスタックさせる配置方法
- これにより、ブロックボックスを右から左 or 左から右にスタックさせるフローを実装可
float プロパティのフロート解除 †
- clear プロパティ
フロートしているブロックレベル要素の後続のブロックレベル要素に指定
- clear: left; 左側フロート要素の回り込み解除
- clear: right; 右側フロート要素の回り込み解除
- clear: both; 両側すべてのフロート要素の回り込み解除
- overflow: hidden
後続のブロックレベル要素ではなく、スタック対象ブロックに指定したいときに使用する。
- clearfix という手法
overflow: hiddenと同じように、スタック対象ブロックに指定したいときに使用する。
ボックスモデル †
内容（コンテンツ） †
コンテンツ自体。
ボーダー（border） †
- 境界線の太さを指定する。
- borderプロパティにて指定。
内容とボーダーの間の余白（padding） †
- 境界線とコンテンツの間の余白を指定する。
- paddingプロパティにて指定。
ボーダーと他のボックスとの間の余白（margin） †
- 境界線と包含ブロックの間の余白を指定する。
- marginプロパティにて指定。
包含ブロック（コンテナブロック） †
子要素の位置と大きさは、包含ブロックに依存 †
- 位置：
- positionプロパティと、
- top、left、right、bottom などの プロパティ
- 大きさ：width、height などの プロパティ
- 子要素に width、height を指定してない場合、
- 子要素に width、height に％指定をしている場合
包含ブロック≠親要素 †
基本的に＝親要素でも、positionプロパティの指定によって異なる。
ブロックボックスとインラインボックス †
包含ブロック内に配置されるボックスは、
ブロックボックスとインラインボックスのふたつに分けられる。
ブロックボックス †
- 行を専有して、下にスタックされていく。
- width や height を指定できる。
- ブロックレベル要素はブロックボックスを生成する。
インラインボックス †
- 行内に、どんどん右・下にスタックされていく。
- width や height を指定できない。
- インラインレベル要素はインラインボックスを生成する。
displayプロパティ †
- ブロックレベル要素にdisplay: inline を指定すれば、インラインボックスとして表示
- インラインレベル要素にdisplay: block を指定すれば、ブロックボックスとして表示
これにより、単なるリンクをボタンのように表示することができる。
ボックスレイアウト †
- 縦並び要素
- 横並び（要素をfloating）
- 横並び（要素floating）の解除
after要素を設定したコンテナを追加する。
個別 †
中央揃え †
横並び †
Flexbox †
Flexbox = Flexible Box Layout Module
参考 †
参考 †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
