htmlタグとcss－すぐに使えるサンプルと小技集－自作デザイン

ここは、htmlタグとcss－すぐに使えるサンプルと小技集のサブドメインサイトです。

スポンサードリンク

◆HTML&CSS◆ 自作テンプレート作成法

htmlでテンプレートを作成する方法についてです。

実際にテンプレートを作るのは難しそうと言うイメージがあるかもしれませんが、コツさえ掴めば、物凄く簡単に作成できます。

私がはじめて作ったテンプレートは、作り方というか使い方自体を勘違いしていた･･････、文字を入力するたびにデザインが崩れるため、1ページ制作するのに30分もかかるような無意味なテンプレートになりました(TωT)。

ホームページの制作に時間がかかるようではテンプレートの意味がありません。

テンプレート作成の第一歩。

見ていただければ判りますが、以下の4ソースはテンプレートを作るうえでの型なのですが、100%役に立ちそうもないと感じられると思います。

そこで今回の説明で最終的に完成するテンプレートを先にお見せします。

テンプレートの完成型その2。
デザイン酷くてすみません。

初心者用htmlテンプレート。
CSS付きhtmlテンプレート。
コチラの方が出来も使いやすさも上です。

テンプレートの型となるソース。お好きなものを1つお選び下さい。(今回の説明に使う型はNo4です。)

ソースno01: <table width=800 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="5">htmlテンプレート－コピペA</td></tr> <tr><td width=150>htmlテンプレート－コピペB</td><td width=25> </td> <td width=450>htmlテンプレート－コピペC</td> <td width=25> </td><td width=150>htmlテンプレート－コピペD</td></tr> <tr><td colspan="5">htmlテンプレート－コピペE</td></tr> </table>

ソースno02: <table width=700 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="3">htmlテンプレート－コピペA</td></tr> <tr><td width=200>htmlテンプレート－コピペF</td><td width=25> </td> <td width=475>htmlテンプレート－コピペC</td></tr> <tr><td colspan="3">htmlテンプレート－コピペE</td></tr> </table>

ソースno03: <table width=700 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="3">htmlテンプレート－コピペA</td></tr> <tr><td width=475>htmlテンプレート－コピペC</td> <td width=25> </td><td width=200>htmlテンプレート－コピペF</td></tr> <tr><td colspan="3">htmlテンプレート－コピペE</td></tr> </table>

ソースno04: <table width=700 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="3">htmlテンプレート－コピペA</td></tr> <tr><td width=450>htmlテンプレート－コピペC</td> <td width=20> </td><td width=230>htmlテンプレート－コピペF</td></tr> <tr><td colspan="3">htmlテンプレート－コピペE</td></tr> </table>

さて、以上のソースだけではホームページやテンプレートとして優秀かどうか以前にテーブルとして見ても酷い出来です。

そこでhtmlテンプレート－コピペと書かれている部分に以下のhtmlで作ったテーブルをぶち込みます。ソースNo4のコピペAの部分は見出し部分。コピペCの部分は本文の部分なので手を加えません。コピペFの部分が右サイド(目次など)。コピペEの部分が最下層の部位を担当します。

見出し部分のソース1(A): <table width=700 border=0 cellspacing=0 cellpadding=0> <tr><td height=1 bgcolor="#000000" colspan="5"></td></tr> <tr><td width=1 bgcolor="#000000"></td><td width=649> </td><td width=70 colspan="3" bgcolor="#000000"> </td></tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=629><font style="filter:wave(add=0,freq=1,phase=30,strength=10,lightstrength=100);width:100%; font-size:35px" color="#AFF61F"><h1> ホームページのタイトル名</h1></font></td> <td width=1 bgcolor="#000000"></td> <td width=68 bgcolor="#FFFFFF" align=center>site map</td> <td width=1 bgcolor="#000000"></td> </tr> <tr><td height=1 bgcolor="#000000" colspan="5"></td></tr> </table>

