htmlタグとcss－すぐに使えるサンプルと小技集

htmlタグとcss 目次

TOP htmlタグとcss－すぐに使えるサンプルと小技集

htmlタグで文字装飾。

htmlテンプレート(配布＋)

html関連リファレンス辞典。

テーブルや表の作成法。

フレームページの作成法。

1日で楽々習得html言語。

1日で習得スタイルシート。

htmlタグ－小技集。

html関連の雑学。

■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま

スポンサードリンク

◆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テンプレート(配布＋)

スポンサードリンク

Mail htmlタグ,テンプレート,スタイルシート(CSS),色見本,テーブル,メール,xml ■About Site 管理人,著作権,URL情報