6/6 表示効果のないタグのレイアウト

表示効果のないタグ

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

ID属性の使用

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

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

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

開始タグの後ろ 対象ID内の最前部に挿入
終了タグの前 対象ID内の最後部に挿入

今日のひとこと

タグの挿入が多く混乱しそうでしたが何とか出来ました😊

6/13 ボックスモデルとフロート

ボックスモデル

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

  1. padding
  2. border
  3. margin

cssパネルでの入力

  • 上部は四辺一括又はショートハンド
  • 四辺分割して指定するのは下部

border-radius

角丸指定が可能

Floatによるレイアウト

float

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

clear

  • floatをclear:bothで解除

今日のひとこと

ライブビューにしようとして色んな所を触っていたら画面が変になってしまいました😭

6/20 フロートナビゲーション

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

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

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

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

ローカルナビゲーション

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

floatのナビ

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

子孫セレクタ

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

今日のひとこと

今日のひとこと書き忘れてるやん・・・(6/27に気づく)

6/27 擬似クラスと絶対配置

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

インライン要素 段落内の一部分 span,a
ブロックラベル要素 ボックスにできる(改行伴う)

div,p,h

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

disolayプロパティ

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

:block ブロックレベル要素にできる
:inline インライン要素にできる
:none 不可視にできる

擬似クラス(:コロン)

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

:link 未訪問リンク
:visited 訪問済み
:active クリック時
:hover マウスカーソルがロールオーバーした時

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

 

絶対配置

positonプロパティ

値 和訳 解説
absolute 絶対配置 絶対的な位置指定
relative 相対配置 基準位置からの絶対的な指定

position:absolute

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

位置指定の基準位置を指定

無指定ではブラウザ左上が基準となり、センタリングなどずれてしまう

position:relative

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

今日のひとこと

DW信者確定👏😎