ホームページの【小技】を紹介しています。
|
|
|
|
ちょっとした小技 |
立ち上げたメールソフトにタイトルをつける
<a href="mailto:★?Subject=HPからのメール">メールで送信！</a>
★=送信先メールアドレス
（サンプル）
メールで送信！
またCC、BCCを指定する場合(,カンマで区切る事によりそれぞれ複数アドレスの指定が可能です)
<a href="mailto:★?Subject=HPからのメール&cc=???@???.com &bcc=???@???.com">メールで送信！</a>
|
立ち上げたメールソフトにタイトル、本文をつける
<a href="mailto:★?Subject=HPからのメール &body=ここに本文！！">メールで送信！</a>
★=送信先メールアドレス
（サンプル）
メールで送信！
本文を改行する
<a href="mailto:★?Subject=HPからのメール &body=ここに本文！！%0D%0Aここで改行%0D%0Aここで改行">メールで送信！</a>
|
印刷ボタン
<input type="button" value="プリントアウトする！" onclick="window.print()">
（サンプル）
|
文字の点滅
<blink>★</blink>
★=点滅させる文字
（注意）
 ネットスケープだけの機能です。
|
ページ移動時トランジション効果
<meta http-equiv="Page-Enter" content="revealTrans(Duration=★,Transition=☆)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=★,Transition=☆)">
★=切り替え時間(秒)を指定する ☆=トランジション効果の指定（番号で指定）
このタグを使えばページ切り替え時、色々なワイプ効果で切り替わります。
（サンプル）
サンプルは、下記で指定しています。
<meta http-equiv="Page-Enter" content="revealTrans(Duration=3,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=23)">
コチラから
種類は、下記の表です。 |
| 指定できるトランジション効果（※番号で指定） |
| 0 |
Box In |
1 |
Box Out |
2 |
Circle In |
3 |
Circle Out |
| 4 |
Wipe Up |
5 |
Wipe Down |
6 |
Wipe Right |
7 |
Wipe Left |
| 8 |
Vertical Blinds |
9 |
Horizotal Blinds |
10 |
Checkerboard Across |
11 |
Checkerboard Down |
| 12 |
Random Dissolve |
13 |
Split Vertical In |
14 |
Split Vertical Out |
15 |
Split Horizotal In |
| 16 |
Split Horizotal Out |
17 |
Strips Left Down |
18 |
Strips Left Up |
19 |
Strips Right Down |
| 20 |
Strips Right Up |
21 |
Random Bars Horizotal |
22 |
Random Bars Vertical |
23 |
Random |
|
ページ切り替え時にアラートウインドウを出す
<body onUnload="alert('★')">
★=表示させる文字
JavaScriptのonUnloadメソッド（命令）を使ってページ切り替え時にアラートメッセージを出します。
また<body onload="alert('★')">でページ読み込み時にメッセージを出す事も出来ます。
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body bgcolor="#FFFFFF" onUnload="alert('さようなら、また来て下さいね')">
</body>
</html> |
|
テーブルを横に並べて表示させる
テーブルタグ内に新たにテーブルタグを記述すれば横並びのテーブルが作成できます。
横に並べるには最初のテーブルタグ内の>td<～>/td<に新しくテーブルタグを入れます。
■ＨＴＭＬの点検はコチラを利用して下さいね。
|
| 使用例 |
<table>
<tr><td>
<table border="3" bordercolor="red">
<tr><td>①金持ち１</td><td>①金持ち２</td></tr>
<tr><td>①金持ち3</td><td>①金持ち４</td></tr>
</table>
</td>
<td>
<table border="3" bordercolor="yellow">
<tr><td>②金持ち１</td><td>②金持ち2</td></tr>
<tr><td>②金持ち3</td><td>②金持ち4</td></tr>
</table>
</td>
<td>
<table border="3" bordercolor="blue">
<tr><td>③金持ち１</td><td>③金持ち2</td></tr>
<tr><td>③金持ち3</td><td>③金持ち4</td></tr>
</table>
</td></tr>
</table> |
|
表示サンプル
|
文字や画像をスクロール
<marquee>★</marquee>
★=スクロールさせる文字や画像
（サンプル） |
|
|
スクロール方向の指定
<marquee direction="☆">★</marquee>
☆=left(左方向)right(右方向)up(下から上へ)down(上から下へ)
★=スクロールさせる文字や画像
|
スクロール方法の指定
<marquee behavior="☆">★</marquee>
★=スクロールさせる文字や画像
☆=scroll(一定方向のスクロールの繰り返し)
slide(指定した方向に一回だけのスクロール)
alternate(左右交互)
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body bgcolor="#FFFFFF">
<marquee behavior="alternate" bgcolor="yellow" height="25"
width="490">
マーキースクロール
</marquee>
</body>
</html>
|
表示サンプル
|
<marquee behavior="scroll" direction="down" bgcolor="#ffcccc" height="25" width="490">
マーキースクロール
</marquee> |
上から下（サンプル）
|
<marquee behavior="scroll" direction="up" scrollamount="2" width="250" height="70">
？月？日 ？？のページ
<br>？月？日 ？？のページ
<br>？月？日 ？？のページ
<br>？月？日 ？？のページ
</marquee> |
下から上に（サンプル）
|
|
背景画像をスクロールさせず固定表示する
<body background="***.gif" bgproperties="fixed">
（注意）
 だけの機能です。
