CSSテンプレートタイプD

CSSテンプレートタイプD

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

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

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

body{
    background-color:#000000;
}

A{
 text-decoration:none;
}

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

.title{
      width:685;
      border:3px double #ffffff;
      font-size:30px;
      color:#ffffff;
      padding:5px;
      background-color:#000000;
      margin:25px 10px 30px 100px;
}

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

ul{
  margin:auto;
  color:#ffffff;
}

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

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

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

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

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

.sub{
      width:650;
      height:100;
      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="title">
タイトル
</div>

<div class="main">

<div class="main2">
サイト説明など
</div>

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

<div class="menu2">
<ul>
<li><a href="URL">メニュー４</a>
<li><a href="URL">メニュー５</a>
<li><a href="URL">メニュー６</a>
</ul>
</div>

<div class="menu3">
<ul>
<li><a href="URL">メニュー７</a>
<li><a href="URL">メニュー８</a>
<li><a href="URL">メニュー９</a>
</ul>
</div>

<div class="menu4">
<ul>
<li><a href="URL">メニュー10</a>
<li><a href="URL">メニュー11</a>
<li><a href="URL">メニュー12</a>
</ul>
</div>

<div class="sub">
その他リンクなど
</div>

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

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

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

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

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

body{
    background-color:#ffffff;
}

A{
 text-decoration:none;
}

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

.title{
      width:685;
      border:3px double #000000;
      font-size:30px;
      color:#000000;
      padding:5px;
      background-color:#ffffff;
      margin:25px 10px 30px 100px;
}

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

ul{
  margin:auto;
  color:#000000;
}

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

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

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

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

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

.sub{
      width:650;
      height:100;
      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="title">
タイトル
</div>

<div class="main">

<div class="main2">
サイト説明など
</div>

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

<div class="menu2">
<ul>
<li><a href="URL">メニュー４</a>
<li><a href="URL">メニュー５</a>
<li><a href="URL">メニュー６</a>
</ul>
</div>

<div class="menu3">
<ul>
<li><a href="URL">メニュー７</a>
<li><a href="URL">メニュー８</a>
<li><a href="URL">メニュー９</a>
</ul>
</div>

<div class="menu4">
<ul>
<li><a href="URL">メニュー10</a>
<li><a href="URL">メニュー11</a>
<li><a href="URL">メニュー12</a>
</ul>
</div>

<div class="sub">
その他リンクなど
</div>

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

ページトップへ

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