見出し部分のソース2(A): <table width=700 border=0 cellspacing=0 cellpadding=0> <tr><td height=1 bgcolor="#000000" colspan="13"></td></tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=469> </td> <td width=70 colspan="3" bgcolor="#000000"> </td> <td width=10></td> <td width=70 colspan="3" bgcolor="#000000"> </td> <td width=10></td> <td width=70 colspan="3" bgcolor="#000000"> </td> </tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=469 align=center><font style="filter:wave(add=0,freq=1,phase=30,strength=10,lightstrength=100);width:100%; font-size:35px" color="#AFF61F"><h1> ホームページのタイトル名</h1></font></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Link</th> <td width=1 bgcolor="#000000"></td> <td width=10></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Profile</th> <td width=1 bgcolor="#000000"></td> <td width=10></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Site map</th> <td width=1 bgcolor="#000000"></td> </tr> <tr><td height=1 bgcolor="#000000" colspan="13"></td></tr> </table>

サイドのソース1(F): <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No1</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No2</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No3</th> </tr> <tr> <td height=1 width=69 bgcolor="#000000" colspan="2"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=69 bgcolor="#000000" colspan="2"></td> </tr> <tr><td height=10 bgcolor="#FFFFFF" colspan="9"></td></tr> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No4</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No5</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No6</th> </tr> <tr> <td height=1 width=69 bgcolor="#000000" colspan="2"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=69 bgcolor="#000000" colspan="2"></td> </tr> <tr><td height=10 bgcolor="#FFFFFF" colspan="9"></td></tr> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No7</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No8</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No9</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

サイドのソース2(F): <table width=230 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> </tr> <tr> <td width=1 height=56 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No1</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No2</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No3</th> <td width=1 bgcolor="#000000"></td> </tr> <tr> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> </tr> <tr><td height=10 bgcolor="#FFFFFF" colspan="11"></td></tr> <tr> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> </tr> <tr> <td width=1 height=56 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No4</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No5</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No6</th> <td width=1 bgcolor="#000000"></td> </tr> <tr> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> </tr> <tr><td height=10 bgcolor="#FFFFFF" colspan="11"></td></tr> <tr> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> </tr> <tr> <td width=1 height=56 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No7</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No8</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No9</th> <td width=1 bgcolor="#000000"></td> </tr> <tr> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> <td height=1 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=1 width=70 bgcolor="#000000" colspan="3"></td> </tr> </table>

サイドのソース3(F): <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=70 bgcolor="#000000" colspan="3"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No1</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No2</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=68 bgcolor="#FFFFFF">目次No3</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

サイドのソース4(F): <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No1</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">目次No2</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

サイドのソース5(F): <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=228 bgcolor="#000000"></td> </tr> <tr> <th width=228 height=56 bgcolor="#FFFFFF">目次No1</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

下層部のソース1(E): <table width=700 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=698 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=698 bgcolor="#000000"></td> </tr> <tr> <th width=698 height=56 bgcolor="#FFFFFF">width230を700、228を698に変換しただけ。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

下層部のソース2(E): <table width=700 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=698 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=698 bgcolor="#000000" colspan="3"></td> </tr> <tr> <th width=250 height=56 bgcolor="#FFFFFF"><font style="filter:glow(color=#000000,strength=5);width:100%; font-size:25px" color="#FFFFFF" face="Arial Black"> Top Page Link </font></th> <td width=1 bgcolor="#000000"></td> <th width=447 height=56 bgcolor="#FFFFFF">Top Page Link用のテーブル。必要に応じて改造して下さい。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

下層部のソース3(E): <table width=700 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=698 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=698 bgcolor="#000000" colspan="3"></td> </tr> </table> <table width=698 border=0 cellspacing=0 cellpadding=0> <tr> <th width=271 height=56 bgcolor="#FFFFFF"><font style="filter:glow(color=#000000,strength=5);width:100%; font-size:25px" color="#FFFFFF" face="Arial Black"> Hp Title Name </font></th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">目次</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">Link</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">Copy</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">Mail</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">Map</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">Menu</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">List</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=40 bgcolor="#FFFFFF">Site</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> </tr> </table></td></tr> <tr><td height=1></td></tr> </table>

今回は、見出し部分のソース2(A)、サイドのソース4(F)、下層部のソース2(E)をコピペしました。(＋サイドは若干手を加えました。)

テンプレートの完成型その1。の完成です♪

