6/13 ボックスモデルとフロート
ボックスモデル
ボックスモデル要素は以下の設定を持つボックスから成り立つ
1.content
2.padding
3.border
4.margin
CSSパネルでの入力
- 上部は四辺一括またはショートハンド
- 四辺分割指定する場合は下部
floatによるレイアウト
- ボックス幅いっぱいだった要素が浮き上がり後続要素が回り込む
- widthでサイズ指定、カラム落ち対策にbox-sizing:border-box
clear
- floatをclear:bothで解除
インライン要素のブロックレベル化
| インライン要素 | 段落内の一部分 | span,a |
|---|---|---|
| ブロックレベル要素 | ボックスにできる（改行伴う） | div,p,h |
aはインライン要素なので文字数に大きさが存在し操作しづらい
displayプロパティ
要素の元々持つ特性を変更できる
| :block | ブロックレベル要素にできる |
|---|---|
| :inline | インライン要素にできる |
| :none | 不可視にできる |
擬似クラス（:コロン）
文書構造で示せない状態などをセレクタにできる
| :link | 未訪問リンク |
|---|---|
| :visited | 訪問済み |
| :active | クリック時 |
| :hover | マウスカーソルがロールオーバーした時 |
:hoverはカーソルの状態が変化するのでリンク可能なことがわかりやすい
絶対配置
positionプロパティ
| 値 | 和訳 | 解説 |
|---|---|---|
| absolute | 絶対配置 | 絶対的な位置指定 |
| relative | 相対配置 | 基準位置からの絶対的な指定 |
position:absolute
dwではデザインビューからドラッグしながら位置指定が行われる
位置指定の基準位置を指定
無指定ではブラウザの左上が基準となり、センタリングなどずれてしまう
position:relative
● 基準値としたいボックスにrelative指定する
● 絶対値したいボックスはこのボックスの子要素（中に入れる）にする
今日のひとこと
うーん(°_°)