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

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

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

ヘッダーのデザインは、「ページトップデザイン」で好みのレイアウトを作れます。

このテンプレートのレイアウトは、左側メニューバーが固定されています。ブラウザの高さよりもページ数が多いときは、利用できません。

テンプレートソース内には右側女性の画像は入っていません。

◆ 左側メニューバー＋2段組

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

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

◆ テンプレート　スタイル（12）　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>テンプレート(12)</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="rightside"> <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/darkblue.jpg);}

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

【テンプレート（12）を上手に使うためのヒント】
　　このページを使うには、色使いが相当難しいと思います。作者のセンスが問われますが、色バランスが上手くできたら、他のサイトには真似のできないサイトが作れると思います。

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

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

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

◆ 左側メニューバー＋2段組

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

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

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