タグ素材応用５(メニュー作成編)(準備中)/HTMLタグ素材集

<Table border="1" width="160" height="475" bordercolor="#ff80c0" bgcolor="#ffd5ea" cellspacing="0" cellpadding="0">
<Tr><Td align="center">

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー１</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー２</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー３</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー４</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー５</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー６</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー７</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー８</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー９</a>
</td></tr></table>

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

<table border="0" cellspacing="0" cellpadding="2" width="140" height="20" style="border:thin dotted #959500;">
<tr><td bordercolor="#45607a" bgcolor="#ffffff" align=center onmouseover="this.style.background='#ffff80'" onmouseout="this.style.background='#ffffff'">
<a href="ページＵＲＬ" style="color:#959500;text-decoration:none;font-size:15px;width:100%;">
メニュー10</a>
</td></tr></table>
</Td></Tr>
</Table>

メニューその２
(フィールドメニュー縦３＋かわいいボタン)

?このフィールドメニュー縦３タグの[メニュー１～10]の文字を
↓

メニュータイトル

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

?かわいいボタンのタグに入れ替えて[メニュータイトル]を変更
[ ボタン効果一覧]から[リンクを開く]のタグを[ボタン効果]の文字と入れ替える
[ボタンの文字]を各メニュー名にしてＵＲＬを変更する。
↓

?こんなメニューが簡単にできます。
(リンク先はすべてこのページにリンクしています)
※メニューをページ左に寄せずに縦に並べたいときは
[fieldset align="left"]の太字部分を削除して下さい。 ↓

こぴこぴメニュー

上記メニューのタグはこちらです
(コピペして使ってもＯＫです)

<fieldset align="left" style="width:150;border-color:#009500;">
<legend align="center" style="font-size:20;font-family:ふみゴシック;color:#009500;">こぴこぴメニュー</legend>
<div align="left">
<Ul style="font-size:16;font-family:ふみゴシック;color:#009500;line-height:2;">
<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー１" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー２" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー３" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー４" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー５" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー６" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー７" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー８" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー９" onClick="location.href='ページＵＲＬ'">

<Li><input style="width:100px;height:20px;font-size:14;background-color:limegreen;font-family:富士ポップ;
color:lemonchiffon;border-style:solid;border-color:lemonchiffon;border-width:2;"type="button" 
value="メニュー10" onClick="location.href='ページＵＲＬ'">

</Ul></div>
</fieldset>

テーブルメニュー、フィールドメニュー、目次風テーブル
などを使い工夫すれば簡単にメニューが作れます。

先に土台となるこれらメニュー枠をコピペして
それから各「メニュー」の文字とテーブルボタンなどを
入れ替えると簡単です。

注意点としてはメニューとして使うタグボタンやテーブルボタン
の大きさによって縦幅、横幅が変わる点です。

読み聞かせに最適！「おはなし絵本クラブ」