アプリス

お気に入りに追加

アプリス　>　いろんなサンプルコード　>

ホームページ作成テクニック

フリーソフト
 アップローダー
 Let's WinMX
IPチェッカー
 .htaccessパスワード生成
 シークレットアルバム
 リンク抽出
 短縮アドレス
 動画落とし
 暗号文
 楽天アフィリエイト支援ツール

HP・ブログ設置ツールアクセスカウンター
ミニ掲示板
検索窓
お天気窓

SEO対策バックリンクチェック
検索順位チェック
METAタグ生成フォーム

サンプルコードホームページ作成テクニック
HTML基礎タグ
WSH簡単プログラム

四桁の西暦を正しく表示する
画像を高速に表示する
入力チェック付きお問い合わせフォームを作成する
マウスを使用せずキーボードでリンクする
前のページに戻れないリンクを作成する
お気に入りに追加するリンクを作成する
リストからのリンクを作成する1
リストからのリンクを作成する2
文字をズームする
フレームを使わずに画像切り替えをする
インフレームで画像切り替えをする
ツリー型のリンクを作成する
META以外で自動的にページを移動する（タイマー付）
リンクする前に確認を求める
サウンドを再生する～プレイヤーを起動して再生～
サウンドを再生する～ Active X コントロールを使用して再生～
サウンドを再生する～プレイヤーをプラグインして再生～
デジタル時計を表示する
件名・本文を含めたアンケート用のメールリンクを作成する
バナーを固定して表示する
バナーを固定して表示する～リンク付き～

ファイルの作成方法

気に入ったテクニックのコードをコピーして、コードを組み込みたい HTML ファイルを開く。
組み込みたい場所へカーソルを移動。
キーボードの Ctrl を押しながら V を押す。（貼り付け作業）
HTML ファイルを上書き保存。

1．四桁の西暦を正しく表示する

<SCRIPT language="JavaScript">  </SCRIPT>

2．画像を高速に表示する

このページを開いたときに、 <IMG src="画像ファイル" width="1" height="1"> により画像ファイルをキャッシュに格納します。
格納したことにより、 <A href="画像ファイル" target="_blank">写真</A> をクリックしたときに表示される画像は、直接読み込むのではなく、キャッシュから読み込むことになりますので、高速に表示することが可能となります。

写真

<A href="画像ファイル" target="_blank">写真</A><IMG src="画像ファイル" width="1" height="1">

3．入力チェック付きお問い合わせフォームを作成する

***@***.**.** をあなたのメールアドレスに変えてください。

こちら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <SCRIPT language="JavaScript">  </SCRIPT> <STYLE type="text/css">  </STYLE> <TITLE>お問い合わせフォーム</TITLE> </HEAD> <BODY> <FORM action="mailto:***@***.**.**" method="POST" name="frm" onsubmit="return Check();"> <P>お名前：<BR> <INPUT size="24" type="text" name="お名前" style="ime-mode:active"></P> <P>性別：<BR> <INPUT type="radio" name="性別" value="♂" onclick="c1=!c1" style="cursor : hand;">男 <INPUT type="radio" name="性別" value="♀" onclick="c2=!c2" style="cursor : hand;">女</P> <P>年齢：<BR> <SELECT name="年齢" style="color : #aaaaaa;"> <OPTION selected>選択してください</OPTION> <OPTION value="10歳以下">10歳以下</OPTION> <OPTION value="10代">10代</OPTION> <OPTION value="20代">20代</OPTION> <OPTION value="30代">30代</OPTION> <OPTION value="40代">40代</OPTION> <OPTION value="50代">50代</OPTION> <OPTION value="60歳以上">60歳以上</OPTION> </SELECT></P> <P>メールアドレス：<BR> <INPUT size="24" type="text" name="メールアドレス" style="ime-mode:disabled"></P> <P>ご質問のタイトル：<BR> <INPUT size="56" type="text" name="ご質問のタイトル" style="ime-mode:active"></P> <P>ご質問の内容：<BR> <TEXTAREA rows="8" cols="56" name="ご質問の内容" style="ime-mode:active"></TEXTAREA></P> <P><INPUT type="submit" value="送信" style="cursor : hand;"> <INPUT type="reset" value="書き直す" onclick="Clear();" style="cursor : hand;"></P> </FORM> </BODY> </HTML>

4．マウスを使用せずキーボードでリンクする

キーボードの Alt + accesskey + Enter でリンクできます。

