.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

CSSのレイアウトって難しいですね。

というか専門的にやったことなかったので、
この際、色々と調べてみました。

基本

ボックスモデル

内容(コンテンツ)

コンテンツ自体。

ボーダー(border)

内容とボーダーの間の余白(padding)

ボーダーと他のボックスとの間の余白(margin)

包含ブロック(コンテナブロック)

子要素の位置と大きさは、包含ブロックに依存

包含ブロック≠親要素

基本的に=親要素でも、position プロパティの指定によって異なる。

ブロックボックスインラインボックス

包含ブロック内に配置されるボックスは、
ブロックボックスインラインボックスのふたつに分けられる。

ブロックボックス

インラインボックス

displayプロパティ

配置方法(position プロパティ)

static(静的配置)

relative(相対配置)

absolute(絶対配置)

fixed(固定配置)

スタック方法(floatプロパティ)

ブロックボックスインラインボックスのように、左、または右に寄せて配置し、
後続のブロックボックスを 指定した方向と反対方向にスタックさせる配置方法

float プロパティのフロート解除

個別

中央揃え

横並び

ボックスレイアウト

その他

Bootstrapのレイアウト

CSS3のレイアウト(Flexbox)

参考

ホームページ作成 Note

http://www7b.biglobe.ne.jp/~homepage-note/index.html

CSSでレイアウト

http://www7b.biglobe.ne.jp/~homepage-note/css-base-4.html

Webデザインレシピ


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS