「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
CSSのレイアウトって難しいですね。
というか専門的にやったことなかったので、
この際、色々と調べてみました。
基本 †
ボックスモデル †
内容（コンテンツ） †
コンテンツ自体。
ボーダー（border） †
- 境界線の太さを指定する。
- borderプロパティにて指定。
内容とボーダーの間の余白（padding） †
- 境界線とコンテンツの間の余白を指定する。
- paddingプロパティにて指定。
ボーダーと他のボックスとの間の余白（margin） †
- 境界線と包含ブロックの間の余白を指定する。
- marginプロパティにて指定。
- marginの重ね合わせ。
- 上下の要素間でmarginの重ね合わせが起きる。
- 親子の要素間でも、marginの重ね合わせが起きる。
- ただし、親要素にborderを指定すると重ね合わせは起きない。
- ただし、親要素にpaddingを指定すると重ね合わせは起きない。
包含ブロック（コンテナブロック） †
子要素の位置と大きさは、包含ブロックに依存 †
- 大きさ：width、height などの プロパティ
- 子要素に width、height を指定してない場合、
- 子要素に width、height に％指定をしている場合
包含ブロック≠親要素 †
基本的に＝親要素でも、position プロパティの指定によって異なる。
包含ブロック内に配置されるボックスは、
ブロックボックスとインラインボックスのふたつに分けられる。
ブロックボックス †
- 行を専有して、下にスタックされていく。
- width や height を指定できる。
- ブロックレベル要素はブロックボックスを生成する。
インラインボックス †
- 行内に、どんどん右・下にスタックされていく。
- width や height を指定できない（替わりにline-heightを指定可能。）。
- インラインレベル要素はインラインボックスを生成する。
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 以外の値が指定されているボックスになる。
- 包含ブロックが無い場合、画面の表示領域が配置の基準点になる。
- これはスタックしないので、フローではない。
fixed（固定配置） †
- absolute を指定したときと同じ仕組みで配置
- absolute と異なる点、
- 配置位置が”画面表示領域”に対して固定される点。
- 従って、スクロールしても、常に同じ位置に表示され固定される。
- 同様にスタックしないので、フローではない。
スタック方法（floatプロパティ） †
ブロックボックスをインラインボックスのように、左、または右に寄せて配置し、
後続のブロックボックスを 指定した方向と反対方向にスタックさせる配置方法
- ブロックボックスのposition プロパティがstatic（静的配置）・relative（相対配置）に設定されている場合、
ブロックボックスがスタックされる方向を垂直方向から水平方向の左・右どちらかに変更する。
- これにより、ブロックボックスを右から左 or 左から右にスタックさせるフローを実装が可能になる。
float プロパティのフロート解除 †
- clear プロパティ
フロートしているブロックレベル要素の後続のブロックレベル要素に指定
- clear: left; 左側フロート要素の回り込み解除
- clear: right; 右側フロート要素の回り込み解除
- clear: both; 両側すべてのフロート要素の回り込み解除
- overflow: hidden
後続のブロックレベル要素ではなく、スタック対象ブロックに指定したいときに使用する。
- clearfix という手法
overflow: hiddenと同じように、スタック対象ブロックに指定したいときに使用する。
個別 †
中央揃え †
text-align:center; vertical-align:middle; †
- インラインレベル要素を上下・左右の中央揃えにする最も一般的な方法。
- ブロックレベル要素は中央寄せにならないので、
line-height:heightの値px †
- インラインレベル要素を上下中央揃えにする方法。
- heightの値と、line-heightの値を同じにして上下中央揃え。
- 2行以上になると、2行目以降が要素からはみ出してしまう。
padding: xx px yy px; †
- 自要素に、高さ、幅の指定が無い場合のみ有効。
- 値を2つ指定したpaddingにより上下・左右の中央揃えにする。
- この場合、paddingは、記述した順に[上下][左右]のパディングとなる。
marginを使う。 †
- margin:auto
- 上下・左右の中央揃えにする。
- 自要素に、高さ、幅の指定が有る場合のみ有効。
- 自要素に、高さ、幅の指定が無い場合、
自要素が親要素のサイズに合わせて伸びてしまう。
- margin:0 auto;
- 左右の中央揃えにする。
- 自要素に、幅の指定が有る場合のみ有効。
- 自要素に、幅の指定が無い場合、
自要素が親要素のサイズに合わせて伸びてしまう。
positionを使う。 †
上下・左右の中央揃えにする。
- 包含ブロック（コンテナブロック）からの絶対座標配置（position:absolute;）
- 左上を、包含ブロック（コンテナブロック）中央に合わせる（top:50%; left:50%;）
- そこから margin を使用して、左上を、中央に調整する
- margin:-1.5em 0 0 -50%;
- もしくは、CSS3の transform: translate(-50%,-50%);
display: table-cell;、display:table-cell; †
- 親要素に「display:table;」と子要素に「display:table-cell;」を指定する。
- display:table-row;
- tr要素のようになる。
- 子要素の高さが同じになる。
参考 †
横並び †
ボックスレイアウト †
- 縦並び要素
- 横並び（要素をfloating）
- 横並び（要素floating）の解除
after要素を設定したコンテナを追加する。
その他 †
CSS3のレイアウト †
box-sizing †
参考 †
ホームページ作成 Note †
http://www7b.biglobe.ne.jp/~homepage-note/index.html
CSSでレイアウト †
http://www7b.biglobe.ne.jp/~homepage-note/css-base-4.html
- 難しいCSSでレイアウト
- positionプロパティ
- floatプロパティ
- CSSテーブルレイアウト
- CSS 実用サンプル
- 2カラムCSSレイアウト例
- 3カラムCSSレイアウト例
Webデザインレシピ †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
