バラエティテーブルテンプレート/HTMLタグ素材集

バラエティテーブル
テンプレート

管理人お勧めのポイントを本当に現金に出来たサイト＆アプリ
モッピー	トリマ

テンプレTOP

黒板風
(改行すると左へ改行されます)

内容部分

メニュー1	メニュー2	メニュー3	メニュー4	メニュー5
メニュー6	メニュー7	メニュー8	メニュー9	メニュー10

<Table border="0" width="700" height="580" bgcolor="#009500" cellspacing="0" style="border:thick ridge maroon;width:600;">
<Tr><Td align="center" valign="top">



<div style="writing-mode:tb-rl;height:535;font-family:富士ポップ;color:#ffffff;">

内容部分

</div>


<Table border="1" width="700" height="30" bordercolor="#ffffff" bgcolor="maroon" cellspacing="0">
<Tr><Td align="center">
メニュー1
</Td><Td align="center">
メニュー2
</Td><Td align="center">
メニュー3
</Td><Td align="center">
メニュー4
</Td><Td align="center">
メニュー5
</Td></Tr>
<Tr><Td align="center">
メニュー6
</Td><Td align="center">
メニュー7
</Td><Td align="center">
メニュー8
</Td><Td align="center">
メニュー9
</Td><Td align="center">
メニュー10
</Td></Tr>
</Table>

</Td></Tr>
</Table>

新聞風

タイトル部分

見出し

ここがメイン文章です(その１)

改行タグを挿入すると左へ改行されます。
新聞風なので文章が少ないと結構寂しくなってしまうので文章がたくさんある内容にした方が良いでしょう。

画像タグを挿入するとこんな感じです。

この画像の大きさは１００×１００の大きさです。

ここがメイン文章です(その２)

改行タグを挿入すると左へ改行されます。
新聞風なので文章が少ないと結構寂しくなってしまうので文章がたくさんある内容にした方が良いでしょう。

ここはサブ文章部分です。

広告１

広告２

広告３

メニュー１	メニュー２	メニュー３	メニュー４	メニュー５
メニュー６	メニュー７	メニュー８	メニュー９	メニュー１０

<Table border="1" bordercolor="#7f7f7f" cellspacing="2">
<Tr><Td>
<Table border="0" width="700" height="930" bgcolor="#f4f4f4" cellspacing="0">
<Tr><Td height="100" align="center" bgcolor="#bfbfbf">
<span style="width:480;font-size:50pt;font-family:魚石行書;color:#353535;">
<B>タイトル部分</B></span>


</Td></Tr>
<Tr><Td height="450" align="right" valign="top">
<Table border="0" width="50" height="450" align="right" bgcolor="#7f7f7f">
<Tr><Td align="center" valign="middle">
<div style="writing-mode:tb-rl;height:450;font-family:ＭＳ 明朝;color:#ffffff;font-size:40;">
見出し
</div>
</Td></Tr>
</Table>

<Table border="0" width="650" height="235">
<Tr><Td>
<div style="writing-mode:tb-rl;height:210;font-family:ＭＳ 明朝;color:#000000;font-size:14;">
<B>ここがメイン文章です(その１)</B>
<Br><Br>
改行タグを挿入すると左へ改行されます。<Br>
新聞風なので文章が少ないと結構寂しくなってしまうので文章がたくさんある内容にした方が良いでしょう。
<Br><Br>
画像タグを挿入するとこんな感じです。<Br>
<img src="画像ＵＲＬ"><Br>
この画像の大きさは１００×１００の大きさです。
</div>
<hr size="5" width="600" style="filter:glow(color=#7f7f7f);">
</Td></Tr>
</Table>



<Table border="0" width="650" height="235">
<Tr><Td>
<div style="writing-mode:tb-rl;height:210;font-family:ＭＳ 明朝;color:#000000;font-size:14;">
<B>ここがメイン文章です(その２)</B>
<Br><Br>
改行タグを挿入すると左へ改行されます。<Br>
新聞風なので文章が少ないと結構寂しくなってしまうので文章がたくさんある内容にした方が良いでしょう。
</div>
<hr size="5" width="600" style="filter:glow(color=#7f7f7f);">
</Td></Tr>
</Table>


