▼ファイルリンク ▼ページ内リンク ▼メールリンク
5/9 リンク
ファイルリンク
相対パスリンク
絶対パスリンク
リンク画像
ページ内リンク
- IDで命名
- ターゲットアイコンからID部分へドラッグ
メールリンク
DWによる編集
挿入
パーツは挿入メニュー/パネルより挿入
画像
挿入位置のコントロール
タグの回想関係がビジュアルエディタでは把握しづらいので、必要なものは挿入ダイアログか出る
挿入位置ダイアログ
- 選択範囲の周囲で折り返し（挿入ポイント）＞カーソルでコントロール
- 開始タグの後＞子要素として先頭に
- 終了タグの前＞子要素として最後に
きょうのひとこと
毎回思うことなのですが、圧倒的に作業の手間が減って、とてつもなく使いやすいです。
でもちらほらバグってる人がいるので、使い方には注意したいと思いました。
divタグやmainタグなどの挿入もいとも簡単にできてしまったので、楽しくなってきたので、自分で何かやってみたいと思います。
5/16 イメージマップとテーブル
イメージマップ
一枚の画像の中に複数のエリアを描画し、異なるリンク先を指定できる
- 設定したい画像を選択し、プロパティインスペクタ>マップより描画
- マップは流用できるので操作性も含めフォーマットを統一する
テーブル
テーブルの挿入
- 挿入＞テーブル
- 先に幅・行・列数を指定
- セルの移動はタブキー
- 属性等はプロパティより指定
テーブルの選択
きょうのひとこと
テーブルの挿入や、リンクのボタンの挿入など、今まではちゃめちゃに面倒だったのが、こんなに簡単になって感動しています！
毎回授業のたびに色々な機能に感動している気がしますが、DreamWeaver本当にしゅごい・・・。
5/23 テーブルレイアウト
テーブルの揃え
- 横はalign、縦はvalignで揃えられる
- セル毎に属性を入れると大変なので通常はCSSで指定
- 列毎の指定などはDWの方が楽だが推奨はされない
画像の下の隙間
- html5ではvertical-alignのデフォルトがbaselineなので画像の下に隙間が出る
- つけるにはこれをbottomにする
きょうのひとこと
前回からテーブルをいじっていますが、セルの結合だったり、CSSだったりが非常に使いやすいですね！
ところでトップの画像とプロフィールの画像のねこちゃんが可愛いので見てください。
5/30 セレクタの種類
border
- 四辺一括か単体指定かを選び指定
- styleに何らかの値を入れないと表示されない
セレクタの種類
| セレクタ名 |
記号 |
解説 |
| タグ |
x(なし) |
タグをセレクタに |
| クラス |
.x(ドット) |
再出する部分に命名 |
| ID |
#x(シャープ) |
一意に特定できる部分を命名 |
| 擬似クラス |
x:(コロン) |
状態をセレクタに |
| 子孫セレクタ |
x y(半角スペース) |
特定の親要素内の子要素を識別 |
| グループセレクタ |
x,y(カンマ) |
複数のセレクタにまとめて同一指定 |
文字の単位
正しい文字指定を行うには単位が必要
| 単位 |
解説 |
| px |
モニタのドット数 |
| em |
文字サイズの倍数 |
| % |
親要素のフォントサイズに対する割合 |
| 単位無し |
親要素のフォントサイズに対する倍率 |
文字の単位
初期設定で選んだサイズの何倍かがデフォルトCSSで決まっている
| |
font-size |
12px |
16px |
| <p> |
1em |
12px |
16px |
| <h1> |
2em |
24px |
32px |
| <h2> |
1.5em |
18px |
24px |
| <h3> |
1.17em |
14px |
18px |
| <h4> |
1em |
12px |
16px |
pxで指定するとユーザー指定にかかわらずサイズ調整できる
- 全てをpxで指定すると修正時大変なので基準サイズを決めた後は相対比のemで指定
- 行間の指定には単位無しを使用
きょうのひとこと
再三言うようですが、テーブルが最高にやりやすい！！！！！！
本当に最高だよお前は
一生使わせてくれ |
