CSSテンプレートタイプB

CSSテンプレートタイプB

--CSSテンプレートタイプB-1--

サンプル表示はこちらをクリックして下さい↓

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<head>～</head>の間か外部CSSファイルに↓

body{
    background-color:#000000;
}

A{
 text-decoration:none;
}

A:hover{
        position:relative;
        top:2px;
        left:2px;
}

.title{
      width:670;
      border:3px double #ffffff;
      font-size:30px;
      color:#ffffff;
      padding:5px;
      background-color:#000000;
      margin:auto;
}

.main{
     width:705;
     border:3px double #ffffff;
     font-size:13px;
     color:#ffffff;
     padding:5px;
     background-color:#000000;
     text-align:center;
     margin:10px 10px 10px 100px;
}

.menu{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu2{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu3{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu4{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu5{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     clear:left;
     float:left;
}

.menu6{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu7{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu8{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.main2{
      width:670;
      height:390;
      border:3px double #ffffff;
      font-size:15px;
      color:#ffffff;
      padding:5px;
      background-color:#000000;
      margin:10px 10px 10px 10px;
      clear:both;
}

.footer{
       clear:both;
}

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<body>～</body>に↓

<div class="main">

<div class="title">
タイトル
</div>

<div class="menu">
<a href="URL">メニュー１</a>
</div>

<div class="menu2">
<a href="URL">メニュ－２</a>
</div>

<div class="menu3">
<a href="URL">メニュー３</a>
</div>

<div class="menu4">
<a href="URL">メニュー４</a>
</div>

<div class="menu5">
<a href="URL">メニュー５</a>
</div>

<div class="menu6">
<a href="URL">メニュー６</a>
</div>

<div class="menu7">
<a href="URL">メニュー７</a>
</div>

<div class="menu8">
<a href="URL">メニュー８</a>
</div>


<div class="main2">
本文
</div>

<p class="footer">Copyright © 2006 ハンドルネーム. All Rights Reserved.</p>
</div>

--CSSテンプレートタイプB-2--

サンプル表示はこちらをクリックして下さい↓

--CSSテンプレートタイプB-2(白ベース)--

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<head>～</head>の間か外部CSSファイルに↓

body{
    background-color:#ffffff;
}

A{
 text-decoration:none;
}

A:hover{
        position:relative;
        top:2px;
        left:2px;
}

.title{
      width:670;
      border:3px double #000000;
      font-size:30px;
      color:#000000;
      padding:5px;
      background-color:#ffffff;
      margin:auto;
}

.main{
     width:705;
     border:3px double #000000;
     font-size:13px;
     color:#000000;
     padding:5px;
     background-color:#ffffff;
     text-align:center;
     margin:10px 10px 10px 100px;
}

.menu{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu2{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu3{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu4{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu5{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     clear:left;
     float:left;
}

.menu6{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu7{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu8{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.main2{
      width:670;
      height:390;
      border:3px double #000000;
      font-size:15px;
      color:#000000;
      padding:5px;
      background-color:#ffffff;
      margin:10px 10px 10px 10px;
      clear:both;
}

.footer{
       clear:both;
}

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<body>～</body>に↓

<div class="main">

<div class="title">
タイトル
</div>

<div class="menu">
<a href="URL">メニュー１</a>
</div>

<div class="menu2">
<a href="URL">メニュ－２</a>
</div>

<div class="menu3">
<a href="URL">メニュー３</a>
</div>

<div class="menu4">
<a href="URL">メニュー４</a>
</div>

<div class="menu5">
<a href="URL">メニュー５</a>
</div>

<div class="menu6">
<a href="URL">メニュー６</a>
</div>

<div class="menu7">
<a href="URL">メニュー７</a>
</div>

<div class="menu8">
<a href="URL">メニュー８</a>
</div>


<div class="main2">
本文
</div>

<p class="footer">Copyright © 2006 ハンドルネーム. All Rights Reserved.</p>
</div>

--CSSテンプレートタイプB-3--

サンプル表示はこちらをクリックして下さい↓

--CSSテンプレートタイプB-3(黒ベース)--

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<head>～</head>の間か外部CSSファイルに↓

body{
    background-color:#000000;
}

A{
 text-decoration:none;
}

A:hover{
        position:relative;
        top:2px;
        left:2px;
}

.title{
      width:670;
      border:3px double #ffffff;
      font-size:30px;
      color:#ffffff;
      padding:5px;
      background-color:#000000;
      margin:auto;
}

.main{
     width:705;
     border:3px double #ffffff;
     font-size:13px;
     color:#ffffff;
     padding:5px;
     background-color:#000000;
     text-align:center;
     margin:10px 10px 10px 100px;
}

.menu{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu2{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu3{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu4{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu5{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     clear:left;
     float:left;
}

.menu6{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu7{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu8{
     width:140;
     border:3px double #ffffff;
     font-size:15px;
     padding:5px; 
     background-color:#000000;
     margin:10px 10px 10px 10px;
     float:left;
}

.main2{
      width:670;
      height:390;
      border:3px double #ffffff;
      font-size:15px;
      color:#ffffff;
      padding:5px;
      background-color:#000000;
      margin:10px 10px 10px 10px;
      clear:both;
}

.footer{
       clear:both;
}

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<body>～</body>に↓

<div class="main">

<div class="title">
タイトル
</div>

<div class="menu">
<a href="URL">メニュー１</a>
</div>

<div class="menu2">
<a href="URL">メニュ－２</a>
</div>

<div class="menu3">
<a href="URL">メニュー３</a>
</div>

<div class="menu4">
<a href="URL">メニュー４</a>
</div>

<div class="menu5">
<a href="URL">メニュー５</a>
</div>

<div class="menu6">
<a href="URL">メニュー６</a>
</div>

<div class="menu7">
<a href="URL">メニュー７</a>
</div>

<div class="menu8">
<a href="URL">メニュー８</a>
</div>


<div class="main2">
本文
</div>

<div class="main2">
本文２
</div>

<p class="footer">Copyright © 2006 ハンドルネーム. All Rights Reserved.</p>
</div>

--CSSテンプレートタイプB-4--

サンプル表示はこちらをクリックして下さい↓

--CSSテンプレートタイプB-4(白ベース)--

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<head>～</head>の間か外部CSSファイルに↓

body{
    background-color:#ffffff;
}

A{
 text-decoration:none;
}

A:hover{
        position:relative;
        top:2px;
        left:2px;
}

.title{
      width:670;
      border:3px double #000000;
      font-size:30px;
      color:#000000;
      padding:5px;
      background-color:#ffffff;
      margin:auto;
}

.main{
     width:705;
     border:3px double #000000;
     font-size:13px;
     color:#000000;
     padding:5px;
     background-color:#ffffff;
     text-align:center;
     margin:10px 10px 10px 100px;
}

.menu{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu2{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu3{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu4{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu5{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     clear:left;
     float:left;
}

.menu6{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu7{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.menu8{
     width:140;
     border:3px double #000000;
     font-size:15px;
     padding:5px; 
     background-color:#ffffff;
     margin:10px 10px 10px 10px;
     float:left;
}

.main2{
      width:670;
      height:390;
      border:3px double #000000;
      font-size:15px;
      color:#000000;
      padding:5px;
      background-color:#ffffff;
      margin:10px 10px 10px 10px;
      clear:both;
}

.footer{
       clear:both;
}

[カーソルを上に置くとテキストボックス内がすべて選択されるので右クリック→コピーして下さい]
<body>～</body>に↓

<div class="main">

<div class="title">
タイトル
</div>

<div class="menu">
<a href="URL">メニュー１</a>
</div>

<div class="menu2">
<a href="URL">メニュ－２</a>
</div>

<div class="menu3">
<a href="URL">メニュー３</a>
</div>

<div class="menu4">
<a href="URL">メニュー４</a>
</div>

<div class="menu5">
<a href="URL">メニュー５</a>
</div>

<div class="menu6">
<a href="URL">メニュー６</a>
</div>

<div class="menu7">
<a href="URL">メニュー７</a>
</div>

<div class="menu8">
<a href="URL">メニュー８</a>
</div>


<div class="main2">
本文
</div>

<div class="main2">
本文２
</div>

<p class="footer">Copyright © 2006 ハンドルネーム. All Rights Reserved.</p>
</div>

ページトップへ

ホームページに広告張るなら	A8.net
有料ホームページ始めるなら	ロリポップ！
ホームページを簡単に作ろう	テンプレドットコム