</Td></Tr>
<Tr><Td height="150">


<Table border="0" width="700" height="150" align="right">
<Tr><Td>
<div style="writing-mode:tb-rl;height:130;font-family:ＭＳ 明朝;color:#000000;font-size:14;">
ここはサブ文章部分です。
</div>
<hr size="5" width="700" style="filter:glow(color=#7f7f7f);">
</Td></Tr>
</Table>


</Td></Tr>
<Tr><Td height="150">
<Table border="1" bordercolor="#4a4a4a" width="710" height="150" cellspacing="0">
<Tr><Td align="center">
広告１
</Td><Td align="center"> 
広告２
</Td><Td align="center">
広告３
</Td></Tr>
</Table>


<Table border="1" bordercolor="#4a4a4a" bgcolor="#dfdfdf" width="710" height="30" cellspacing="0">
<Tr><Td align="center" width="140">
メニュー１
</Td><Td align="center" width="140"> 
メニュー２
</Td><Td align="center" width="140"> 
メニュー３
</Td><Td align="center" width="140"> 
メニュー４
</Td><Td align="center" width="140"> 
メニュー５
</Td></Tr>
<Tr><Td align="center" width="140">
メニュー６
</Td><Td align="center" width="140"> 
メニュー７
</Td><Td align="center" width="140"> 
メニュー８
</Td><Td align="center" width="140"> 
メニュー９
</Td><Td align="center" width="140"> 
メニュー１０
</Td></Tr>
</Table>

</Td></Tr>
</Table>
</Td></Tr>
</Table>

デスクトップ風

アイコンは[wingdings]を使用しています
「ページＵＲＬ」にはリンク先ＵＲＬを挿入して下さい
「メニュー名」はリンク名などを入れて下さい
(メニュー名が二行になってしまうときは[width="50"]の
数字を増やして横幅を増やして下さい)
「スタート」や「下部メニュー」にもリンクなど指定してみて下さい

メニュータイトル

内容部分

スタート

下部メニュー１

下部メニュー２

下部メニュー３

下部メニュー４

<div style="border:7pt ridge #45457a;">
<Table border="0" width="700" height="580" bgcolor="#0080ff" cellspacing="0">
<Tr><Td align="center" valign="top">


<Table border="0" width="200" height="550" bgcolor="#0080ff" cellspacing="0" align="left">
<Tr><Td align="center">

<!--パソコンアイコン-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">:</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--パソコンアイコンここまで-->

</Td><Td align="center">

<!--テキストアイコン1-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">2</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--テキストアイコン1ここまで-->

</Td></Tr>
<Tr><Td align="center">

<!--フォルダアイコン-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">1</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--フォルダアイコンここまで-->

</Td><Td align="center">

<!--テキストアイコン2-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">2</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--テキストアイコン2ここまで-->


</Td></Tr>
<Tr><Td align="center">



<!--テキストアイコン3-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">2</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--テキストアイコン3ここまで-->

</Td><Td align="center">

<!--テキストアイコン4-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">2</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--テキストアイコン4ここまで-->

</Td></Tr>
<Tr><Td align="center">

<!--テキストアイコン5-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">2</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--テキストアイコン5ここまで-->

</Td><Td align="center">

<!--メールアイコン-->
<table border="0" cellspacing="0" cellpadding="0" width="50" height="10">
<tr><td bgcolor="#0080ff" align=center onmouseover="this.style.background='#bfdfff'" onmouseout="this.style.background='#0080ff'">
<a href="ページＵＲＬ" style="color:#004a95;text-decoration:none;">
<span style="color:orange;weight:medium;font-size:25pt;font-family:wingdings;">+</span>
<Br><font size="1" color="#ffffff" face="ＭＳ ゴシック">
メニュー名</font></a></div>
</td></tr></table>
<!--メールアイコンここまで-->
</Td></Tr>
</Table>


<Table border="1" width="490" height="550" cellspacing="0">
<Tr><Td height="30" bgcolor="#004a95" align="left">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
メニュータイトル</font>
</Td></Tr>
<Tr><Td bgcolor="#ffffff" align="center" valign="top">
内容部分
</Td></Tr>
</Table>