ただ、このままでは文章(本文)が長くなった時、こんな風にデザインが崩れる問題が発生するため、valign="top"を利用してデザインを崩れを抑えます。

テンプレートの完成型その1+valignのソース: <table width=700 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="3"> <table width=700 border=0 cellspacing=0 cellpadding=0> <tr><td height=1 bgcolor="#000000" colspan="13"></td></tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=469> </td> <td width=70 colspan="3" bgcolor="#000000"> </td> <td width=10></td> <td width=70 colspan="3" bgcolor="#000000"> </td> <td width=10></td> <td width=70 colspan="3" bgcolor="#000000"> </td> </tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=469 align=center><font style="filter:wave(add=0,freq=1,phase=30,strength=10,lightstrength=100);width:100%; font-size:35px" color="#AFF61F"><h1> ホームページのタイトル名</h1></font></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Link</th> <td width=1 bgcolor="#000000"></td> <td width=10></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Profile</th> <td width=1 bgcolor="#000000"></td> <td width=10></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Mail</th> <td width=1 bgcolor="#000000"></td> </tr> <tr><td height=1 bgcolor="#000000" colspan="13"></td></tr> </table> </td></tr> <tr><td height=15></td></tr> <tr><td width=450 valign="top"> <font style="filter:glow(color=#000000,strength=5);width:100%; font-size:25px" color="#FFFFFF" face="Arial Black"> Contents Title Name </font> <hr> 1行目。<br><br> 2。<br><br> 3。<br><br> 4。<br><br> 5。<br><br> 6。<br><br> 7。<br><br> 8。<br><br> 9。<br><br> 10。<br><br> 11。<br><br> 12。<br><br> 13。<br><br> 14。<br><br> 15。<br><br> 16。<br><br> 17。<br><br> 18。<br><br> 19。 </td> <td width=20> </td><td width=230 valign="top"> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">TOP</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">ホームページのトップページに戻る。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> <table> <tr><td height=10></td></tr> </table> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">Site map</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">当サイトのサイトマップ。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> <table> <tr><td height=10></td></tr> </table> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No1</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">目次No1のリンク先のページ内容。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> <table> <tr><td height=10></td></tr> </table> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No2</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">目次No2のリンク先のページ内容。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> <table> <tr><td height=10></td></tr> </table> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No3</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">目次No3のリンク先のページ内容。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> <table> <tr><td height=10></td></tr> </table> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=228 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=69 bgcolor="#000000" colspan="2"></td> <td height=18 width=10 bgcolor="#FFFFFF" colspan="1"></td> <td height=18 width=149 bgcolor="#000000" colspan="2"></td> </tr> <tr> <th width=68 height=56 bgcolor="#FFFFFF">目次No4</th> <td width=1 bgcolor="#000000"></td> <td width=10 bgcolor="#FFFFFF"></td> <td width=1 bgcolor="#000000"></td> <th width=148 bgcolor="#FFFFFF">目次No4のリンク先のページ内容。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> </td></tr> <tr><td height=15></td></tr> <tr><td colspan="3"> <table width=700 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=698 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=698 bgcolor="#000000" colspan="3"></td> </tr> <tr> <th width=250 height=56 bgcolor="#FFFFFF"><font style="filter:glow(color=#000000,strength=5);width:100%; font-size:25px" color="#FFFFFF" face="Arial Black"> Top Page Link </font></th> <td width=1 bgcolor="#000000"></td> <th width=447 height=56 bgcolor="#FFFFFF">Top Page Link用のテーブル。必要に応じて改造して下さい。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> </td></tr> </table>

これでテンプレートがひとまず完成です。

ただ、上記のテンプレートには最低でも2つ弱点があります。

サイドバーの作り方の構造に無駄が多い。サイドのデザインがワンパターンで悪い。

特に先に挙げた構造については目次を作る際、結構めんどくさいです。

と言う事で少しテンプレートのデザインと使いやすさを改善する事にします。

(テンプレート作成ではこのように直す必要に迫られる事が多いです。)

今度は、ちょっと趣向を凝らして、外部スタイルシート、スタイルシートを利用した目次、ifream、ifream呼び出しページ、select、table、簡単なjavaの計7個を作ってみます。

