 これから初めてHPを作ろうとしている人たちにとって、サイト作りのヒントなるように、製作過程を段階的に 公開してみました。 興味のある人は下のソースを参考にしてみてください。 |
| >> ホーム >> HPの製作手順に戻る >> 第１過程 >> 第２過程 >> 第３過程 >> 第４過程 >> 第５過程 >> 第６過程 >> |
 第 ２ 過 程 メイン部分に商品画像やテキスト、解説文の挿入部分を区割りしました。 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |
| <TABLE border="0" width="800" cellspacing="0"> <TBODY> <TR> <TD width="1" rowspan="4" bgcolor="#ffcc99"></TD> <TD width="800" height="80"><BR> <BR> <BR> </TD> <TD width="1" rowspan="4" bgcolor="#ffcc99"></TD> </TR> <TR> <TD bgcolor="#99ff99" height="13"></TD> </TR> <TR> <TD bgcolor="#ffffff" height="366" valign="top"><BR> <TABLE border="0" width="732"> <TBODY> <TR> <TD width="20" height="151"></TD> <TD width="266" height="151" bgcolor="#ffffcc"> 商品画像の大</TD> <TD width="76" height="151"></TD> <TD width="352" height="151" bgcolor="#ccffcc" align="center">テキストリンクと商品説明</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0" cellspacing="0"> <TBODY> <TR> <TD width="19" height="132"></TD> <TD width="265" height="132" bgcolor="#ffffcc" align="center"> 商品画像の大</TD> <TD width="80" height="132"></TD> <TD width="353" height="132" bgcolor="#ccffcc" align="center">テクストリンクと商品説明</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0"> <TBODY> <TR> <TD width="15"></TD> <TD width="733"></TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0" cellspacing="0"> <TBODY> <TR> <TD width="23" height="100"></TD> <TD width="110" bgcolor="#ffffcc" height="110"> 商品画像１</TD> <TD width="10" height="100"></TD> <TD width="110" bgcolor="#ffffcc" height="110"> 商品画像２</TD> <TD width="10" height="100"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10" height="100"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10" height="100"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10" height="100"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD height="100"></TD> </TR> <TR> <TD height="23"></TD> <TD height="23"><BR> </TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> <TD height="23"></TD> </TR> <TR> <TD height="30"></TD> <TD bgcolor="#ffcccc" height="30"> テキストリンク</TD> <TD height="30"></TD> <TD bgcolor="#ffcccc" height="30"> テキストリンク</TD> <TD height="30"></TD> <TD bgcolor="#ffcccc" height="30"></TD> <TD height="30"></TD> <TD bgcolor="#ffcccc" height="30"></TD> <TD height="30"></TD> <TD bgcolor="#ffcccc" height="30"></TD> <TD height="30"></TD> <TD bgcolor="#ffcccc" height="30"></TD> <TD height="30"></TD> </TR> <TR> <TD height="69"></TD> <TD bgcolor="#ccffcc" height="110"> 商品説明１</TD> <TD height="69"></TD> <TD bgcolor="#ccffcc" height="110"> 商品説明２</TD> <TD height="69"></TD> <TD bgcolor="#ccffcc" height="110"></TD> <TD height="69"></TD> <TD bgcolor="#ccffcc" height="110"></TD> <TD height="69"></TD> <TD bgcolor="#ccffcc" height="110"></TD> <TD height="69"></TD> <TD bgcolor="#ccffcc" height="110"></TD> <TD height="69"></TD> </TR> </TBODY> </TABLE> <BR> <BR> <TABLE border="0" cellspacing="0"> <TBODY> <TR> <TD width="23"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD></TD> </TR> <TR> <TD></TD> <TD><BR> </TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD bgcolor="#ffcccc" height="110"></TD> <TD></TD> <TD bgcolor="#ffcccc" height="110"></TD> <TD></TD> <TD bgcolor="#ffcccc" height="110"></TD> <TD></TD> <TD bgcolor="#ffcccc" height="110"></TD> <TD></TD> <TD bgcolor="#ffcccc" height="110"></TD> <TD></TD> <TD bgcolor="#ffcccc" height="110"></TD> <TD></TD> </TR> <TR> <TD></TD> <TD bgcolor="#ccffcc"><BR> <BR> <BR> </TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> </TR> </TBODY> </TABLE> <BR> <BR> <TABLE border="0" cellspacing="0"> <TBODY> <TR> <TD width="23"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD></TD> </TR> <TR> <TD></TD> <TD><BR> </TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD bgcolor="#ffcccc"><BR> </TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> </TR> <TR> <TD></TD> <TD bgcolor="#ccffcc"><BR> <BR> <BR> </TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> </TR> </TBODY> </TABLE> <BR> <BR> <TABLE border="0" cellspacing="0"> <TBODY> <TR> <TD width="23"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD width="10"></TD> <TD width="110" bgcolor="#ffffcc" height="110"></TD> <TD></TD> </TR> <TR> <TD></TD> <TD><BR> </TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD bgcolor="#ffcccc"><BR> </TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> <TD bgcolor="#ffcccc"></TD> <TD></TD> </TR> <TR> <TD></TD> <TD bgcolor="#ccffcc"><BR> <BR> <BR> </TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> <TD bgcolor="#ccffcc"></TD> <TD></TD> </TR> </TBODY> </TABLE> <BR> <BR> <BR> <BR> </TD> </TR> <TR> <TD bgcolor="#99ff99"><BR> </TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD> <BR> <BR> </TD> <TD></TD> </TR> </TBODY> </TABLE> |
 第 ３ 過 程 へ ！ |
| >> ホーム >> HPの製作手順に戻る >> 第１過程 >> 第２過程 >> 第３過程 >> 第４過程 >> 第５過程 >> 第６過程 >> |
