[トップページに戻る]

ホームページ実用小技集

ホームページ作成の実用的なテクニックを集めてみました。スクリプトをコピー＆ペーストしてそのまま使えます。

このページ、３年ほど放置プレイでしたが、ホームページ移転を機にW3CのMarkUp Validation ServiceとCSS 検証サービスでチェックしたところ、エラーが頻発。対応するように修正しました。この２つの検証サービスは非常に有用です。正確なHTMLとCSSを書きたい方は活用をお勧めします。このページの記述はHTML 4.01 Transitionalに基づいています。

DOCTYPE宣言は以下の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

[小技編]

１．リンクの下線を消す（スタイルシート）
２．アクセス時刻表示（JavaScript）
３．ファイル更新日時表示（JavaScript）
４．バックボタンの挿入（JavaScript）
５．トランジション（ダイナミックHTML）
６．左右にマージンを取る（スタイルシート）
７．インデント（スタイルシート）
８．文字をポイントで指定する（スタイルシート）
９．指定ページに自動ジャンプ（METAタグ）
10．フォームに現在時刻表示（JavaScript）
11．文字の背景を変える（スタイルシート）
12．プルダウンリストのリンク（JavaScript）
13．GOボタン付きプルダウンリストのリンク（JavaScript）
14．ステータスバーにリンクの説明表示（JavaScript）
15．枠線のスタイル（スタイルシート）
16．ボタンを飾る（スタイルシート）
17．２つ前に戻るボタン（JavaScript）
18．指定日へのカウントダウン（JavaScript）
19．指定日からのカウントアップ（JavaScript）
20．サイズを指定して別ウィンドウを開く（JavaScript）
21．お気に入りに追加ボタン（JavaScript)
22.リンクのスタイルを部分的に変える（スタイルシート）
23.ホームページに設定ボタン（JavaScript）

[講座編]

全文検索ソフト（Perl版）徹底比較
Namazu（Perl版）設置ノウハウ
Namazu正規版インストール覚え書き
ハイパー日記システムでpnamazuを使おう
スタイルシート基礎講座

以下、徐々に項目を増やしていきます。

１．リンクの下線を消す

これはスタイルシートを使います。スタイルシートの詳しい説明は省きますが、このように
<STYLE TYPE="text/css">〜</STYLE>の間に設定を記述します。設定部分はコメントアウトします。記述の仕方は以下の通りです。ヘッダー部に書いてください。



