スタイルシート(CSS)のソースを書いてくれるエディタがあるページ

  トップページ > テンプレート > テンプレートサンプル(13)

◆ テンプレート スタイル(13)

 このサイトのテンプレートは、基本的には画像を使いませんが、このテンプレートは、背景画像を使っています。そしてこのページで使っているプロパティ(属性)もソースに含まれています。従って、このページのスタイルと全く同じになります。

 背景画像の保存方法は、右側スクロールバーの横辺りで右クリックしてください。「名前を付けて背景を保存」で背景画像を保存できます。(保存場所と、背景画像設定ソースの書き方には注意してください)

◆ 第3階層まであるドロップダウンメニュー+2段組レイアウト

テンプレートソースの利用方法は、テンプレートトップページに書いてあります。

 このページは、デザイン上の理由から「*」ユニバーサルセレクタでマージンとパディングを「0」にしています(詳しくは、「CSSの種類と余白」を参照)。従って段落タグ「p」には、1行の空間を取っていますが、見出し「h1」等の指定をするときは、空間がありません。別途指定をしてください。

ソースでは、背景画像のURLを

body{background-image:url(images/darkgreen.jpg);}

と書いていますが、ページと同じ所に保存した場合は、「images/」を消去してください。

【テンプレート(13)を上手に使うためのヒント】
 ある程度ページ数が多いサイトでないと、第3階層まで必要になることはありません。ページ数が多くなってきて、サイト内を幾つかのジャンルに分けなくてはならないようなときに使うと、このスタイルが最大限に効果を発揮すると思います。

テンプレートトップへ戻る