サイト作成サンプル

SEO対策tool

　　これから初めてHPを作ろうとしている人たちにとって、サイト作りのヒントなるように、製作過程を段階的に
　　公開してみました。　興味のある人は下のソースを参考にしてみてください。
　　

　>> ホーム >> HPの製作手順に戻る >> 第１過程 >> 第２過程 >> 第３過程 >> 第４過程 >> 第５過程 >> 第６過程 >>

　　第１過程　　　第１過程はテンプレート風に全体の骨格を作りました。わかりやすいように各部分には
　　　　　　　　　　　　　　　　　　色をつけてます。　下の枠内にHTMLタグを表示していますので、テンプレートとして
　　　　　　　　　　　　　　　　　　使っていただいてもかまいません。

　　画像１

　　テキスト１

　　画像２

　　テキスト２

　　画像３

　　テキスト３

　　画像４

　　テキスト４

　　画像５

　　テキスト５

　　画像６

　　テキスト６

　　画像７

　　テキスト７

　　画像８

　　テキスト８

　　画像９

　　テキスト９

　　画像１０

　　テキスト１０

　　画像１１

　　テキスト１１

　　画像１２

　　テキスト１２

商品スペース１	商品スペース２	商品スペース３	商品スペース４	商品スペース５

商品スペース６	商品スペース７	商品スペース８	商品スペース９	商品スペース１０

商品スペース１１	商品スペース１２	商品スペース１３	商品スペース１４	商品スペース１５

商品スペース１６	商品スペース１７	商品スペース１８	商品スペース１９	商品スペース２０

テンプレートとして使われる場合は、HPビルダーのスタートから
『ページの種類 → 通常ページ』『作り方 → 白紙から』『編集モード → 標準モード』
を選択して表示されたページのHTMLソース画面で、<BODY>と</BODY>の間に貼り付けてください。

<TABLE border="2" bordercolor="#ffcc66">
<TBODY>
<TR>
<TD bgcolor="#ffffff" width="800"><BR>
<TABLE border="0">
<TBODY>
<TR>
<TD>
<TABLE cellspacing="0" cellpadding="0" border="0">

<TR>
<TD width="30" height="30" bgcolor="#33ff66"></TD>
<TD width="730" bgcolor="#ff6666"></TD>
<TD width="30" height="30" bgcolor="#33ff66"></TD>
</TR>
<TR>
<TD height="100" colspan="3" bgcolor="#ffffff">
<TABLE border="0" cellspacing="0">
<TBODY>
<TR>
<TD valign="middle" align="center" colspan="2" width="556" height="109" bgcolor="#ccccff">　　　</TD>
<TD width="238" height="109">
<TABLE border="2" bordercolor="ffffff" cellspacing="2" width="190">
<TBODY>
<TR>
<TD bordercolor="ffcccc" align="center" height="91" width="91" bgcolor="#ffff99"></TD>
<TD bordercolor="ffcccc" height="91" width="91" align="center" bgcolor="#999999"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD width="30" height="30" bgcolor="#33ff66"></TD>
<TD bgcolor="#ff6666"></TD>
<TD width="30" height="30" bgcolor="#33ff66"></TD>
</TR>

</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="2" bordercolor="#ffcc66" cellspacing="0">
<TBODY>
<TR>
<TD width="800" bgcolor="#ffffff"><BR>
<BR>
<TABLE border="2" width="798" bordercolor="ffffff" cellspacing="0">
<TBODY>
<TR>
<TD width="640" valign="top"><BR>
<TABLE border="0" width="640">
<TBODY>
<TR>
<TD width="320" height="119">
<TABLE border="0" height="120">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像１</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト１</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="320" height="120">
<TABLE border="0" height="120">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像２</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト２</TD>
</TR></TBODY></TABLE>
</TD>
</TR></TBODY></TABLE>
<BR>
<TABLE border="0" width="640" height="120">
<TBODY>
<TR>
<TD width="320" height="120">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像３</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト３</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="320">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像４</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト４</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE border="0" width="640">
<TBODY>
<TR>
<TD width="320" height="120">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像５</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト５</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="320" height="120">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像６</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト６</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE border="0" width="640" height="120">
<TBODY>
<TR>
<TD width="320" height="120">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像７</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト７</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="320" height="120">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像８</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト８</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE border="0" width="640">
<TBODY>
<TR>
<TD width="320" height="126">
<TABLE border="0" height="120">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像９</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト９</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="320" height="126">
<TABLE border="0" height="120">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像１０</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト１０</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE border="0" width="640" height="120">
<TBODY>
<TR>
<TD width="320" height="120">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像１１</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト１１</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="320">
<TABLE border="0">
<TBODY>
<TR>
<TD width="110" height="110" bgcolor="#99ff99">　　画像１２</TD>
<TD width="206" bgcolor="#ffcccc">　　テキスト１２</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
</TD>
<TD bgcolor="#9999ff" width="139"></TD>
<TD width="3"></TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0" width="798">
<TBODY>
<TR>
<TD>
<TABLE border="0" cellspacing="10" width="798">
<TBODY>
<TR>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース２</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース３</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース４</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース５</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース６</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース７</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース８</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース９</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１０</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１１</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１２</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１３</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１４</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１５</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１６</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１７</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１８</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース１９</TD>
<TD width="140" height="200" bgcolor="#ffffcc">　　商品スペース２０</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<BR>
</TD>
</TR>
<TR>
<TD bgcolor="#ff9933">
<BR>
<BR>
<BR>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>

　　第２過程へ！

　>> ホーム >> HPの製作手順に戻る >> 第１過程 >> 第２過程 >> 第３過程 >> 第４過程 >> 第５過程 >> 第６過程 >>