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

◆ ドロップダウンメニュー（横）＋２段組レイアウト

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

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

ドロップダウンで表示されるメニューの幅は、head部ソース「.ddmenu li ul」の最後、「width:13em」を変更すれば、調整できます。

左側サイドバーは、テンプレートページのメニューに使っていますが、ページトップにメニューがありますので、違う用途で使ってください。

◆ テンプレート　スタイル（10）　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>テンプレート(10)</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="container"> <div id="header"> ここがヘッダー </div> <div id="contents"> ここがコンテンツ </div> <div id="sidebar"> ここがサイドバー </div> <div id="footer"> ここがフッター </div> </div> <div id="titlebar"> ここがタイトルバー </div> <div id="menu"> <ul class="ddmenu"> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <a href="index.html">トップページ</a></li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li><li class=" off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li><li class=" off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li> </ul> </div> </body> </html>

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

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

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

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

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

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

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

◆ ドロップダウンメニュー（横）＋２段組レイアウト

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

ページタイトル(h1)

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

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

◆ ドロップダウンメニュー（横）＋２段組レイアウト

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

ページタイトル(h1)

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

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