小技集

33.ボタンでlinkする

<input type="button" value="リンクを開く" onClick="location.href='ページURL'">

34.テキストボックスタグ

(シンプル枠無し) <TEXTAREA ROWS=5 COLS=50 style="border:0;color: 文字の色;background-color:テキストボックスの背景色;" readonly>ここに文章を書いてください</TEXTAREA> テキストボックスタグ (シンプル枠付き) div style="border:thick solid 枠の色;top:30;left:30;width:30;height:30;"> <TEXTAREA ROWS=5 COLS=50 style="border:0;color:文字の色;background-color: テキストボックスの背景色;" readonly>ここに文章を書いてください</TEXTAREA> <div>

35.強烈なパスワード制限

ソ−スを見ても分からない <FORM NAME="ok"> <INPUT TYPE=TEXT NAME="pass"> <INPUT TYPE=BUTTON VALUE="認証" ONCLICK="parent.left.location.href= document.ok.pass.value+'.html';"> </FORM> html … パスワード成功時に表示されるページの拡張子を記入 認証 … ボタンに表示される文字を記入 left … 移動するフレームの名前を記入 サンプルでは、「5876」で移動可能です。 指定したフレームが存在しないときはエラーになります。 パスワードは、同一フォルダ内のそのページの拡張子を除いた名前です。  サンプル:5876.html ⇒ 5876 ソースを見ても、絶対にパスワードがわかりません。

36.テーブルメニュ−リンク

背景色と下線がなしでできる <TABLE HEIGHT=30 BORDER=1 BGCOLOR="#FFFFFF" CELLSPACING=0> <TR> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='index.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">テストページ1</TD> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='2.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">テストページ2</TD> <TD WIDTH=150 ALIGN="center" onClick="window.location.href='3.html'" onmouseover="this.style.backgroundColor='#80FFFF';" onmouseout="this.style.backgroundColor=''" STYLE="cursor:hand;">テストページ3</TD> </TR> </TABLE> index.html … 移動先のアドレスを記入 テストページ1 … リンクの文章を記入 #80FFFF … オンマウス時の色を記入 その他 … テーブルの高さなどを好みに変更

37.ボタンでlinkする

<FORM>タグを使用すると仕様の問題で改行が入ってしまいます。 <TABLE>タグを上手に利用して改行を無くすことができます。 下のタグは改行をなくした時のタグです。 <TABLE><FORM ACTION="index.html"> <TR><TD><INPUT TYPE=SUBMIT VALUE="テストページ"></TD></TR> </FORM></TABLE>

38.テーブルを使った日本地図

<table border="0" cellpadding="3" cellspacing="1"> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center" colspan="4" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'"><br> 北海道<br> <br> </td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center" colspan="4" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">青森</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td align="center"> </td> <td align="center" colspan="2"style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">秋田</td> <td align="center" colspan="2"style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">岩手</td> </tr> <tr> <td align="center" colspan="3" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">沖縄</td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center" rowspan="3" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">石<br> 川</td> <td align="center"> </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">新潟</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">山形</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">宮城</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">山<br> 口</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">島根 </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">鳥取 </td> <td align="center" rowspan="2" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">兵庫 </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">京都 </td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">福<br> 井</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">富<br> 山</td> <td align="center" colspan="3" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">長野</td> <td align="center" colspan="3" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">福島</td> </tr> <tr> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">長<br> 崎</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">佐<br> 賀</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">福<br> 岡</td> <td align="center"> </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">広島 </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">岡山 </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">滋賀</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">群馬</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">栃木</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">茨城</td> <td> </td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">大<br> 阪</td> <td align="center" rowspan="2" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">奈<br> 良</td> <td align="center" colspan="3" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">岐阜</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">山梨</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">埼玉</td> <td> </td> </tr> <tr> <td align="center"> </td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">熊<br> 本</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">大<br> 分</td> <td align="center"> </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">愛媛</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">香川</td> <td align="center"> </td> <td align="center"> </td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">三<br> 重</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">愛<br> 知</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">静<br> 岡</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">神<br> 奈<br> 川</td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">東京</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">千葉</td> <td> </td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">高知 </td> <td align="center" colspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">徳島  </td> <td align="center"> </td> <td align="center"> </td> <td align="center" colspan="3" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">和歌山</td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">鹿<br> 児<br> 島</td> <td align="center" rowspan="2" style=" background:#efefff; border:1px solid #808080;" onmouseover="this.style.backgroundColor='#eefcff';" onmouseout="this.style.backgroundColor='#efefff'">宮<br> 崎</td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td> </td> </tr> </table>

39.おしゃれなリンクボタン

<form> <table border="1" cellpadding="5" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#484848"> <tr> <td bgcolor="#D0F0FF"><input type="button" value="ボタンです" onclick="location.href='URLを記入'" style="background:#FFFFFF;font-size:10pt;color: #484848;border:1 solid #484848;"> </td> </tr> </table> </form>

