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

表示効果のないタグ

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

ID属性の使用

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

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

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

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

今日のひとこと

使いこなせる様になると便利

 

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

ボックスモデル

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

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

CSSパネルでに入力

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

border-rabius

角丸指定が可能

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はカーソルの状態が変化するのでその領域がリンク可能なことが分かり易い

絶対配置

positionプロパティ

値 和訳 解説
absolute 絶対配置 絶対的な位置指定
relative 相対配置

基準位置からの絶対的な指定

position：absolute

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

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

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

position：relative

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

きょうのひとこと

絶対配置の自由感すき

ふくわらいたのしみ！