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

表示効果のないタグ

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

ID属性の使用

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

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

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

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

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

    ボックスモデル

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

    1.content

    2.padding

    3.bording

    4.margin

    CSSパネルでの入力

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

    • border-radius

    角丸指定が可能

    Floatによるレイアウト

    float

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

    • clear

  • floatをclear：bothで解除

    • 今日の一言

    遅れを取らずに出来た。

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

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

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

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

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

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

    floatのナビ

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

    • 子孫セレクタ

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

    • 今日の一言

    理解はできた

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

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

    インライン要素 段落内の一部分 span,a
    ブロックレベル要素 ボックスにできる（改行伴う） div,p,h

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

    displayプロパティ

    陽子の元々持つ特性を変化できる

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

    擬似クラス（:コロン）

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

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

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

    絶対配置

    positonプロパティ

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

    position:absolite

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

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

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

    position:relative

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

    • 今日の一言

    問題なく終えられた。