<STYLE TYPE="text/css">
<!--
a:link { text-decoration:none; color:#ff0000; }
a:visited { text-decoration:none; color:#ff0000; }
a:active { text-decoration:none; color:#0000ff; }
a:hover { text-decoration:underline; color:#0000ff; }
</STYLE>
-->

a:linkはリンク、a:visitedは訪問済みリンク、a:activeはアクティブなリンク、a:hoverはマウスが乗った時に文字のスタイルや色を変える指定です。“text-decoration:none”の部分が下線を消す指定になります。上の記述ではa:hoverでunderlineが指定されていますから、マウスが乗った時に下線が表示されます。このほか、overline（上線）、line-through（取消線）、blink（点滅）を指定できます。なお、ネットスケープ4.xはa:hoverに対応していません。インターネット・エクスプローラーはblinkに対応していません。 colorはredやblueなど色名での指定も可能です。

文字の背景の色を変える場合はbackground-colorを使います。
a:hover{text-decoration:none; background-color:red;}
この指定をすると、マウスが乗った場合に背景の色が変わります。

２．アクセス時刻表示

トップページのタイトル横にある日時表示の記述の仕方です。ご存じJavaScriptを使います。表示させたい部分に書いてください。

date　
<SCRIPT type="text/JavaScript" language="JavaScript">
<!--
youbi = new Array("日","月","火","水","木","金","土","日");
myDate = new Date();
n = myDate.getMonth()+1;
l = myDate.getDate();
h = myDate.getHours();
y = youbi[myDate.getDay()];
m = myDate.getMinutes();
document.write(n+"月"+l+"日" +"("+y+")"+ h + "時" + m + "分");
//-->
</SCRIPT>

<SCRIPT type="text/JavaScript" language="JavaScript">はLanguage属性しか解釈しない古いブラウザを考慮した書き方で、<SCRIPT type="text/JavaScript" >とだけ書いてもけっこうです。“<SCRIPT Language="JavaScript">”とだけ書くのはW3Cが定めた正確なHTML4.01に反しますのでやめた方が良いでしょう。

３．ファイル更新日時表示

ファイルの更新日時を自動で書くJavaScriptです。表示させたい部分に書いてください。

update
<SCRIPT type="text/JavaScript" language="JavaScript">
<!--
update = new Date(document.lastModified)
youbi = new Array("日","月","火","水","木","金","土","日")
theMonth = update.getMonth() + 1
theDate = update.getDate()
theDay = youbi[update.getDay()]
theHours = update.getHours()
theMinutes = update.getMinutes()
theYear = update.getYear()
document.writeln( theMonth + "月" + theDate + "日" +"("+theDay+")"+theHours+"時"+theMinutes+"分")
//-->
</SCRIPT>

“update”と最初に書く代わりに一番最後に“更新”と書いてもいいでしょう。

４．バックボタンの挿入

JavaScriptを使ったバックボタンを簡単に作れます。こんな感じです。

表示したい部分に書いてください。

<FORM action="">
<INPUT TYPE="button" VALUE="BACK" onClick="history.back()">
</FORM>


"BACK"を"戻る"に変えてもいいでしょう。

<FORM action="">
<INPUT TYPE="button" VALUE="戻る" onClick="history.back()">
</FORM>

ボタンがイヤという人には文字列での指定もできます。こんな感じです。

[BACK]

記述の仕方は以下の通りです。

[<A HREF="JavaScript:history.back()">BACK</A>]


５．トランジション

トランジションは画像や文字列の切り替え時やページの移動時にアニメーション効果を設定できるダイナミックHTMLです。IEの独自拡張機能で、NNは対応していません。ここでは設定が簡単なページ移動時のトランジション効果を説明します。

　サンプル

METAタグに記述するだけで、24種類のトランジション効果を設定できます。記述の仕方は以下の通りです。

<META http-equiv="○" content="revealTrans(duration=△,transition=□)">

○の部分には"Page-Enter","Page-Exit","Site-Enter","Site-Exit"のどれかを書きます。順番に「ページに入るとき」「ページを出る時」「サイトに入るとき」「サイトを出る時」の指定です。
　△の部分には切り替えが終わるまでの時間を秒数で指定します。
　□の部分にはトランジション効果の種類を０から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=Horizontal blinds　10=Checkerboard across　11=Checkerboard down　12=Random dissolve　13=Spilt vertical in　14=Spilt vertical out　15=Spilt horizontal　16=Spilt horizontal out　17=Strips left down　18=Strips left up　19=Strips right down　20=Strips right up　21=Random bars horizontal　22=Random bars vertical　23=Random

23を指定すると、ランダムにさまざまなトランジション効果を表示します。それぞれのトランジションがどのような効果なのか、実際に試してみてください。
　サンプルのページは「ページに入るとき」「２秒間」「ランダムなトランジション効果」を設定しています。参考までにここに記述しておきます。

<META http-equiv="Page-Enter" content="revealTrans(duration=2,transition=23)">

６．左右にマージンを取る

ページ全体に文章が広がっていると、読みにくいものです。左右にマージンをとりましょう。これはスタイルシートを使います。以下をヘッダーに書くと、ページ全体に適用されます。

<STYLE TYPE="text/css">
<!--
BODY{margin-left: 7%; margin-right: 7%;}
</STYLE>
-->

スタイルシートはこのように、

セレクタ｛属性：値；｝

の形で指定します。上の記述で言えば、BODYがセレクタ、margin-leftとmargin-rightが属性、7%が値になります。この指定は「ページ全体」で「左」と「右」に「７％」マージンを取るという意味になります。もちろん値は自由に変えられます。ここでは％を使いましたが、文字数（em）やポイント（pt）、ピクセル（px）、ミリ（mm）、センチ（cm）、インチ（in）で指定することもできます。

属性と値はいくつでも指定できますが、その際には上のようにセミコロン（；）でつないでいきます。
　セレクタはあらゆるタグを設定できます。上の例では<BODY>タグでしたが、ある段落だけにマージンを取りたい場合は<P>タグをセレクタとして記述します。

P{margin-left: 7%; margin-right: 7%;}

なお引用タグ<BLOCKQUOTE>〜</BLOCKQUOTE>でもマージンは取れますが、本来的な使い方ではありません。引用タグは引用部分にだけ使いましょう。

参考までに書いておくと、スタイルシートを使えば、引用タグにも左右のマージンの大きさを指定できます。上のBODYセレクタをBLOCKQUOTEに変えて記述するだけです。

７．インデント

スタイルシートを続けます。インデントは文字下げのことです。段落の最初だけ１文字下げる場合は次のようにヘッダーに書きます。

<STYLE TYPE="text/css">
<!--
P{ text-indent: 1em;}
-->
</STYLE>

この指定をすると、<P>タグを使用した部分で１文字分インデントされます。行頭にスペースを入れる必要はありません。

８．文字をポイントで指定する

これもスタイルシートです。<FONT>タグの場合、文字の大きさは７段階ですが、スタイルシートなら自由自在です。例えば、このページは11ポイントで指定しています。６で書いたようにページ全体を指定するときは、<BODY>タグをセレクタにしてこんな風に書きます。

<STYLE TYPE="text/css">
<!--
BODY{font-size: 11pt;}
-->
</STYLE>

これは8ポイント

これは13ポイント

これは16ポイント


これは30ポイント


これは45ポイント


上のように部分的に文字の大きさを変える場合はセレクタに<BODY>の代わりに<P>タグを使います。上の文章も<P>タグでこんな風に書いています。

<P STYLE=" font-size: 8pt;">これは8ポイント</P>

<P STYLE=" font-size: 13pt;">;これは13ポイント</P>

<P STYLE=" font-size: 16pt;">これは16ポイント</P><BR>

<P STYLE=" font-size: 30pt;">これは30ポイント</P><BR>

<P STYLE=" font-size: 45pt;">これは45ポイント</P><BR>

部分的な指定は<P>タグのほか、<DIV>タグ（ブロック系要素）、<SPAN>タグ（インライン系要素）が使えます。例えば、こんな具合です。

ここは10ポイントですが、ここから18ポイントになります。

上の指定はこんな風になっています。

<P><SPAN STYLE=" font-size: 10pt;">ここは10ポイントですが、</SPAN><SPAN STYLE=" font-size: 18pt;">ここから18ポイントになります。</SPAN></P>

文字の大きさの指定はポイント（pt）のほか、ピクセル（px）、ミリ（mm）、センチ（cm）、インチ（in）、%、emなどが使えます。％やemは相対指定になりますから、元になる文字の大きさを指定しておいた方が良いでしょう。
　このページで1.5emは11ポイントの１．５倍の大きさになります。

９．指定ページに自動ジャンプ

スタイルシートが続いたので、ちょっと目先を変えましょう。インターネットで時々見かけるものに、○秒後に指定ページにジャンプするページがあります。ページの移転後、元のページを訪れた人に移転先のURLを教える場合に使われることが多いようです。
　これはMETAタグを使います。次のリンクをクリックしてみてください。

指定ページに自動ジャンプする

無事にこのページに戻ってきましたね。それならば、あなたのブラウザはMETAタグに対応しています。
　ヘッダー部に次のように記述してください。

<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=ここにURLを書く">

CONTENTにジャンプするまでの秒数、URLにジャンプさせたいページのURLを書きます。相対パスでも絶対パスでも構いません。IEとNNは対応していますが、中にはMETAタグに対応していないブラウザもありますから、必ずテキストリンクは書いておきましょう。このMETAタグはチャットなどのCGIプログラムでも使われています。

１０．フォームに現在時刻表示

下記のような現在時刻を表示します。JavaScriptを使用します。

まず、そのページの<BODY>タグに<BODY onLoad="clock()">と記入します。次に下記のスクリプトを表示したい場所に書いてください。

<FORM name="form1" action="">
<INPUT TYPE=TEXT NAME="text1" SIZE=40 ID="text1">
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function clock(){
myDate = new Date();
y = myDate.getFullYear();
t = myDate.getMonth() + 1;
n = myDate.getDate();
h = myDate.getHours();
m = myDate.getMinutes();
s = myDate.getSeconds();
document.form1.text1.value =
y+"年"+t+"月"+n+"日"+ h + "時 " + m + "分 " + s + "秒"
setTimeout("clock()",1000);
}
-->
</SCRIPT></FORM>

年を取得するgetFullYearは西暦を４ケタの値で返します。２ケタで返す従来のgetYearの2000年問題に対応した書き方ですが、IE4.0以下、NN4.0以下には対応していません。

１１．文字の背景を変える

スタイルシートを使うと、特定の文字の背景に色を付けたり、背景画像を変えることができます。ネットスケープは一部対応していません。

背景に色を付ける

上の指定は下の通りです。

<P STYLE="font-size: 15pt; color: white; background-color: red">背景に色を付ける</P>

<P>タグの代わりに<SPAN>タグを使うと、文字の部分だけに色が付きます。こんな具合。

背景に色を付ける

こんな風に指定します。文字は18ポイント、黒にしてあります。

<SPAN STYLE="font-size: 18pt; color: black; background-color: red">背景に色を付ける</SPAN>

画像の場合はこんな具合。文字の色は赤を指定しています。

背景に画像を付ける

指定は次の通りです。

<P STYLE="font-size: 15pt; color: red; background-image: url(../photo/bg1c02.gif)">背景に画像を付ける</P>

青い文字の部分を書き換えてください。urlには画像のURLを指定します。

１２．プルダウンリストのリンク

これはJavaScriptを使用します。サンプルは次の通り。

スクリプトは下記のようになります。

<SCRIPT type="text/javascript" language="JavaScript">
<!--
function GoLink(Nolink)
{
if (Nolink != ""){
window.location = Nolink;}
}
//-->
</SCRIPT>
<form name="form2" action="">
<select name="Link" onChange="GoLink(this.options[this.selectedIndex].value)">
<option selected>ページを選んでください
<option value="../moviecritic/cindex.htm">映画評
<option value="../report/rindex.htm">例会リポート
<option value="http://forum.cinema1987.org/">映画フォーラム
</select>
</form>

青い文字のURLとリンク名を書き換えてください。
<option value="リンク先URL">リンクの名前
の書式でいくつでも増やせます。リンク先は相対パスでも絶対パスでもかまいません。

１３．GOボタン付きプルダウンリストのリンク

上のスクリプトに”GOボタン”を付けてみましょう。こんな具合です。ページを選んだ後、GOボタンをクリックしてください。

スクリプトは以下の通りです。

<SCRIPT type="text/javascript" language="JavaScript">
<!--
function GoLink(Nolink)
{ if (Nolink != ""){
self.location = Nolink;}
}
//-->
</SCRIPT>
<form name="form3" action="">
<select name="Link2">
<option>ページを選んでください
<option value="../data/data2.htm">データベース
<option value="../nyuukai/nyuukai.html">シネマ１９８７について
<option value="http://cinema1987.org/diary/">映画とネットのDIARY
</select>
<INPUT TYPE="BUTTON" value="GO" onClick="GoLink(document.form3.Link2.options[document.form3.Link2.selectedIndex].value)">
</form>

青い文字のURLとリンク名を書き換えてください。

１４．ステータスバーにリンクの説明表示

リンクにマウスを乗せると、ステータスバーに説明を表示します。

データベース

スクリプトは以下の通りです。

<A HREF="data2.htm" onMouseOver="window.status='映画のデータがあります。';return true";onMouseOut="window.status=''">データベース</A>

青い文字の部分を書き換えてください。ステータスバーに文字を流すスクリプトもありますが、個人的にはあれ、嫌いです(^^ゞ。

[BACK][NEXT]

Valid HTML 4.01! Valid CSS!