i06 = I
Vector = V
Yahoo! JAPAN = Y

<A href="http://www.h3.dion.ne.jp/~i06/" accesskey="i">i06</A> = I<BR> <A href="http://www.vector.co.jp/" accesskey="v">Vector</A> = V<BR> <A href="http://www.yahoo.co.jp/" accesskey="y">Yahoo! JAPAN</A> = Y

5．前のページに戻れないリンクを作成する

Vector

<A href="javascript:onclick = location.replace('http://www.vector.co.jp/')">Vector</A>

6．お気に入りに追加するリンクを作成する

('アドレス','お気に入り名')

i06 をお気に入りに追加

<A href="javascript:window.external.addfavorite('http://www.h3.dion.ne.jp/~i06/','i06')">i06をお気に入りに追加</A>

7．リストからのリンクを作成する1

リストを選択してリンクするタイプです。
<OPTION value="アドレス">リンク名</OPTION>
<OPTION value="アドレス">リンク名</OPTION>
をコピーすることにより、いくつでも作成できます。

<SELECT onchange="location.href = this.options[this.selectedIndex].value"> <OPTION selected>選択してください。</OPTION> <OPTION value="http://www.h3.dion.ne.jp/~i06/">i06</OPTION> <OPTION value="http://www.vector.co.jp/">Vector</OPTION> <OPTION value="http://www.yahoo.co.jp/">Yahoo! JAPAN</OPTION> </SELECT>

8．リストからのリンクを作成する2

リストを選択し、GO!をクリックしてリンクするタイプです。
<OPTION value="アドレス">リンク名</OPTION>
<OPTION value="アドレス">リンク名</OPTION>
をコピーすることにより、いくつでも作成できます。

<FORM name="i068a"><SELECT name="i068b"> <OPTION selected>選択してください。</OPTION> <OPTION value="http://www.h3.dion.ne.jp/~i06/">i06</OPTION> <OPTION value="http://www.vector.co.jp/">Vector</OPTION> <OPTION value="http://www.yahoo.co.jp/">Yahoo! JAPAN</OPTION> </SELECT><INPUT type="button" onclick="location.href = document.i068a.i068b.options[document.i068a.i068b.selectedIndex].value" value="開く"></FORM>

9．文字をズームする

Wellcome to i06 の文字をズームさせたい文字に変えてください。
top : ズーム文字の上位置px
left : ズーム文字の左位置px

ズーム
Wellcome to i06

<SCRIPT language="JavaScript">  </SCRIPT><A href="javascript:onclick = zoom();">ズーム</A> <DIV style="top : 8px;left : 80px;position : absolute;z-index : 1;visibility : visible;" id="i06">Wellcome to i06</DIV>

10．フレームを使わずに画像切り替えをする

<IMG src="画像ファイルのパス" alt="マウスカーソルを当てたときに表示される文字">

こちら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>フレームを使わずに画像切り替えをする</TITLE> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY onload="img1();"> <P><BR> </P> <P><BR> </P> <P align="center"><IMG src="画像ファイル1" name="imgfile1" style="display: none;" alt="イメージ1"> <IMG src="画像ファイル2" name="imgfile2" style="display: none;" alt="イメージ2"> <IMG src="画像ファイル3" name="imgfile3" style="display: none;" alt="イメージ3"> <IMG src="画像ファイル4" name="imgfile4" style="display: none;" alt="イメージ4"> <IMG src="画像ファイル5" name="imgfile5" style="display: none;" alt="イメージ5"> <IMG src="画像ファイル6" name="imgfile6" style="display: none;" alt="イメージ6"> <IMG src="画像ファイル7" name="imgfile7" style="display: none;" alt="イメージ7"> <IMG src="画像ファイル8" name="imgfile8" style="display: none;" alt="イメージ8"> <IMG src="画像ファイル9" name="imgfile9" style="display: none;" alt="イメージ9"></P> <P><BR> </P> <P><BR> </P> <P><A href="javascript:imgnone(),img1();">イメージ1</A><BR> <A href="javascript:imgnone(),img2();">イメージ2</A><BR> <A href="javascript:imgnone(),img3();">イメージ3</A><BR> <A href="javascript:imgnone(),img4();">イメージ4</A><BR> <A href="javascript:imgnone(),img5();">イメージ5</A><BR> <A href="javascript:imgnone(),img6();">イメージ6</A><BR> <A href="javascript:imgnone(),img7();">イメージ7</A><BR> <A href="javascript:imgnone(),img8();">イメージ8</A><BR> <A href="javascript:imgnone(),img9();">イメージ9</A></P> </BODY> </HTML>