tableを利用した使いやすい目次のソース: <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=2></td></tr> <tr><td align=center> <table width=222 border=0 cellspacing=0 cellpadding=0> <tr> <th bgcolor="#FFFFFF">目次</th> </tr> <tr><td height=2></td></tr> <tr> <td bgcolor="#FFFFFF"> <ul> <li>目次部分</li> <li>･･････</li> </ul> </td></tr> </table> </td></tr> <tr><td height=2></td></tr> </table>

スタイルシートが必要な目次のソース: <table width=230 height=230 border=0 cellspacing=0 cellpadding=0 bgcolor="#000000"> <tr><td align=center> <table width=228 height=210 border=0 cellspacing=0 cellpadding=0 bgcolor="#FFFFFF"> <tr><td> <div id="html"> 更新履歴や目次<br><br> 1・・・・・・・・・・・・・・・・・・・・・<br><br> 2<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9<br><br> #html{z-index:1;height:210px;width:228px;margin:0;font-size:15px; padding:20px 15px 20px 15px; solid #FFF;border-right:0px;} #html a:hover{color:red; border-bottom:1px dotted #000;} #html{_overflow:auto;} body{margin:0;padding:0;}<br><br> という内容のcss(スタイルシート)を作成しlink relで外部から呼び出す。<br><br> css(スタイルシート)なしでは横のスクロールバーがなくなる。デザインが崩れる。縦幅が長くなるなどのデメリットが出る。 </div> </td></tr></table> </td></tr></table>

スタイルシート(外部からの呼び出し): #html{z-index:1;height:210px;width:228px;margin:0;font-size:15px; padding:20px 15px 20px 15px; solid #FFF;border-right:0px;} #html a:hover{color:red; border-bottom:1px dotted #000;} #html{_overflow:auto;} body{margin:0;padding:0;}

ifreamのソース: <table width=230 height=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td align=center> <iframe src="html-css-temp2.html" name="ラジア" width="228" height="228">ラジア</iframe> </td></tr> </table>

ifream呼び出しページのソース: ここにはifreamが表示されます。初期状態ではhtml-css-temp2.htmlというhtmlファイルを呼び出しています。

コピペで使えるJavaScriptのソース: <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=2></td></tr> <tr><td align=center> <table width=222 border=0 cellspacing=0 cellpadding=0> <tr> <th bgcolor="#FFFFFF">JavaScript<br>時間帯により文章の内容が変化。</th> </tr> <tr><td height=2></td></tr> <tr> <td bgcolor="#FFFFFF"> <script language="JavaScript">  </script> </td></tr> </table> </td></tr> <tr><td height=2></td></tr> </table>

selectで無理やり作った更新履歴のソース: <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=2></td></tr> <tr><td align=center> <table width=222 border=0 cellspacing=0 cellpadding=0> <tr> <th bgcolor="#FFFFFF">更新履歴</th> </tr> <tr><td height=2></td></tr> <tr> <td bgcolor="#FFFFFF"> <select name="更新履歴" size="5"> <option>ホームページ公開日</option> <option>20XX年 YY月 ZZ日</option> <option>----------------------------</option> <option>最終更新日</option> <option>20XX年 YY月 ZZ日</option> <option>----------------------------</option> </select> </td></tr> </table> </td></tr> <tr><td height=2></td></tr> </table> (スタイルシートが必要な目次のソースを改良して更新履歴を作る方がベターです。)

この7つの内、tableを利用した使いやすい目次のソース以外の6つを先程のテンプレートの完成型その1のサイド部分と置き換えてコピー＆ペーストしていけば簡単に、テンプレートの完成型その2の完成です♪

