背景画像の変更

ページプロパティボタンから背景画像を設定することもできます。背景画像を設定すると背景画像と背景色が重なったところでは背景画像が優先して表示されます。HTMLでもCSSでも設定可能ですがCSSの方が優先されます。なお、繰り返しオプションはCSSでしか設定できません。

外観(HTML)で設定

まずは外観(HTML)で設定してみます。プロパティインスペクタ下段のページプロパティボタンを押します。カテゴリで外観(HTML)を選択します。背景イメージを参照ボタンを押して選びます。適用ボタンを押すと画面にイメージが縦方向にも横方向にも敷き詰められます。

外観(CSS)で設定

ページプロパティボタンを押してカテゴリで外観(CSS)を選択します。背景イメージを設定します。適用ボタンを押すとHTMLより優先されて背景イメージが敷き詰められます。CSSでは繰り返し方向を設定することもできます。no-repeatにすると画面左上に一つだけ表示されます。repeat-xにすると横方向に繰り返されます。repeat-yにすると縦方向、repeatにすると縦にも横にも繰り返されます。デフォルトはrepeatです。

設定してもうまく反映されないとき

CSSとHTMLで両方とも設定したり設定を取り消したりしているうちに切り替わらなくなってきたときはコードを見て、いらないコードを削除すると変更が反映されるようになることがあります。

広告

背景色の変更

とにかく簡単に背景色を変えてみたいという場合、プロパティインスペクタのページプロパティでの設定が楽です。divタグを使った高度なレイアウトを使うときは、外部CSSを編集し背景色をはじめとして細かく設定するのですが、単純な構造のページですぐに結果を見たいときには、ページプロパティなら結果をすぐに見られます。

ページプロパティでの設定

コードビューかデザインビューなら、文字の所にカーソルを置いたりすると、プロパティインスペクタの下の方にページプロパティというボタンが表示されているはずです。押してみましょう。カテゴリに外観(CSS)と外観(HTML)のどちらかお好きな方を選んでください。HTMLの方なら「背景」、CSSの方なら「背景色」の四角をクリックすると色を選択できるウィンドウが表示されるのでその中から選ぶことができます。右側のテキストボックスに色の数字を16進数表示で入力することもできます。ここでCSSとHTMLの違いですが、CSSにすると<title>タグの下あたりに背景色のCSSコードが埋め込まれます。
HTMLにするとbodyタグの中に埋め込まれます。両方同時に設定したらCSSが優先されました。

色の選び方はいろいろ

色選択のウィンドウは色の並び順や色数など切り替えることができます。右上の丸い印のシステムカラーではWindows標準の色選択ダイアログが表示され、1677万色の中から選ぶことができます。右上角の三角形を押して連続したトーンを選択すると色の並び順が変わり、別の見た目から選べるようになっています。

ページの容量を見るには

ページのサイズは小さい方が読み込みにかかる時間が少なくなるのでユーザビリティの上で有利です。最近では検索エンジンがページの読み込み速度をサイトの評価の指標の一つとして扱うようにもなりました。ページのサイズはステータスバーの表示されることになっていますがページを読み込んだ直後では正しく表示していない場合もあるので、そんなときに表示する方法をこれから書いていきます。

正しく表示されない場合とは

HTMLファイルを開くときは、ファイルパネルでHTHLファイルをダブルクリックしてドキュメントウィンドウに表示することが多いと思います。初めて読み込んだときにはステータスバーのページサイズの概要表示の所に1K/1秒のように表示されることが多いでしょう。これはページサイズが約1KBですという表示です。ある程度の大きさを持った画像ファイルを含んでいるときにはその数字が少なすぎるとわかります。

正しく表示する方法

画面表示をすこしいじると正しい表示になる場合が多いです。例えばステータスバーで、手のひらツールボタンをクリックし、すぐに選択ツールボタンをクリックするといった操作です。そんなことをしなくても編集作業を行っていると自然と正しい表示になることも多いのでそんなに気にすることでもないのですが、急ぎの時はこんな方法もあるということで書きました。

プロパティインスペクタとは

プロパティインスペクタを使うと、コードビューや各種ダイアログを使うより直感的にオブジェクトのプロパティを設定することができます。

プロパティインスペクタの場所

プロパティインスペクタは横長のパネルで画面左下にあります。

選択したオブジェクトの属性を設定

プロパティインスペクタで設定できるのはデザインビュー、コードビュー、タグセレクタ等で選択している文字列、画像、テーブルなどのオブジェクトの属性(プロパティ)です。

オブジェクトにより設定できるプロパティは異なる

選択したオブジェクトにより設定できるプロパティは変わります。

文字列→見出し・リンク・リスト等
画像→幅・高さ・リンク・代替文字・マップ等
テーブル→行数・列数・幅・セル等

プロパティインスペクタが表示されないとき

プロパティインスペクタは「ウィンドウ」-「プロパティ」と選択すると表示されることになっています。
しかし、それでも表示されない場合はタイトルバーでワークスペースの設定を切り替えてみましょう。パネル配置設定を初期化して表示されると思います。

設定したいプロパティがすぐ見つかったとき

まだDreamweaverを使い始めたところなので、プロパティインスペクタに設定したい属性がすぐ見つかるとうれしくなります。これこそがプロパティインスペクタの醍醐味でしょう。CSSの設定もできますが、数をこなしていないので一番素早くできる方法は、これからも探索する日々が続くでしょう。