11．インフレームで画像切り替えをする

<A href="画像ファイルのパス"

こちら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>インフレームで画像切り替えをする</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <P><BR> </P> <P><BR> </P> <CENTER><IFRAME src="画像ファイル1" width="120" height="120" frameborder="0" scrolling="NO" name="img"></IFRAME></CENTER> <P><BR> </P> <P><BR> </P> <P><A href="画像ファイル1" target="img">イメージ1</A><BR> <A href="画像ファイル2" target="img">イメージ2</A><BR> <A href="画像ファイル3" target="img">イメージ3</A><BR> <A href="画像ファイル4" target="img">イメージ4</A><BR> <A href="画像ファイル5" target="img">イメージ5</A><BR> <A href="画像ファイル6" target="img">イメージ6</A><BR> <A href="画像ファイル7" target="img">イメージ7</A><BR> <A href="画像ファイル8" target="img">イメージ8</A><BR> <A href="画像ファイル9" target="img">イメージ9</A></P> </BODY> </HTML>

12．ツリー型のリンクを作成する

下記のようにAの下にBを配置して、A1やB1などのIDがダブらなければ、いくつでも作成できます。

<SPAN onclick="document.all.A1
<DIV ID="A1"
- <SPAN onclick="document.all.B1
  <DIV ID="B1"

こちら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>ツリー型のリンクを作成する</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <UL> <LI><SPAN onclick="document.all.A1.style.display = (document.all.A1.style.display == 'none')?'':'none'">ツリーメニュー A1</SPAN> <DIV id="A1" style="display:none"> <UL> <LI><SPAN onclick="document.all.B1.style.display = (document.all.B1.style.display == 'none')?'':'none'">ツリーメニュー B1</SPAN> <DIV id="B1" style="display:none"> <UL> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> </UL> </DIV> <LI><SPAN onclick="document.all.B2.style.display = (document.all.B2.style.display == 'none')?'':'none'">ツリーメニュー B2</SPAN> <DIV id="B2" style="display:none"> <UL> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> </UL> </DIV> <LI><SPAN onclick="document.all.B3.style.display = (document.all.B3.style.display == 'none')?'':'none'">ツリーメニュー B3</SPAN> <DIV id="B3" style="display:none"> <UL> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> </UL> </DIV> </UL> </DIV> </UL> <UL> <LI><SPAN onclick="document.all.A2.style.display = (document.all.A2.style.display == 'none')?'':'none'">ツリーメニュー A2</SPAN> <DIV id="A2" style="display:none"> <UL> <LI><SPAN onclick="document.all.B4.style.display = (document.all.B4.style.display == 'none')?'':'none'">ツリーメニュー B4</SPAN> <DIV id="B4" style="display:none"> <UL> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> </UL> </DIV> <LI><SPAN onclick="document.all.B5.style.display = (document.all.B5.style.display == 'none')?'':'none'">ツリーメニュー B5</SPAN> <DIV id="B5" style="display:none"> <UL> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> </UL> </DIV> <LI><SPAN onclick="document.all.B6.style.display = (document.all.B6.style.display == 'none')?'':'none'">ツリーメニュー B6</SPAN> <DIV id="B6" style="display:none"> <UL> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> <LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> </UL> </DIV> </UL> </DIV> </UL> </BODY> </HTML>

13．META以外で自動的にページを移動する（タイマー付）

location.href = 'リンク先のアドレス'
タイマーはミリ秒で入力してください。
タイマーなしの場合 setTimeout('i06();', 0) 、もし、タイマーが5秒でしたら setTimeout('i06();', 5000) となります。

<SCRIPT language="JavaScript">  </SCRIPT>

14．リンクする前に確認を求める

location.href = 'リンクするファイル名'

フリーソフト

<SCRIPT language="JavaScript">  </SCRIPT><A href="javascript:check();">フリーソフト</A>

15．サウンドを再生する～プレイヤーを起動して再生～

href="サウンドファイル名"

サンプルを再生

<A href="sample.mid">サンプルを再生</A>

16．サウンドを再生する～ Active X コントロールを使用して再生～

value="サウンドファイル名"

こちら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サウンドを再生する～ Active X コントロールを使用して再生～</TITLE> <OBJECT id="sample" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"> <PARAM name="FileName" value="sample.mid"> </OBJECT> </HEAD> <BODY> <P><A href="javascript:sample.run()">サンプルを再生</A></P> </BODY> </HTML>

