その他のテクニック(1)

トップ > 逆引きリファレンス > その他のテクニック(1)

漢字にルビ(読み仮名)をふるには

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

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

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

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

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

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

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

<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 以降で動作します。

<script type="text/javascript">
<!--
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>
<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>
<head>
<title>右クリック禁止</title>
</head>
<body oncontextmenu="return false;">
  :
</body>
</html>

Netscape Communicator 4.0 にも対応させるには、次のような JavaScript を <head>~</head> の間に記述してください。

<script type="text/javascript">
<!--
function mdown(e) {
  if (navigator.appName == "Microsoft Internet Explorer") {
    if (event.button & 2) {
      alert("右クリックは使用できません");
      return(false);
    }
  } else if (navigator.appName == "Netscape") {
    if (e.which == 3) {
      alert("右クリックは使用できません");
      return(false);
    }
  }
}
if (document.all) {
  document.onmousedown = mdown;
}
if (document.layers) {
  window.onmousedown = mdown;
  window.captureEvents(Event.MOUSEDOWN);
}
// -->
</script>

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

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

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

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

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

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

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

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

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

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

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

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


Copyright (C) 2003 杜甫々
初版: 2003年10月12日、最終更新:2003年10月15日
http://www.tohoho-web.com/how2/tec1.htm