<Br clear="left">
<Table border="1" width="700" height="30" bordercolor="#45607a" cellspacing="0">
<Tr><Td align="center" bgcolor="#009500">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
スタート</font>
</Td><Td align="center" bgcolor="#80bfff">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
下部メニュー１</font>
</Td><Td align="center" bgcolor="#80bfff">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
下部メニュー２</font>
</Td><Td align="center" bgcolor="#80bfff">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
下部メニュー３</font>
</Td><Td align="center" bgcolor="#80bfff">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
下部メニュー４</font>
</Td></Tr>
</Table>

</Td></Tr>
</Table></div>

マジックテーブル１
(四角いマスにカーソルを置いてみて下さい)

メニュー１	メニュー２	メニュー３
メニュー４	WELCOME	メニュー５
メニュー６	メニュー７	メニュー８

[WELCOME]の部分はご自由に言葉を変更して下さい
[メニュー※]の部分は自己紹介、掲示板などメニュー名を入れて下さい
[ページＵＲＬ]には移動するページＵＲＬを入れて下さい

<Table border="1" bordercolor="#0080ff" cellspacing="0" style="border:thick ridge #950095;">
<Tr><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー１</a>
</Td><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー２</a>
</Td><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー３</a>
</Td></Tr>
<Tr><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー４</a>
</Td><Td align="center" bgcolor="#80ff80" valign="middle" width="150" height="150" style="color:#004a95;">
 
WELCOME

</Td><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー５</a>
</Td></Tr>
<Tr><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー６</a>
</Td><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー７</a>
</Td><Td align="center" bgcolor="#004a95" valign="middle" width="150" height="150" onmouseover="this.style.background='#80ffff'" onmouseout="this.style.background='#004a95'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#004a95;">メニュー８</a>
</Td></Tr></Table>

マジックテーブル２
(四角いマスにカーソルを置いてみて下さい)

メニュー１	メニュー２	メニュー３
メニュー４	WELCOME	メニュー５
メニュー６	メニュー７	メニュー８

[WELCOME]の部分はご自由に言葉を変更して下さい
[メニュー※]の部分は自己紹介、掲示板などメニュー名を入れて下さい
[ページＵＲＬ]には移動するページＵＲＬを入れて下さい

<Table border="1" bordercolor="#ff80ff" cellspacing="0" style="border:thick ridge #ff80ff;">
<Tr><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー１</a>
</Td><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー２</a>
</Td><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー３</a>
</Td></Tr>
<Tr><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー４</a>
</Td><Td align="center" bgcolor="#80bfff" valign="middle" width="150" height="150" style="color:#ff0080;"> 

WELCOME

</Td><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー５</a>
</Td></Tr>
<Tr><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー６</a>
</Td><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー７</a>
</Td><Td align="center" bgcolor="#ff0080" valign="middle" width="150" height="150" onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ff0080'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#ff0080;">メニュー８</a>
</Td></Tr></Table>

マジックテーブル３
(四角いマスにカーソルを置いてみて下さい)

メニュー１	メニュー２	メニュー３
メニュー４	WELCOME	メニュー５
メニュー６	メニュー７	メニュー８

[WELCOME]の部分はご自由に言葉を変更して下さい
[メニュー※]の部分は自己紹介、掲示板などメニュー名を入れて下さい
[ページＵＲＬ]には移動するページＵＲＬを入れて下さい

<Table border="1" bordercolor="#d4d4d4" cellspacing="0" style="border:thick ridge #d4d4d4;">
<Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー１</a>
</Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー２</a>
</Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー３</a>
</Td></Tr>
<Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー４</a>
</Td><Td align="center" bgcolor="#ffff80" valign="middle" width="150" height="150" style="color:7f7f7f;"> 

WELCOME

</Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー５</a>
</Td></Tr>
<Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー６</a>
</Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー７</a>
</Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> 
<a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー８</a>
</Td></Tr></Table>

ページトップへ

だれでもかんたんに、ホームページを。
- プチ・ホームページサービス -