その他のテクニック(1) - とほほのWWW入門

漢字にルビ(読み仮名)をふるには <ruby> を用います。詳細は <ruby> のマニュアルを参照してください。

HTML

<ruby>
<rb>紫陽花</rb>
<rp>(</rp>
<rt>あじさい</rt>
<rp>)</rp>
</ruby>
が咲いてる。

マウスを乗せた時にツールチップ(吹き出し)を表示するには

要素に title 属性を指定しておくと、その要素の上にマウスを乗せたとき、ツールチップ(吹き出し)が表示されます。title 属性は <div> や <span> に限らず、ほとんどすべてのタグに指定することができます。Internet Explorer 4.0、Netscape 6.0、Opera 6.0 などで対応しています。

HTML

<div title="ほらっ">ここにマウスを乗せてみて</div>

表示

ここにマウスを乗せてみて

キャッシュされないようにするには

ページがキャッシュされないようにするには、<head>～</head> の間に次の3行を追記してください。

HTML

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">

スライドショーを実現するには

画像が表示されていて、[次へ >] ボタンを押すと次の画像が、[< 前へ] ボタンを押すと前の画像が表示されます。Internet Explorer 4.0 以降、Netscape 4.0 以降で動作します。

HTML

<script>
var n = 0;
var m = 0;
var img = new Array();
img[m++] = "image1.gif";
img[m++] = "image2.gif";
img[m++] = "image3.gif";
function prev() {
  if (--n < 0) { n = m - 1; }
  document.images['img1'].src = img[n];
}
function next() {
  if (++n == m) { n = 0; }
  document.images['img1'].src = img[n];
}
</script>

<div><img name="img1" src="image/0.gif" alt=""></div>

<form action="#">
<input type="button" value="&lt; 前へ" onclick="prev()">
<input type="button" value="次へ &gt;" onclick="next()">
</form>

パスワード付きのページをつくるには

文字化けを防ぐには

文字化けを防ぐには、<meta> で文字コードを指定するのが効果的です。<meta> は、<head>～</head> の間、<title> よりも前に記述してください。Shift_JIS の部分には、シフトJIS の場合は Shift_JIS、EUC の場合は euc-jp、JIS の場合は iso-2022-jp を、Unicode(UTF-8)の場合は UTF-8 を指定してください。Windows や Macintosh で作成している文書は通常シフトJIS(Shift_JIS)になります。

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>文字化け防ぎの方法</title>
</head>
<body>
  :
</body>
</html>

右クリックを禁止するには

簡単に実現するには、<body> タグに oncontextmenu を指定します。IE5.0 や Netscape 6.0 以降で有効です。

HTML

<html>
<head>
<title>右クリック禁止</title>
</head>
<body oncontextmenu="return false;">
  :
</body>
</html>

ファイルをダウンロードさせるには

大方のファイルであれば、そのファイルにリンクを張るのみで、ダウンロードさせることができます。

HTML

<a href="oshirase.doc">お知らせ(word文書)</a>

ダウンロードしたファイルをウィンドウ上で表示するか、ファイルに保存するかは、拡張子とブラウザ側の設定に依存します。確実にダウンロード＆ファイル保存させるには、次のような説明を書いておくのがよいでしょう。

HTML

<a href="oshirase.doc">お知らせ(word文書)</a>
ダウンロード＆保存するには、リンクをマウスで右クリック(Macintosh の場合はしばらくクリック)して、[対象をファイルに保存] などのメニューから保存を行ってください。

その他、圧縮ファイルをダウンロードさせるのも効果的です。圧縮ツールでファイルを .zip 形式や .lha 形式に圧縮し、次のようなリンクを張ります。

HTML

<a href="oshirase.zip">お知らせ(word文書：圧縮)</a>

ファイルをアップロードするには

ブラウザからサーバにファイルをアップロードするには、サーバ側に wwwupl2.cgi(CGI)などの設置が必要です。

HTML

<form method="POST"
 enctype="multipart/form-data" action="wwwupl2.cgi">
<div>ファイル１：<input type="file" name="FILE_A"></div>
<div>ファイル２：<input type="file" name="FILE_B"></div>
<div><input type="submit" value="転送"></div>
</form>

表示

適当なファイルを選んで [送信] ボタンを押すと、ファイルの内容がサーバに転送(アップロード)されます。(上記のフォームはサンプルですので実際のアップロードは行いません。)

日本語のファイル名はうまくアップロード出来ないことがあります。利用の際は、不用意にファイルのアップロードを許すとセキュリティホールになりかねません。アップロードされたファイルが CGI、SSI、ASP、PHP、JSP などのサーバサイドスクリプトファイルとして実行されたりしないよう、セキュリティには十分注意してください。