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

表示効果のないタグ

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

ID属性の使用

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

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

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

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

きょうのひとこと

太古の昔の授業でやったと思われるarticleとsectionの話が出てきて、「あぁ・・・（昇天）」ってなりました。

どんな内容だったかもうあんまり覚えてない・・・

でも弄ればすごく楽しかったのだけは覚えてます😇

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

ボックスモデル

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

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

CSSパネルでの入力

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

border-radius

角丸指定が可能

floatによるレイアウト

float

  • ボックス幅いっぱいだった要素が浮き上がり後継要素が回り込む
  • widthをclear:bothで解除

きょうのひとこと

胃腸炎っぽいのになって死んでました。

(欠席)

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

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

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

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

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

ローカルナビゲーション

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

floatのナビ

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

子孫セレクタ

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

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

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

インライン要素 段落内の一部分

span,a
ブロックレベル要素 ボックスにできる（改行伴う）

div,p,h

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

displayプロパティ

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

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

擬似クラス（：コロン）

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

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

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

絶対配置

positionプロパティ

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

position:absolute

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

位置指定の基準を指定

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

position:relative

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

きょうのひとこと

いくらdreamweaverが使いやすいからといっても、やっぱりコーディングは難しいのには変わりないので、ちゃんと遅れを取らないように頑張りたいです。