▽ファイルリンク　▽ページ内リンク　▽メールリンク

5/9 リンク

ファイルリンク

相対パスリンク

• home

絶対パスリンク

• クラス一覧

リンク画像

ページ内リンク

• IDで命名
• ターゲットアイコンからID部分へドラッグ

メールリンク

• リンク欄にmailto:メールアドレス

挿入位置のコントロール

タグの階層関係がビジュアルエディタでは把握しづらいので必要なものは挿入ダイアログが出る

挿入位置ダイアログ

• 選択範囲の周囲で折り返し（挿入ポイント）＞カーソルでコントロール
• 開始タグの後＞子要素として先頭に
• 終了タグの前＞子要素として最後に

今日の一言

bracketsと違ってタグ付けやリンクさせるのが、すごく簡単になったので、すごく作業しやすくなったと思いました。 コンテナもすごく使いやすくなったので、嬉しいです。

5/16 イメージマップとテーブル

イメージマップ

一枚の画像の中に複数のエリアを描画し、異なるリンク先を指定できる

• 設定したい画像を選択し、プロパティ＞マップより描画
• マップは流用できるので操作性も含めフォーマットを統一する

テーブル

テーブルの挿入

1. 挿入＞テーブル
2. 先に幅・行・列数を指定
3. セルの移動はタブキー
4. 属性等はプロパティより指定

テーブルの選択

• タグセレクタで選択
• デザイン内で選択
  • テーブル全体＞ドラッグ

今日の一言

これまで地道に作っていたテーブルが一瞬で出来てしまったので驚きました。

また、画像にそのままリンク先を設定できるとは

思っていなかったので、デザインの幅がものすごく広がるなと思いました

5/23 テーブルレイアウト

テーブルの揃え

• 横はalign横はvalignで揃えられる
• セル毎に属性を入れると大変なので通常はCSSで指定
• 列毎の指定などはDWの方がラクダが推奨はされない

画像の下の隙間

• html5ではvertical-alignのデフォルトがbaselineなので画像の下に隙間が出る
• つけるにはこれをbottomする

今日のひとこと

テーブルを応用することで、ホームページのデザインの質が大きく変わったと実感しました。また、前回に引き続き、画像をそのままリンクさせることができるので、自分の思うままに形にできることが嬉しかったです。

5/30 セレクタの種類

border

• 四辺一括か単体指定かを選び指定
• styleに何らかの値を入れないと表示されない

セレクタの種類

文字の単位

正しい文字指定を行うには単位が重要

デフォルトCSS

初期設定で選んだサイズの何倍かがデフォルトスタイルシートで決まっている

pxで指定するとユーザー指定に限らずサイズ調整できる

• 全てをpxで指定すると修正時に大変なので標準サイズを決め、あとは相対比のemで指定
• 行間の指定には単位無しを使用

今日の一言

セレクタの種類がこんなにあることを知らなかったので驚きました。

CSSについては去年もやったことなので、内容を忘れないようにしたいと思います。