テンプレートの完成型その2のソース: <table width=700 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="3"> <table width=700 border=0 cellspacing=0 cellpadding=0> <tr><td height=1 bgcolor="#000000" colspan="13"></td></tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=469> </td> <td width=70 colspan="3" bgcolor="#000000"> </td> <td width=10></td> <td width=70 colspan="3" bgcolor="#000000"> </td> <td width=10></td> <td width=70 colspan="3" bgcolor="#000000"> </td> </tr> <tr> <td width=1 bgcolor="#000000"></td> <td width=469 align=center><font style="filter:wave(add=0,freq=1,phase=30,strength=10,lightstrength=100);width:100%; font-size:35px" color="#AFF61F"><h1> ホームページのタイトル名</h1></font></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Link</th> <td width=1 bgcolor="#000000"></td> <td width=10></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Profile</th> <td width=1 bgcolor="#000000"></td> <td width=10></td> <td width=1 bgcolor="#000000"></td> <th width=68 height=18 bgcolor="#FFFFFF">Mail</th> <td width=1 bgcolor="#000000"></td> </tr> <tr><td height=1 bgcolor="#000000" colspan="13"></td></tr> </table> </td></tr> <tr><td height=15></td></tr> <tr><td width=450 valign="top"> <font style="filter:glow(color=#000000,strength=5);width:100%; font-size:25px" color="#FFFFFF" face="Arial Black"> Contents Title Name </font> <hr> ◆本文を書く所◆<br><br> 文章が長くなってもデザインが崩れません。<br><br> このテンプレートの場合にはむしろ、文章が短い方がデザインが悪いようです。 </td> <td width=20> </td><td width=230 valign="top"> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=2></td></tr> <tr><td align=center> <table width=222 border=0 cellspacing=0 cellpadding=0> <tr> <th bgcolor="#FFFFFF">JavaScript<br>時間帯により文章の内容が変化。</th> </tr> <tr><td height=2></td></tr> <tr> <td bgcolor="#FFFFFF"> <script language="JavaScript">  </script> </td></tr> </table> </td></tr> <tr><td height=2></td></tr> </table> <table width=230 height=230 border=0 cellspacing=0 cellpadding=0 bgcolor="#000000"> <tr><td align=center> <table width=228 height=210 border=0 cellspacing=0 cellpadding=0 bgcolor="#FFFFFF"> <tr><td> <div id="html"> 目次<br><br> Site Top<br><br> Site Map<br><br> 3<br><br> 4<br><br> 5<br><br> 6<br><br> 7<br><br> 8<br><br> 9 </div> </td></tr></table> </td></tr></table> <table width=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=2></td></tr> <tr><td align=center> <table width=222 border=0 cellspacing=0 cellpadding=0> <tr> <th bgcolor="#FFFFFF">更新履歴</th> </tr> <tr><td height=2></td></tr> <tr> <td bgcolor="#FFFFFF"> <select name="更新履歴" size="5"> <option>ホームページ公開日</option> <option>20XX年 YY月 ZZ日</option> <option>----------------------------</option> <option>最終更新日</option> <option>20XX年 YY月 ZZ日</option> <option>----------------------------</option> </select> </td></tr> </table> </td></tr> <tr><td height=2></td></tr> </table> <table width=230 height=230 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td align=center> <iframe src="html-css-temp2.html" name="ラジア" width="228" height="228">ラジア</iframe> </td></tr> </table> </td></tr> <tr><td height=15></td></tr> <tr><td colspan="3"> <table width=700 bgcolor="#000000" border=0 cellspacing=0 cellpadding=0> <tr><td height=1></td></tr> <tr><td align=center> <table width=698 border=0 cellspacing=0 cellpadding=0> <tr> <td height=18 width=698 bgcolor="#000000" colspan="3"></td> </tr> <tr> <th width=250 height=56 bgcolor="#FFFFFF"><font style="filter:glow(color=#000000,strength=5);width:100%; font-size:25px" color="#FFFFFF" face="Arial Black"> Top Page Link </font></th> <td width=1 bgcolor="#000000"></td> <th width=447 height=56 bgcolor="#FFFFFF">Top Page Link用のテーブル。必要に応じて改造して下さい。</th> </tr> </table></td></tr> <tr><td height=1></td></tr> </table> </td></tr> </table>

デザインも前より改善されましたし汎用性も一気に高まりました♪

これが自作テンプレート作成の流れです。

慣れてくれば2,3時間でテンプレートが1つ作れるようになります。

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

★初心者用htmlテンプレート(配布)
★ホームページ作成用－htmlテンプレート(配布)
★テンプレートを使ったホームページ作成の流れ。
★自作デザイン－テンプレート作成法。