.NET 開発基盤部会 Wiki
目次 †
概要 †
CSSのレイアウトって難しいですね。
というか専門的にやったことなかったので、
この際、色々と調べてみました。
基本 †
以下のコンテンツを参考にしました。
position プロパティ †
- ボックスの配置位置を決めるためのボックスの配置方法を指定
- 指定できる値には、static、relative、absolute、fixed がある。
static（静的配置） †
- 既定値（position プロパティを指定しないとき）
- 親ボックスの左上から左下に順にスタックさせる配置方法
- 通常フローと呼ばれるスタック方式
relative（相対配置） †
- 親ボックスの左 or 下から、左下に順にスタックさせる配置方法
- 左上の親ボックスからの相対位置をtop、left、right、bottom プロパティで指定可
- これも通常フローと呼ばれるスタック方式
absolute（絶対配置） †
- top、left、right、bottom などの プロパティを用いて配置
- 親ボックスとなるのは、
- static 以外の値が指定されているボックスになる。
- 親ボックスがない場合、画面の表示領域が配置の基準点になる。
- これはスタックしないので、フローではない。
fixed（固定配置） †
- absolute を指定したときと同じ仕組みで配置
- absolute と異なる点、
- 配置位置が”画面表示領域”に対して固定される点。
- 従って、スクロールしても、常に同じ位置に表示され固定される。
- 同様にスタックしないので、フローではない。
floatプロパティ †
- ボックスを左、または右に寄せて配置
- 後続の内容は 指定した方向と反対方向にスタックさせる配置方法
- ブロックボックスを右から左 or 左から右にスタックさせるフローを実装可
ボックスモデル †
内容（コンテンツ） †
コンテンツ自体。
ボーダー（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要素を設定したコンテナを追加する。
個別 †
中央揃え †
Bootstrap †
Flexbox †
Flexbox = Flexible Box Layout Module
- CSS3から導入されたレイアウトモジュール
- floatを使用しなくて済むようになる。
参考 †
参考 †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
