スタイルシート（CSS）ソースで書かれたテンプレート(9)

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

　背景画像の保存方法は、メニューバーの左、グラーデーションの上で右クリックして、「名前を付けて背景を保存」で背景画像を保存できます。（保存場所と、背景画像設定ソースの書き方には注意してください）

　左側のメニューは固定です。こちら側のコンテンツ量が増えて、スクロールバーが出ても動きません。ですから、ブラウザの高さよりもページ数が多いときには、このテンプレートを使うことができません。

　このスタイルは、フレームセットではありませんが、メニューバーが固定されているため、ページを移動しても、フレームセットのような雰囲気があります。ページが変わってもメニューバーが全く同じ位置から動きません。

◆ テンプレート　スタイル（９）　HTML＋CSS　ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テンプレート　スタイル（9）</title> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css">  </style> </head> <body> <div id="mainbox"> <div id="mainbar"> <div id="header"> <p>ここがヘッダー</p> </div> <div id="contents"> <p>ここが本文</p> </div> <div id="footer"> <p>ここがフッター</p> </div> </div> </div> <div id="menubox"> <div id="menubar"> <ul class="sidebarlink"> <li><a href="index.html">トップページ</a></li> <li><a href="リンク先.html">リンク先ページ名</a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </div> </div> </body> </html>

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

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

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

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

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

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

◆ テンプレート スタイル（９）

◆ テンプレート スタイル（９） HTML＋CSS ソース

◆ テンプレート　スタイル（９）

◆ テンプレート　スタイル（９）　HTML＋CSS　ソース