Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

背景イメージを自在に配置する

■ ようこそ!

ページの背景イメージは、通常、ページの背景イメージは繰り返し表示されるようになりますが、CSSを使用することで通常の縦横方向へのリピート表示以外の方法で配置することができます。CSSを使えば、1枚絵として指定位置に固定表示させることも可能です。

 

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

まず、レイアウトを行いやすくするために、【修正】メニューから【ページプロパティ】を選択して、ページプロパティ・ダイアログを開き、各マージン幅の値を「0」にしておきます。

■ CSSの設定

【CSSスタイル】パネルで、【新規CSSスタイル】ボタンをクリックし、【新規CSSスタイル】ダイアログで【名前】を設定します。(上の作例では、「bg」という名をつけています)
【タイプ】は、【カスタムスタイルの作成(クラス)】を、【定義場所】は【現在のドキュメントのみ】を 選択して、【OK】をクリックします。
【スタイル低後】ダイアログが表示されたら、【カテゴリ】から【背景】を選択し、「背景イメージ」で背景用のイメージファイルを指定します。
【繰り返し】ポップアップメニューから「リピートなし」を選択して【OK】ボタンをクリックします。

■ ページにCSSを適用する

ドキュメントウィンドウ左下にあるタグセレクタで<body>タグを選択して、【CSSスタイル】パネルのリストから、先ほど作成したスタイル(例では「bg」)を適用させます。(Windowsの場合、<body>タグを選択して右クリックでコンテキストメニューを出し、【クラス設定】-【bg】を選択します)

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box