ホームページ作成テクニック
ファイルの作成方法
気に入ったテクニックのコードをコピーして、コードを組み込みたいHTMLファイルを開く。
組み込みたい場所へカーソルを移動。
キーボードのCtrlを押しながらVを押す。（貼り付け作業）
HTMLファイルを上書き保存。
このページを開いたときに、
<IMG src="画像ファイル" alt="画像名" width="1"
height="1">
により画像ファイルをキャッシュに格納します。
格納したことにより、
<A href="画像ファイル" target="_blank">写真</A>
をクリックしたときに表示される画像は、直接読み込むのではなく、キャッシュから読み込むことになりますので、高速に表示することが可能となります。
写真
<A href="画像ファイル" target="_blank">写真</A><IMG
src="画像ファイル" alt="写真" width="1" height="1">
 上へ
Vector
<A href="javascript:onclick = location.replace('http://www.vector.co.jp/')">Vector</A>
上へ
window.external.addfavorite('アドレス', '名前')
i06をお気に入りに追加
<A href="javascript:window.external.addfavorite('http://www.h3.dion.ne.jp/~i06/',
'i06')">i06をお気に入りに追加</A>
上へ
リストを選択してリンクするタイプです。
<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.yahoo.co.jp/">Yahoo!</OPTION>
<OPTION value="http://www.google.co.jp/">Google</OPTION>
</SELECT>
上へ
リストを選択し、ボタンをクリックしてリンクするタイプです。
<OPTION value="アドレス">リンク名</OPTION>
<OPTION value="アドレス">リンク名</OPTION>
をコピーすることにより、いくつでも作成できます。
<SELECT name="i06link2">
<OPTION selected>選択してください。</OPTION>
<OPTION value="http://www.h3.dion.ne.jp/~i06/">i06</OPTION>
<OPTION value="http://www.yahoo.co.jp/">Yahoo!</OPTION>
<OPTION value="http://www.google.co.jp/">Google</OPTION>
</SELECT><INPUT type="button" value="開く" onclick="location.href
= document.all.i06link2.options[document.all.i06link2.selectedIndex].value">
上へ
Wellcome to i06の文字をズームさせたい文字に変えてください。
top : ズーム文字の上位置px
left : ズーム文字の左位置px
ズーム
Wellcome to i06
<SCRIPT type="text/javascript">
<!--
size = 0;
function zoom() {
if (size < 80) {
document.all['i06'].style.fontSize = size;
size += 1;
setTimeout('zoom()', 8);
}
}
//-->
</SCRIPT><A href="javascript:zoom()">ズーム</A>
上へ
数はいくつでも増やすことができます。
img1.style.display = 'none';
と
if (i == 1) img1.style.display = 'block';
と
<IMG src="001.gif" alt="イメージ1" name="img1"
style="display : none;">
と
<A href="javascript:image(1)">イメージ7-1</A>
を各位置にコピーして、数字の部分を変更してください。
  
イメージ7-1
イメージ7-2
イメージ7-3
<SCRIPT type="text/javascript">
<!--
function image(i) {
img1.style.display = 'none';
img2.style.display = 'none';
img3.style.display = 'none';
if (i == 1) img1.style.display = 'block';
if (i == 2) img2.style.display = 'block';
if (i == 3) img3.style.display = 'block';
}
-->
</SCRIPT>
<P><IMG src="001.gif" alt="イメージ1" name="img1"
style="display : none;"><IMG src="002.gif" alt="イメージ2"
name="img2" style="display : none;"><IMG src="003.gif"
alt="イメージ3" name="img3" style="display : none;"></P>
<P><A href="javascript:image(1)">イメージ7-1</A><BR>
<A href="javascript:image(2)">イメージ7-2</A><BR>
<A href="javascript:image(3)">イメージ7-3</A></P>
<SCRIPT type="text/javascript">image(1)</SCRIPT>
上へ
数はいくつでも増やすことができます。
<A href="001.gif" target="img">イメージ8-1</A>
をコピーして、ファイル名とリンクの文字を変更してください。
イメージ8-1
イメージ8-2
イメージ8-3
<P><IFRAME src="001.gif" width="86" height="49"
scrolling="NO" name="img" marginwidth="0"
marginheight="0" frameborder="0" title="画像">画像</IFRAME></P>
<P><A href="001.gif" target="img">イメージ8-1</A><BR>
<A href="002.gif" target="img">イメージ8-2</A><BR>
<A href="003.gif" target="img">イメージ8-3</A></P>
上へ
下記のようにAの下にBを配置して、A1やB1などのIDがダブらなければ、いくつでも作成できます。
- <SPAN onclick="document.all.A1
<DIV id="A1"
- <SPAN onclick="document.all.B1
<DIV id="B1"
- ツリーメニュー A1
- ツリーメニュー B1
- ツリーメニュー B2
- ツリーメニュー B3
<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>
<SPAN onclick="document.all.A2.style.display = (document.all.A2.style.display
== 'none')?'':'none'"></SPAN>
</UL>
上へ
location.href = 'リンク先のアドレス'
タイマーはミリ秒で入力してください。
タイマーなしの場合、
setTimeout('i06();', 0)
もし、タイマーが5秒の場合、
setTimeout('i06();', 5000)
となります。
<SCRIPT type="text/javascript">
<!--
function i06() { location.href = 'http://www.vector.co.jp/vpack/browse/person/an022773.html';
}
setTimeout('i06();', 30000);
//-->
</SCRIPT>
上へ
location.href = 'リンクするファイル名'
VBフリーソフト
<SCRIPT type="text/javascript">
<!--
function check() {
if (confirm('フリーソフトのページへ移動します。\n\nよろしいですか？')) location.href = 'http://hp.vector.co.jp/authors/VA022773/';
}
//-->
</SCRIPT><A href="javascript:check()">VBフリーソフト</A>
上へ
setTimeout('clock();', 100)
は、秒が切り替わるタイマーです。
タイマーはミリ秒で入力してください。
<SCRIPT type="text/javascript">
<!--
function clock() {
i = new Date();
document.all.i06clock.value = i.getHours() + ':' + i.getMinutes() + ':'
+ i.getSeconds();
setTimeout('clock()', 100);
}
-->
</SCRIPT><INPUT size="20" type="text" name="i06clock"
value=""><SCRIPT type="text/javascript">clock()</SCRIPT>
上へ
メールリンクに件名を含めるには 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
□週に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
□ISDN%0D%0A
□ADSL%0D%0A
□FTTH [光回線]%0D%0A
□CATV [ケーブル]%0D%0A
□携帯電話%0D%0A
□その他（ ）%0D%0A
%0D%0A
■ご感想、ご要望などをお聞かせください。%0D%0A
%0D%0A
%0D%0A
">アンケート</A>
上へ
url（バナーのパス）
bottom right
は、表示位置です。
左上 = top left
上 = top center
右上 = top right
左 = center left
中央 = center
右 = center right
左下 = bottom left
下 = bottom center
右下 = bottom right
<INPUT type="button" value="バナーを固定して表示" onclick="document.body.style.cssText
= 'background:url(http://www.applis.org/img/banner.gif) no-repeat fixed
bottom right';">
上へ
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 type="text/javascript">
function move45() {
document.all['i0645'].style.left = document.body.scrollLeft + document.body.clientWidth
- 100;
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" alt="i06" width="88"
height="31" style="border-style : none;"></A></DIV>
</BODY>
</HTML>
上へ |
