## その他のテクニック(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>

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

簡単に実現するには、oncontentmenu を用います。IE5.0 や Netscape 6.0 以降で有効です。

    <html>
    <head>
    <title>右クリック禁止</title>
    </head>
    <body oncontentmenu="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>ファイル１：<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 などのサーバサイドスクリプトファイルとして実行されたりしないよう、セキュリティには十分注意してください。

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