ここは、htmlタグとcss−すぐに使えるサンプルと小技集のサブドメインサイトです。
★htmlタグとcss−すぐに使えるサンプルと小技集−トップページ。
スポンサード リンク
◆HTML&CSS◆ htmlテンプレート(配布)
CSS(スタイルシート)外部呼び出し付きのテンプレートです。
htmlファイルに加えCSSのファイルを作る必要があります。
このテンプレートを使うと
CSS付きhtmlテンプレート。
のようなデザインになります。
htmlテンプレートのソース
<html>
<head>
<title>◆ホームページのタイトル名◆</title>
<link rel="stylesheet" type="text/css" href="temp.css">
</head>
<body style="margin-top:0px;margin-left:20px;margin-right:20px;margin-bottom:0px;" bgcolor="#45995A">
<div id="temp">
<table width=700 align=center border=0 cellspacing=0 cellpadding=0 bgcolor="#FFFFFF">
<tr>
<td width=700 colspan="2">
<font style="filter:glow(color=#000000);width:100%; font-size:35px" color="#FFBB33">
◆サイト名◆
</font>
</td>
</tr>
<tr>
<td width=200 valign="top">
<b>目次</b><hr>
<a href="index.html">Top Page</a><br>
◆項目◆◆◆<br>
◆項目◆◆◆<br>
◆項目◆◆◆<br>
◆項目◆◆◆
<br><br><b>copy right(©)</b><hr>
◆著作権情報<br><br>
<b>address</b><hr>
◆hpのアドレス<br><br>
<b>Link</b><hr>
◆相互リンクサイト
</td>
<td width=500 valign="top">
<div id="line">
<b>◆見出し◆◆◆</b><hr>
◆本文◆◆◆<br>
◆本文◆◆◆<br>
◆本文◆◆◆<br>
◆本文◆◆◆<br>
◆本文◆◆◆
</div>
</td>
</tr>
<tr>
<td width=700 colspan="2">
<hr>
◆備考(サイトの趣旨についての説明文など)◆
</td>
</tr>
</table>
</div>
</body>
</html>
外部CSS(スタイルシート)のソース
b{color:#FF0000;}
a{color:blue;text-decoration:none;}
a:hover{color:red;border-bottom:1px dotted #000;}
#temp table{font-size:12px; border-left:1px solid #000;border-right:10px solid #000;padding:0px 5px 0px 5px;}
#temp td{border-left:5px solid #F80;border-right:5px solid #F80;border-top:5px solid #FFF;}
#line{line-height: 15px;}
テンプレートに関しての補足
1、外部CSSファイルの呼び出しは初期値でtemp.cssというファイルを呼び出す。(変更可)
2、テンプレートの赤字の部分は全ページ共通。(6箇所)
3、テンプレートの緑の部分が目次。(1箇所)
4、テンプレートの青字の部分が本文である。(1箇所)
5、このテンプレートはご自由にお使い下さい。(改変可,再配布不可,連絡不要。)
★htmlテンプレート(配布＋)
★初心者用htmlテンプレート(配布)
★ホームページ作成用−htmlテンプレート(配布)
★テンプレートを使ったホームページ作成の流れ。
★自作デザイン−テンプレート作成法。