|
ページを自動的に切り替える
<META HTTP-EQUIV="refresh" CONTENT="★;URL=☆">
★=ページを切り替えるまでの秒数
☆=ジャンプ先のＵＲＬ
ホームページの引っ越しの時に古いホームページに、このタグを使用すれば指定秒後に自動的にジャンプしてくれます。
参考
<body onLoad=setTimeout('location.href="ジャンプ先のURL",5000')>
とすればページが完全に読み込まれてからジャンプさせる事が出来ます。
例では5000=5秒で読み込まれてから5秒後にジャンプします。
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
<META HTTP-EQUIV="refresh" CONTENT="5;URL=http://money.nandenjoho.com/">
</head>
<body bgcolor="#FFFFFF">
ホームページを引っ越しました５秒後に自動的にジャンプします
</body>
</html> |
|
リンク先を小ウィンドで表示
<input type="button" value="サンプル" onClick=window.open("★","☆","toolbar=no,location=no,directories=no,status=yes,
menubar=yes,scrollbars=yes,resizable=yes,width=500,height=350");>
タグを貼り付ける場合、改行せずに一行で記述して下さい。
★=リンク先ＵＲＬ
☆=ウィンド名
toolbar ツールバーの表示、非表示
location ロケーションバーの表示、非表示
directories ディレクトリィバーの表示、非表示
status ステータスバーの表示、非表示
menubar メニューバーの表示、非表示
scrollbars スクロールバーの表示、非表示
resizable ウィンドウサイズの変更、変更不可
width,height 表示されるウィンドウの高さ、幅
|
|
フレームページを作る |
フレームの設定
縦に分割する場合
<frameset cols="★">
<frame src="☆" name="■">
<frame src="☆" name="□">
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>
横に分割の場合
<frameset rows="★">
<frame src="☆" name="■">
<frame src="☆" name="□">
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>
縦、横に分割の場合(３つに分割)<frameset>を入れる。
<frameset cols="★">
<frame src="☆" name="■">
<frameset rows="★">
<frame src="☆" name="■">
<frame src="☆" name="□">
</frameset>
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>
★=分割するサイズの指定（%,*またはピクセル数）
☆=表示するそれぞれのファイル名
■=分割したウィンドゥの任意の名前（例、hidari）
□=同上(例、migi)
ここで作るフレームページはふたつのファイルを同時に表示させる窓枠のようなものです、窓枠に表示させる複数のファイルを
<frame src="☆">で指定します。
|
| 使用例(縦分割の場合) |
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="left.html" name="hidari">
<frame src="right.html" name="migi">
<noframes>
<body>
フレーム未対応ブラウザではご覧になれません
</body>
</noframes>
</frameset>
</html> |
| ブラウザ表示 |
| left.html |
right.html |
（実寸ではありませんので参考としてご覧下さい。）
| 使用例(縦,横3分割の場合) |
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="left.html" name="hidari">
<frameset rows="50%,*">
<frame src="right_up.html" name="migiue">
<frame src="right_down.html" name="migisita">
</frameset>
<noframes>
<body>
フレーム未対応ブラウザではご覧になれません
</body>
</noframes>
</frameset>
</html> |
| ブラウザ表示 |
| left.html |
right.html |
| right_down.html |
（実寸ではありませんので参考としてご覧下さい。）
|
フレーム境界線の設定
<frameset frameborder="★">
★=yesまたは1(境界線を表示)、noまたは0(境界線を非表示)
|
フレーム境界線の太さの設定
<frameset border="★">
<frameset framespacing="★">
★=境界線の太さ(ピクセル数で指定)
|
フレーム境界線に色を付ける
<frameset bordercolor="★">
★=カラーネームまたは＃カラーコードを入れます。コチラを参照して下さいね。
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<frameset cols="30%,*" frameborder="yes" border="2" bordercolor="pink">
<frame src="left.html" name="hidari">
<frame src="right.html" name="migi">
<noframe>
<body bgcolor="#FFFFFF">
フレーム未対応ブラウザではご覧になれません
</body>
</noframe>
</frameset>
</html> |
|
スクロールの有無を指定
<frame scrolling="★">
★=スクロールの有無
yes(スクロールの許可) no(スクロール禁止) auto(内容に応じて自動)
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<frameset cols="30%,*" frameborder="yes" border="2" bordercolor="pink">
<frame src="left.html" name="hidari" scrolling="auto">
<frame src="right.html" name="migi" scrolling="no">
<noframe>
<body bgcolor="#FFFFFF">
フレーム未対応ブラウザではご覧になれません
</body>
</noframe>
</frameset>
</html> |
|
フレームサイズの変更を禁止する
<frame noresize;>
フレームの境界線はマウスでドラッグすると移動してフレームサイズが変更できますが、このタグを使うとサイズの変更は出来なくなります。
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<frameset cols="30%,*" frameborder="yes" border="2" bordercolor="pink">
<frame src="left.html" name="hidari" scrolling="auto" noresize>
<frame src="right.html" name="migi" scrolling="no" noresize>
<noframe>
<body bgcolor="#FFFFFF">
フレーム未対応ブラウザではご覧になれません
</body>
</noframe>
</frameset>
</html> |
|
同一ページ内でもう一つのページを表示
<iframe src="★"></iframe>
★=表示させるページのファイル名またはURLを入れます。
インラインフレームは複数のページを分割ウィンドウで表示させるのではなく同じページ内に違うページを読み込みます
（注意）のみ対応です。 |
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body bgcolor="#FFFFFF">
<iframe src="★" name="mannaka" width="450" height="120" marginheight="20" marginwidth="20" scrolling="yes">
</iframe>
</body>
</html> |
|
|
フォーム
|
フォームの送信先や送信形式の設定
<form action="★" method="☆">～</form>
★=フォームデータの送信先（mailto:メールアドレス)または(ＣＧＩのＵＲＬ）
☆=送信形式の設定(post,get)postを使うのが一般的です。
送信されるデータはエンコード（変換）されている為そのままでは読めません
CGIを使わずにデータを受け取る場合は
<form action="★" method="☆" enctype="text/plain">～</form>
のようにenctype="text/plain"というオプションを付け加えるとデータは変換されずに送信されます。
★=mailto:メールアドレス
|
一行テキスト入力欄を作る
<input type="text" name="★" value="☆" size="■" maxlength="□">
★=入力フィールド名（質問の項目）
☆=入力欄に初めから表示されている文字
■=入力欄のサイズ(半角の文字数)
□=最大入力文字数(半角文字数)50と指定すると全角だと２５文字になります。
|
| 使用例(mail送信の場合) |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body bgcolor="#FFFFFF">
<form action="mailto:あなたのメールアドレス" method="post" enctype="text/plain">
<p>お名前：
<input type="text" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス：
<input type="text" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" name="urll" value="ホームページ" size="40"><br>
</p>
</form>
</body>
</html> |
|
複数行テキスト入力欄を作る
<textarea rows="★" cols="☆" wrap="■">□</textarea>
★=行数
☆=横幅（半角文字表示数）
□=入力欄の初期値
■=改行コード
off(改行コードなし)
soft(実際に改行されている部分だけ送信)
hard(実際に改行されている部分と自動改行された部分の両方を送信)
|
<textarea rows="★" cols="★" readonly>
readonlyを指定すれば、テキスト入力欄が読み取り専用となります。
|
ドロップダウンメニューを作る
<select name="★"><option value="☆">■</option></select>
★=識別名
☆=送信される内容
■=ページに表示される文字
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body>
<form action="mailto:あなたのメールアドレス" method="post">
<p>お名前：
<input type="text" name="name" value="お名前をどうぞ" size="30"><br>
メールアドレス：
<input type="text" name="mail" value="メールアドレス" size="30"><br>
URL:
<input type="text" name="urll" value="ホームページ" size="40"><br>
</p>
<select name="adres">
<option value="関東" selected>関東</option>
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="東海">東海</option>
<option value="関西">関西</option>
<option value="中国、四国">中国、四国</option>
<option value="九州、沖縄">九州、沖縄</option>
</select></form>
</body>
</html> |
表示サンプル
|
|
メニュー中に小見出しを付ける
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body>
<form>
<select name="adr">
<optgroup label="東日本">
<option value="東京">東京</option>
<option value="神奈川">神奈川</option>
<option value="埼玉">埼玉</option>
</optgroup>
<optgroup label="西日本">
<option value="大阪">大阪</option>
<option>兵庫</option>
<option>京都</option>
</optgroup>
</select></form>
</body>
</html> |
表示サンプル
|
|
チェックボックス欄の作成
<input type="checkbox" name="★" value="☆">
★=識別名
☆=送信される内容
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body>
<form>
<input type="checkbox" name="sex" value="おとこ" checked>♂
<input type="checkbox" name="sex" value="おんな">♀
</form>
</body>
</html> |
表示サンプル
|
|
ラジオボタンの作成
<input type="radio" name="★" value="☆">
複数の選択項目の中からひとつを選んでもらう場合使用します。
★=識別名
☆=送信される内容
|
|
ファイル参照ボタンの作成
<input type="file" name="★" >
★=識別名
（サンプル）
|
パスワード入力欄を作る
<input type="password" name="★" value="☆" size="●" maxlength="■">
★=識別名
☆=入力欄の初期状態での表示文字
●=入力欄の横幅
■=最大入力文字数（半角文字数）
（サンプル）
|
送信ボタンの作成
<input type="submit" value="送信する">
<input type="img" src="☆">
☆=画像ＵＲＬとすれば、画像のボタンが指定できます。
|
リセットボタンの作成
<input type="reset" value="リセットする">
入力した内容や選択した項目を全てリセットできます。
|
ボタンに画像
<input type="image" src="★">
★=画像ファイル名
|
フォームボタン群にタイトルを表示する
<fieldset><legend>★</legend></fieldset>
★=タイトル
グループ化したい部分を<fieldset>～</fieldset>ではさんで下さい。
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body>
<form>
<fieldset>
<legend>性別記入欄</legend>
<input type="radio" name="性別" value="おとこ">男性
<input type="radio" name="性別" value="おんな" checked>女性
</fieldset>
</form>
</body>
</html> |
表示サンプル
|
|
|
アクセント |
カーソルが重なると文字背景色を変える
<a href="★" onMouseOver="this.style.backgroundColor='red'"
onMouseOut="this.style.backgroundColor='Yellow'">～</a>
★=リンク先URLまたはファイル名
（サンプル）
お小遣い稼いでお金持ち
|
カーソルが重なると文字をポップアップ表示
<a href="★" onMouseOver="msg.innerHTML='☆'"onMouseOut="msg.innerHTML=''">～</a>
<span ID="msg"></div>
（注意）
だけの機能です。 |
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body bgcolor="#FFFFFF">
<a href="***.html" onMouseOver="msg.innerHTML='更新日時×××××'"
onMouseOut="msg.innerHTML=''">～</a>
<span ID="msg" style="background-color: #8470ff; font-size: 10pt"></span>
</body>
</html> |
表示サンプル
～
|
|
マウスが重なるとヘルプを表示する
<タグ名 title="★">
<img>タグのALTを使用するのと同じようにチップヘルプを表示させる事が出来ます。
★=表示させるヘルプ文字列
（サンプル）
ここにカーソルを乗せるとチップヘルプが表示されます。
|
カーソルが重なると画像のサイズを変更する
onMouseover="document.img.width=50;document.img.height=80;"
onMouseout="document.img.width=30;document.img.height=15;"
（サンプル）
|
| 使用例 |
<html>
<head>
<title>お小遣い稼いでお金持ち</title>
</head>
<body bgcolor="#FFFFFF">
<a href="***.html" onMouseover="document.img.width=50;document.img.height=15;"
onMouseout="document.img.width=30;document.img.height=15;">
<img src=***.gif name="img" width="30" height="15"></a>
</body>
</html> |
|
フォーム項目背景色をonMouseoverで変化させる
onMouseover="this.style.backgroundColor='★1'"
onMouseout="this.style.backgroundColor='★2'"
★1=マウスカーソルが重なったときの色カラーコード又はカラーネームで指定（コチラから参照して下さいね。）
★2=カーソルが離れた時の色カラーコード又はカラーネームで指定（コチラから参照して下さいね。）
（サンプル）
|
複数行テキスト入力欄を作る
onMouseover="this.style.borderColor='★1'"
onMouseout="this.style.borderColor='★2'"
★1=マウスカーソルが重なったときの色カラーコード又はカラーネームで指定
★2=カーソルが離れた時の色カラーコード又はカラーネームで指定
（サンプル）
|
