６/６ 表示効果のないタグのレイアウト
表示効果のないタグ
表示効果のないタグはビジュアルエディタでの操作は難しい
ID属性の使用
- classは再出可能だがIDは一度しか出現しないので場所を特定できる
- DWではこれを用いて挿入箇所などを特定している
表示効果のないタグの挿入
挿入のダイアログより位置を特定して挿入
| 開始タグの後 | 対象IDの最前部に挿入 |
|---|---|
| 終了タグの前 | 対象IDの最後部に挿入 |
今日のひとこと
少し付いていくのが大変でした。
6/13 ボックスモデルとフロート
ボックスモデル
ブロックレベル要素は以下の設定を持つボックスから成り立つ
6/20 フロートナビゲーション
CSSを利用したナビゲーション
メンテナンス性に優れるため主流
グローバルナビゲーション
トップ第一階層にいつでもいけるナビゲーション
ローカルナビゲーション
その項目内のナビゲーション
floatのナビ
- 分割数分の幅をwidthで指定
- float:left
- ulのパディングマーシンを取る
子孫セレクタ
- ナビゲーション内のリストの様に特定の親要素のないの子要素だけを指定可能
- 半角スペースで区切る
今日のひとこと
前回のができていないので、なんとかしていきたいです。
6/27 擬似クラスと絶対配置
インライン要素のブロックレベル化
| インライン要素 | 段落内の一部分 | span,a |
|---|---|---|
| ブロックレベル要素 | ボックスにできる(改行伴う) | div,p,h |
aはインライン要素なので文字数に大きさが依存しづらい
displayプロパティ
要素の元々持つ特性を変更できる
| :block | ブロックレベル要素にできる |
|---|---|
| :inline | インライン要素にできる |
| :none | 不可視にできる |
擬似クラス（:コロン）
文書構造で表せない状態などをセレクタにできる
| :link | 未訪問リンク |
|---|---|
| :xisited | 訪問済み |
| :active | クリック時 |
| :hover | マウスカーソルがロールオーバーした時 |
:hoverはカーソルの状態が変化するのでリンク可能なことがわかりやすい
絶対配置
positonプロパティ
| 値 | 和訳 | 解説 |
|---|---|---|
| absolute | 絶対配置 | 絶対的な位置指定 |
| relative | 相対配置 | 基準位置からの絶対的な指定 |
position:adsolute
dwではデザインビューからドラックしながら位置指定が行える
位置指定の基準位置を指定
無指定ではブラウザの左上が基準となり、センタリングなどでずれてしまう
position:relative
- 基準としたいボックスにrelative指定をする
- 絶対配置したいボックスはこのボックスの子要素(中に入れる)にする
今日のひとこと
細かいところまで考えてやらないといけないのは大変だなと思いました。