40.シンプルな日記のテンプレ−ト

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <title>シンプルな日記サンプルページ</title> <STYLE TYPE="text/css"> <!-- body,table{font-size:90%;} table{ color: #000000; background-color: #FFF7FB; border-top: 1px solid #c0c0c0; border-left: 1px solid #c0c0c0; border-right: 1px solid #808080; border-bottom: 1px solid #808080; } --> </style> </head> <body> <table border="0" cellpadding="5" cellspacing="0" width="100%"> <tr> <th><font size="4">71Tipsの日記</font></th> </tr> </table> <p><a href="index.html">ホーム</a> > 71Tipsの日記</p> <table border="0" cellpadding="3" cellspacing="0" width="100%"> <tr> <th align="left">■ 9月30日</th> </tr> </table> <blockquote> <p>今日はこの日記のページのテンプレートを作成しました。<br> 使ってくれる人っているのかな?(汗)</p> <p>明日から71Tipsが、Yahoo-!に掲載される予定です。感謝</p> </blockquote> <table border="0" cellpadding="3" cellspacing="0" width="100%"> <tr> <th align="left">■ 9月29日</th> </tr> </table> <blockquote> <p>コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p> </blockquote> <table border="0" cellpadding="2" cellspacing="1" width="100%"> <tr> <th align="left">■ 9月28日</th> </tr> </table> <blockquote> <p>あいうえおあいうえおあいうえおあいうえおあいうえお あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいう えおあいうえおあいうえおあいうえおあいあいうえお</p> </blockquote> <table border="0" cellpadding="3" cellspacing="0" width="100%"> <tr> <th align="left">■ 9月27日</th> </tr> </table> <blockquote> <p>かきくけこかきくけこかきくけこかきくけこかきくけこかきく くけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけ</p> </blockquote> <hr> <p align="right">By<a href="http://siriasu.s10.xrea.com/71t/">71Tips</a></p> </body> </html>

41.ちょっとしたタグ表

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <title>ちょっとタグ表</title> <STYLE TYPE="text/css"> <!-- A{ text-decoration:none;/*マウスが触れていない状態*/ } A:hover{ text-decoration:underline;color:#ff0000;/*オンマウスの状態*/ } body,table{ font-size:90%;/* ページ全体の文字のサイズ*/ } table{ color: #000000;/* 文字の色*/ background-color: #FFCCCC;/* テーブルの背景色*/ } th{ background-color: #FFF7FB;/* 見出しの色*/ } tr{ background-color: #FFFFFF;/* セルの背景色*/ } --> </style> </head> <body> <div align="center"> <table border="0" cellpadding="2" cellspacing="1"> <tr> <th>ちょっとタグ表</th> </tr> <tr> <td align="center"><a href="index.html">HOME</a></td> </tr> </table> <br> <table border="0" cellpadding="2" cellspacing="1"> <tr> <th>タグ</th> <th>説明</th> </tr> <tr> <td><!-- <font color="#FF0000">コメント</font> --></td> <td>見えない文字</td> </tr> <tr> <td><a href="<font color="#FF0000">URL</font>"><font color="#FF0000">リンク先</font></a></td> <td>リンクする</td> </tr> <tr> <td><b>文字</b></td> <td>文字を太字にする</td> </tr> <tr> <td><big>文字</big></td> <td>文字を一段大きく表示</td> </tr> <tr> <td><br></td> <td>改行</td> </tr> <tr> <td><center>文字や画像</center></td> <td>文字や画像を中央に表示</td> </tr> <tr> <td><div>文字</div></td> <td>段落、前後1行空きなし</td> </tr> <tr> <td><font size="<font color="#FF0000">n</font>">文字</font></td> <td>文字のサイズを変える。n=1〜6</td> </tr> <tr> <td><font color="<font color="#FF0000">color</font>">文字</font></td> <td>文字の色を変える。color=色を指定</td> </tr> <tr> <td><h<font color="#FF0000">1〜6</font>>文字</h<font color="#FF0000">1〜6</font>></td> <td>見出しの大きさを指定。1〜6</td> </tr> <tr> <td><hr></td> <td>水平線を出す</td> </tr> <tr> <td><i>文字</i></td> <td>文字をイタリックで表示</td> </tr> <tr> <td><img src="<font color="#FF0000">○○.gif</font>"></td> <td>画像の挿入</td> </tr> <tr> <td><marquee>文字や画像</marquee></td> <td>文字や画像を動かす</td> </tr> <tr> <td><nobr>文字</nobr></td> <td>改行を禁止する</td> </tr> <tr> <td><p>文字</p></td> <td>段落、前後1行空き</td> </tr> <tr> <td><s>文字</s></td> <td>取り消し線をつける</td> </tr> <tr> <td><small>文字</small></td> <td>文字を一段小さくする</td> </tr> <tr> <td><title>タイトル</title></td> <td>ページタイトル</td> </tr> <tr> <td><u>文字</u></td> <td>文字に下線をつける</td> </tr> </table> <table border="0" cellpadding="2" cellspacing="1" width="100" align="right"> <tr> <td align="center"><font size="1">By </font><a href="http://siriasu.s10.xrea.com/71t/" target="_blank"><font size="1">71Tips</font></a></td> </tr> </table> </div> </body> </html>