BLACK×WHITE・タグ【Template】

3.BLACK×WHITE
フレームなし。使用画像1点。

◆Topページ用　【sample】

HTMLタグのソース（エリア内をクリックすると全て選択します）

　
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<style type="text/css">
<!--
body{scrollbar-arrow-color: #ffffff;
     scrollbar-track-color: #ffffff;
     scrollbar-face-color: #000000;
     scrollbar-3dlight-color: #000000;
     scrollbar-highlight-color: #ffffff;
     scrollbar-shadow-color: #ffffff;
     scrollbar-darkshadow-color: #000000;
     background-color: #ffffff;
     background-image : url("ここに画像ファイル名");
     background-position: 0% 90%;
     background-repeat: no-repeat;
     background-attachment: fixed;}
         
body,td{color: "#ffffff";
        font-family: 'Agency FB,Arial Narrow,San serif,Verdana';}

a{text-decoration : none;}
a:link{color: #ffffff;}
a:hover{color: #ffffff;
        font-weight: bolder;}
a:active{color: #000000;}
a:visited{color: #888888;}

.t{border: 5pt dashed #000000;}

.t1{border: 2pt solid #000000;}

.t2{background-color: #000000;
    border: 5pt dashed #000000;}
-->
</style>

<title>ここにHPタイトル</title>
</head>

<body>

<div align="left">
<table class="t" width="100%" height="100%" cellspacing="30" cellpadding="0">
<tr>
<td class="t1" width="30%" height="10%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'">
<a href="ここにリンク先ファイル名"><font size="4">Link</font></a>
</td>
<td class="t1" width="22%" height="10%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t1" width="15%" height="10%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" ffff'">
<a href="ここにリンク先ファイル名"><font size="4">Mail</font></a>
</td>
<td class="t1" width="8%" height="10%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t1" width="3%" height="10%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t2" width="22%" height="100%" align="center" valign="top" rowspan="4">
<font size="8">HOME<br>PAGE<br>TITLE</font>
<br><br><br><br><br><br><br>
<font size="1">（カウンター設置場）</font>
<br><br>
<font size="2"><a href="http://crambon.himegimi.jp/" target="_blank" title="フリー素材＆テンプレート配布屋">Designed by<br>Crambon*</a></font>
</td>
</tr>

<tr>
<td class="t1" width="30%" height="20%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t1" width="22%" height="20%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'">
<a href="ここにリンク先ファイル名"><font size="6">Essay</font></a>
</td>
<td class="t1" width="15%" height="20%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t1" width="8%" height="20%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t1" width="3%" height="20%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'">
&nbsp;
</td>
</tr>

<tr>
<td class="t1" width="30%" height="70%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'">
<a href="ここにリンク先ファイル名"><font size="6">Profile</font></a>
</td>
<td class="t1" width="22%" height="70%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'">
<a href="ここにリンク先アドレス" target="_blank"><font size="7">Blog</font></a>
</td>
<td class="t1" width="15%" height="70%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
<td class="t1" width="8%" height="70%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'">
<a href="ここにリンク先アドレス"><font size="6">B<br>B<br>S</font></a>
</td>
<td class="t1" width="3%" height="70%" align="center" valign="middle" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#ffffff'">
&nbsp;
</td>
</tr>
</table>
</div>


</body>

</html>

◆Mainページ用　【sample】

HTMLタグのソース（エリア内をクリックすると全て選択します）

　
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<style type="text/css">
<!--
body{scrollbar-arrow-color: #ffffff;
     scrollbar-track-color: #ffffff;
     scrollbar-face-color: #000000;
     scrollbar-3dlight-color: #000000;
     scrollbar-highlight-color: #ffffff;
     scrollbar-shadow-color: #ffffff;
     scrollbar-darkshadow-color: #000000;
     background-color: #ffffff;
     background-image : url("ここに画像ファイル名");
     background-position: 0% 80%;
     background-repeat: no-repeat;
     background-attachment: fixed;}
         
body,td{color: "#888888";
        font-size: 11pt;
        font-family: 'Arial Narrow,San serif,Verdana';
        line-height: 150%;}

a{text-decoration : none;}
a:link{color: #888888;}
a:hover{color: #ffffff;
        font-weight: bolder;}
a:active{color: #000000;}
a:visited{color: #888888;}

.t{border: 3pt dashed #000000;}

.t1{border: 2pt solid #000000;}

.t2{background-color: #000000;
    border: 3pt dashed #000000;}
-->
</style>

<title>ここにページのタイトル</title>
</head>

<body>

<div align="left">
<table class="t" width="100%" height="50" cellspacing="10">
<tr>
<td class="t2" width="100%" height="50" align="left" valign="middle">
<font size="6" color="#ffffff">&nbsp;HOME PAGE TITLE</font>  
</td>  
</tr>  
</table>  
</div>  
  
<div align="left">  
<table class="t" width="100%" height="600" cellspacing="10" cellpadding="10">  
<tr>  
<td class="t1" width="70%" height="600" align="right" valign="top" rowspan="2">  
<h1>Profile</h1> 
<br>  
性別：をんな 
<br> 
年齢：不問 
<br> 
・・・・・・とかなんとか、てきとーに埋めてください。 
</td> 
<td class="t2" width="30%" height="550" align="center" valign="top"> 
<font size="4">Contents</font> 
<br><br> 
<a href="ここにトップページアドレス">HOME.......トップへ戻る</a> 
<br> 
<a href="ここにリンク先ファイル名">Essay.......エッセイ</a> 
<br> 
<a href="ここにリンク先アドレス" target="_blank">Blog.......日記</a> 
<br> 
<a href="ここにリンク先アドレス">BBS.......掲示板</a> 
<br> 
<a href="ここにリンク先ファイル名">Link........リンク集</a> 
<br> 
<a href="ここにリンク先ファイル名">Mail.......メールフォームへ</a> 
</td> 
</tr> 
<tr> 
<td class="t" width="30%" height="50" align="right" valign="middle"> 
<font size="2"><a href="http://crambon.himegimi.jp/" target="_blank" title="フリー素材＆テンプレート配布屋">Designed by Crambon*</a></font>                                                                                                                                                            
</td> 
</tr> 
</table> 
</div> 
 
 
</body> 
 
</html>

◆使用画像（Top用。縮小表示しています。このままDLしてください。）

関連素材はこちらから

テーブルの枠線を大胆に使ってみました。背景画像との遠近感や透明感も意識してみたつもり。
トップページはテーブル内のセルにマウスを乗せるとセルが黒くなり、白い文字リンクが浮き上がるようになっています。
フォントの「Arial Narrow」とか「Agency FB」とかはかっこいいんだけど、表示できないPCもあるかもしれません。
その後の候補に「San serif」を入れて、一応スッキリ系のゴシック体フォントで表示されるようにそろえてあります。違和感ないといいんだけれど。

このページのテキストエリア内に、ソース内のスペースタグ を表示させるのになにげに苦労してしまいました。
テキストエリア内なんだからそのまま表示されるはずなのになんでーー！って（＾＾ゞ
要はエリア内にhtmlタグを入れ、その中の特殊文字を文字として表示させるにはどうしたらってことなんですが、わかってみると簡単だけど、わかるまでがけっこう・・・（＾＾；でした。
エリア内でもHIMLタグの中の特殊文字はタグとして認知されてしまうのですねぇ。いやはや、勉強させてもらいましたよ・・・。テンプレート屋の道は険しいな・・・。

素材を探すなら・・・ ◆sozai-R ◆素材NAVI ◆素材屋ランキング ◆0574 w.s.r

Crambon* Template
●規約に同意できる方はソースと使用画像をコピーしてお使いのPCに保存し、ご利用ください。素材の規約ページへテンプレートの規約ページへ（画像は右クリックして「名前をつけて画像を保存」。ソースはコピーしてメモ帳などに貼り付けHTMLファイルとして保存（拡張子をhtmかhtmlに）してください。） ●「ここに画像のファイル名」と書いてあるところにはご自分で指定した画像のファイル名を入れてください。「ここにメールアドレス」なども同様です。