17．サウンドを再生する～プレイヤーをプラグインして再生～

src="サウンドファイル名"

<EMBED src="sample.mid" type="audio/mid">

18．デジタル時計を表示する

setTimeout('clock();', 100) は、秒が切り替わるタイマーです。
タイマーはミリ秒で入力してください。
また、ページプレビュー時に動作させるためには、 BODY タグに <BODY onload="clock();"> と入力する必要があります。

<SCRIPT language="JavaScript">  </SCRIPT> <FORM name="i061"><INPUT size="20" type="text" name="i062"></FORM>

19．件名・本文を含めたアンケート用のメールリンクを作成する

メールリンクに件名を含めるには Subject= を記述して、そのあとに件名を入力してください。
本文を含めるには Body= を記述して、そのあとに本文を入力してください。
%0D%0A は改行コードです。

アンケート

<A href="mailto:***@***.**.**?Subject=ホームページについてのアンケート&Body= ◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇%0D%0A ホームページについてのアンケート%0D%0A ◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇%0D%0A %0D%0A %0D%0A %0D%0A 当てはまる項目以外を削除してください。%0D%0A ( )がある場合は ( )内に入力してください。%0D%0A %0D%0A ■どこでお知りになりましたか？%0D%0A □検索エンジン%0D%0A □新聞・雑誌記事%0D%0A □友人・知人%0D%0A □他のホームページからのリンク%0D%0A □その他 ( )%0D%0A %0D%0A ■どのくらいの頻度でご覧になりますか？%0D%0A □初めて%0D%0A □毎日%0D%0A □週に2～3回%0D%0A □週に1回程度%0D%0A □月に2～3回%0D%0A □月1回程度%0D%0A □ほとんど見ない%0D%0A □その他 ( )%0D%0A %0D%0A ■よくご覧になる場所はどこですか？%0D%0A □自宅%0D%0A □学校%0D%0A □職場%0D%0A □ネットカフェ%0D%0A □その他 ( )%0D%0A %0D%0A ■接続回線は何をご利用ですか？%0D%0A □電話回線%0D%0A □ISDN%0D%0A □ADSL%0D%0A □FTTH%0D%0A □CATV%0D%0A □携帯電話%0D%0A □PHS%0D%0A □その他 ( )%0D%0A %0D%0A ■ご覧になる主な目的は何ですか？%0D%0A %0D%0A %0D%0A ■もっと充実した方がいいと思われるコンテンツは何ですか？%0D%0A %0D%0A %0D%0A ■ご感想、ご要望などをお聞かせください。%0D%0A %0D%0A %0D%0A ■お客さまご自身についてお聞かせください。%0D%0A □年齢 ( )%0D%0A □性別 ( ) ">アンケート</A>

20．バナーを固定して表示する

url（バナーのパス）

bottom right は表示位置です。
下記を参考に変更してください。

左上	top left
上	top center
右上	top right
左	center left
中央	center
右	center right
左下	bottom left
下	bottom center
右下	bottom right

<SCRIPT language="JavaScript">  </SCRIPT>

21．バナーを固定して表示する～リンク付き～

10行目の200はバナーの幅、11行目の40はバナーの高さを指定してください。
バナーのタグは、 <A href="リンク先" target="_blank"><IMG src="画像のアドレス" border="0" alt="マウスポイント時のポップアップテキスト"></A> のようにしてください。

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>バナーなどを固定して表示する～リンク付き～</TITLE> </HEAD> <BODY onload="move45();"><SCRIPT language="JavaScript"> function move45() { document.all['i0645'].style.left = document.body.scrollLeft + document.body.clientWidth - 200; document.all['i0645'].style.top = document.body.scrollTop + document.body.clientHeight - 40; setTimeout('move45();', 1); } </SCRIPT> <DIV style="position : absolute;" id="i0645"><A href="http://www.applis.org/" target="_blank"><IMG src="http://www.applis.org/banner.gif" border="0" alt="i06"></A></DIV> </BODY> </HTML>

sponsor's link

新着情報　　ツール一覧　　デスクトップテーマ　　リンク　　管理者　　ヘルプ　　お問い合わせ　　サイトマップ

©applis

アプリス/フリーソフト/アップローダー/1cc.jp/i06/piafis/トイプードルの飼い方/ダイエット食品/サンゲツ/リリカラ