6/6 表示効果のないタグのレイアウト
表示効果のないタグ
表示効果のないタグはビジュアルエディタでの操作は難しい
ID属性の使用
- classは歳出可能だがIDは一度しか出現しないので場所を特定できる
- DWではこれを用いて挿入箇所などを特定している
表示効果のないタグの挿入
挿入のダイアログより位置を特定して挿入
開始タグの後 | 対象ID内の最前部に挿入 |
---|---|
終了タグの前 | 対象ID内の最後部に挿入 |
今日の一言
なんとか追いつけるようになったぞ!!!!!
6/13 ボックスモデルとフロート
ボックスモデル
ブロックレベル要素は以下の設定をもつボックスから成り立つ
- content
- padding
- border
- marginx
CSSパネルでの入力
- 上部は四辺一括またはショートハンド
- 四辺分割指定する場合は下部
border-radius
角丸指定が可能floatによるレイアウト
float
- ボックスで幅いっぱいだった要素が浮き上がり後継要素が回り込む
- widthでサイズ指定、カラム落ち対策にbox-sizing:border-box
clear
- floatをclear:bothで解除
今日の一言
なんとなく理解できてきた!!この調子で頑張ります。6/20 フロートナビゲーション
CSSを利用したナビゲーション
メンテナンス性に優れる
子孫セレクタ
- 特定の親要素内の子要素だけを指定
- 半角スペースで区切る
今日の一言
段々慣れてきたけどパソコン重っ!!
6/27 擬似クラスと絶対配置
インライン要素のブロックレベル化
インライン要素 | 段落内の一部分 | span,a |
---|---|---|
ブロックレベル要素 | ボックスにできる(改行伴う) | div,p,h |
aはインライン要素なので文字数に大きさが依存し操作しづらい
displayプロパティ
要素の元々持つ特性を変更できる
:block | ブロックレベル要素にできる |
---|---|
:inline | インライン要素にできる |
:none | 不可視にできる |
擬似クラス(:コロン)
文書構造で示せない状態などをセレクタにできる
:link | 未訪問リンク |
---|---|
:visited | 訪問済み |
:active | クリック時 |
:hover | マウスカーソルがロールオーバーした時 |
:hoverはカーソルの状態が変化するのでリンク可能なことが分かりやすい
絶対配置
positonプロパティ
値 | 和訳 | 解説 |
---|---|---|
absolute | 絶対配置 | 絶対的な位置指定 |
relative | 相対配置 | 基準位置からの絶対的な指定 |
position:absolute
dwではデザインビューからドラッグしながら位置指定が行える
位置指定の基準位置を指定
無指定ではブラウザの左上が基準となり、センタリングなどずれてしまう
position:relative
- 基準としたいボックスにrelative指定をする
- 絶対配置したいボックスはこのボックスの子要素(中に入れる)にする
今日の一言
アニメーションの作り方思い出した!!これからも頑張る。