06/06 表示効果のないタグセレクト
表示効果のないタグ
表示効果のないタグはビジュアルエディタでの操作は難しい
ID属性の使用
- classは再出可能だがIDは一度しか出現しないので場所を特定できる
- DWはこれを用いて挿入箇所など特定できる
表示効果のないタグ挿入
挿入ダイヤログより位置を指定して挿入する
| 開始タグ | 対象ID内の最前部に挿入 |
|---|---|
| 終了タグ | 対象ID内の最後部に挿入 |
06/13 ボックスモデルとフロート
ボックスモデル
ブロックレベル要素は以下の設定を持つボックスから
- content
- padding
- border
- margin
Floatによるレイアウト
float
- ボックス幅一杯だった要素が浮き上がり後継要素が回り込む
- widthでサイズ指定、カラム落ち対策box-sizing:borde-box
clwar
- floatをclear：bothで解除
06/20 フロートナビゲーション
CSSを利用したナビゲーション
メンテナンス性に優れるため主流
グローバルナビゲーション
トップ第一階層にいつでもいけるナビゲーション
ローカルナビゲーション
その項目内のナビゲーション
floatのナビ
- 分割数分の幅をwidthで指定
- float:left
- ulのパディングマージンを取る
子孫セレクタ
- ナビゲーション内のリストのように特定の親要素内の子要素だけを指定可能
- 半角スペースで区切る
06/27 模擬クラスと絶対配置
インライン要素のブロックレベル強化
| インライン要素 | 段落内の一部 | span,a |
|---|---|---|
| ブロックレベル要素 | ボックスにできる（改行伴う） | div,p,h |
aはインライン要素なので文字数に大きさが依存し操作しずらい
displayプロパティ
要素の元々の持つ特性を変更できる
| :block | ブロックレベル要素にできる |
|---|---|
| :inline | インライン要素にできる |
| :none | 不可視にできる |
模擬クラス（：コロン）
文書構成で示せない状態などをセレクタできる
| ：link | 未訪問リンク |
|---|---|
| ：visited | 訪問済み |
| ：active | クリック時 |
| ：hover | マウスカーソルがロールオーバーしたとき |
：hoverはカーソルの状態が変化するのでその領域がリンク可能なことが分かり易い
絶対配置
positionプロパティ
| 値 | 和訳 | 解説 |
|---|---|---|
| absolute | 絶対配置 | 絶対的な位置指定 |
| relative | 相対配置 | 基準位置から絶対的な配置 |
position:absolute
dwではデザインビューからドラッグしながら位置指定が行える
位置指定の基準指定を指定
無指定ではブラウザの左上が基準となり、センタリングなどずれてしまう
position:relative
- 基準としたいボックスにrelative指定をする
- 絶対配置したいボックスはこのボックスの子要素（中に入れる）にする