Webデザインテンプレート集 : Templates[トップページ]
About
Templates
Design
BBS
Links
トップページ
飾り枠
CSSデザイン
リンクページ
タイトル
コピーライト
その他
はじめに
利用方法
トップページ
サイトの入り口、またはサイト全体に適用出来るテンプレートです。
No.9以前はテーブルレイアウト使用です。
画像をクリック:プレビュー /
各色を見る /
ソース表示 /
ダウンロード
ソース表示[No.7 - Orange]
カラー選択
CSS
<style type="text/css"> <!-- body{ margin: 0; font-size: 10pt;/*全体のフォントサイズ*/ color: #606760;/*全体の文字色*/ } a{ color: #606760;/*リンクの色*/ text-decoration: none; } .leline{/*裏側の細線の設定*/ position: absolute; z-index: 1 top: 0; left: 300px; width: 10px; height: 100%; border-left: solid 1px #FF98C0;/*色*/ } .leline2{/*裏側の薄色部分と点線枠の設定*/ position: absolute; z-index: 1; top: 0; left: 320px; width: 130px;/*幅*/ height: 100%; border-left: dotted 1px #FF9820;/*枠の色*/ border-right: dotted 1px #FF9820; background-color: #FFFFFF;/*背景色*/ } .main{/*メニュー全体の位置と幅を設定*/ position: absolute; z-index: 2; top: 25px; left: 260px; width: 240px; } h1{/*SiteTitle部分の設定*/ font-size: 12pt; font-family: "Verdana"; font-weight: normal; letter-spacing: 0.2em;/*文字間隔*/ text-align: center; width: 220px; margin: 10px 10px 40px 10px; padding: 5px 15px 5px 15px; border: solid 1px #FA6700; background-color: #FFFFFF;/*背景色*/ } .menu{/*メニューの設定*/ margin: 10px;/*メニューごとの間隔*/ padding: 5px; border: solid 1px #FA6700;/*枠の色*/ background-color: #FFFFFF;/*背景色*/ font-family: Verdana; font-size: 10pt; } .text{/*「一言」部分*/ margin: 20px 10px 10px 10px; padding: 5px; border: solid 1px #C08F4F; background-color: #FFFDFD; font-family: Verdana; font-size: 9pt; } .bottom{/*アドレス部分*/ margin: 40px 10px 10px 10px; padding: 5px; border: solid 1px #FA6700; background-color: #FFFFFF; font-family: Verdana; font-size: 7pt; text-align: center; } --> </style>
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <!--made by Web Design Templates http://wdt.pekori.jp/--> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- body{ margin: 0; font-size: 10pt;/*全体のフォントサイズ*/ color: #606760;/*全体の文字色*/ } a{ color: #606760;/*リンクの色*/ text-decoration: none; } .leline{/*裏側の細線の設定*/ position: absolute; z-index: 1 top: 0; left: 300px; width: 10px; height: 100%; border-left: solid 1px #FF98C0;/*色*/ } .leline2{/*裏側の薄色部分と点線枠の設定*/ position: absolute; z-index: 1; top: 0; left: 320px; width: 130px;/*幅*/ height: 100%; border-left: dotted 1px #FF9820;/*枠の色*/ border-right: dotted 1px #FF9820; background-color: #FFFFFF;/*背景色*/ } .main{/*メニュー全体の位置と幅を設定*/ position: absolute; z-index: 2; top: 25px; left: 260px; width: 240px; } h1{/*SiteTitle部分の設定*/ font-size: 12pt; font-family: "Verdana"; font-weight: normal; letter-spacing: 0.2em;/*文字間隔*/ text-align: center; width: 220px; margin: 10px 10px 40px 10px; padding: 5px 15px 5px 15px; border: solid 1px #FA6700; background-color: #FFFFFF;/*背景色*/ } .menu{/*メニューの設定*/ margin: 10px;/*メニューごとの間隔*/ padding: 5px; border: solid 1px #FA6700;/*枠の色*/ background-color: #FFFFFF;/*背景色*/ font-family: Verdana; font-size: 10pt; } .text{/*「一言」部分*/ margin: 20px 10px 10px 10px; padding: 5px; border: solid 1px #C08F4F; background-color: #FFFDFD; font-family: Verdana; font-size: 9pt; } .bottom{/*アドレス部分*/ margin: 40px 10px 10px 10px; padding: 5px; border: solid 1px #FA6700; background-color: #FFFFFF; font-family: Verdana; font-size: 7pt; text-align: center; } --> </style> </head> <body> <div class="leline"></div> <div class="leline2"></div> <div class="main"> <h1>Site Title</h1> <div class="menu">□ <a href="#">What's New</a></div> <div class="menu">□ Sitemap</div> <div class="menu"><span style="color: #FF76B0">□</span> Text <span style="font-size: 8pt">- 12/13</span></div> <div class="menu">□ Photo</div> <div class="menu">□ Bookmark</div> <div class="text"> [一言スペース]<br> <br><br><br> </div> <div class="bottom">Since 2001.12.10 // E-mail</div> </div> </body> </html>
本体表示