CSSテンプレートタイプA

CSSテンプレートタイプA

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

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

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

body{
    background-color:#000000;
}

A{
 text-decoration:none;
}

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

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

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

.sub{
    width:200;
    border:none;
    padding:5px;
    background-color:#000000;
    margin:10px 10px 10px 10px;
    float:left;
}

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

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

.footer{
       clear:both;
}

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

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

<div class="main">


<div class="sub">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body{
    background-color:#ffffff;
}

A{
 text-decoration:none;
}

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

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

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

.sub{
    width:200;
    border:none;
    padding:5px;
    background-color:#ffffff;
    margin:10px 10px 10px 10px;
    float:left;
}

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

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

.footer{
       clear:both;
}

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

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

<div class="main">


<div class="sub">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body{
    background-color:#000000;
}

A{
 text-decoration:none;
}

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

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

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

.sub{
    width:200;
    border:none;
    padding:5px;
    background-color:#000000;
    margin:10px 10px 10px 10px;
    float:left;
}

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

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

.footer{
       clear:both;
}

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

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

<div class="main">


<div class="sub">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body{
    background-color:#ffffff;
}

A{
 text-decoration:none;
}

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

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

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

.sub{
    width:200;
    border:none;
    padding:5px;
    background-color:#ffffff;
    margin:10px 10px 10px 10px;
    float:left;
}

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

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

.footer{
       clear:both;
}

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

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

<div class="main">


<div class="sub">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ページトップへ

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