表示効果のないタグ

表示効果のないタグはビジュアルエディタでの操作は難しい

ID属性の使用

• classは再出可能だがIDは一度しか出現しないので場所を特定できる
• DWではこれを用いて挿入箇所などを特定している

表示効果のないタグの挿入

挿入のダイアログより位置を特定して挿入する

今日の一言

表示効果のないタグは扱いが少し難しいですが、慣れてしまえばレイアウトの可能性が広がるのかなと思いました。

６月に入り、そろそろ今までに習ったことの復習を始めようと思いました。

ボックスモデル

ブロックレベル要素は以下の設定を持つボックスから成り立つ

1. content
2. padding
3. border
4. margin

CSSパネルでの入力

• 上部は四辺一括またはショートハンド
• 四辺分割措定する場合は下部

border-radius

角丸指定が可能

floatによるレイアウト

float

• ボックス幅一杯だった要素が浮き上がり光景要素が回り込む
• widthでサイズ指定、カラム落ち対策にbox-sizing:border-box

clear

• floatをclear:bothで削除

今日の一言

挿入メニューから要素を入れていくことでより的確な指示を出せるので

とても良いと思いましたが、どこの要素なのかがわからなくなってしまうことがありそうなので

気をつけようと思いました。

CSSを利用したナビゲーション

メンテナンス性に優れるための主流

グローバルナビゲーション

トップ第一階層にいつでも行けるナビゲーション

ローカルナビゲーション

その項目内のナビゲーション

floatのナビ

• 分割数分の幅をwidthで指定
• float：left
• ulのパディングマージンをとる

子孫セレクタ

• ナビゲーション内のリストの様に特定の親要素ないの子要素だけを指定可能
• 半角スペースで区切る

今日に一言

休んでしまったので自宅で製作しました。

わからない部分が多く、苦戦してしまったので

体調を崩さない様に気をつけたいと思います。

インライン要素のブロックレベル化

aはインライン要素なので文字数の大きさが依存し操作しづらい

displayプロパティ

要素の元々持つ特性を変更できる

擬似クラス（：コロン）

文書構造で示せない状態などをセレクタにできる

:hoverはカーソルの状態が変化するのでその領域がリンク可能なことが分かり易い

絶対配置

positionプロパティ

position：absolite

dwではデザインビューからドラッグしながら位置指定が行える

position：relative

• 基準としたいボックスにrelative指定する
• 絶対配置したいボックスはこのボックスの子要素（中に入れる）にする