English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML 基本チュートリアル

HTMLメディア

HTMLリファレンスマニュアル

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML アンchor

HTMLページの内容が長い場合、ユーザーがそのページを閲覧する際に不便になることがあります。例えば、ページの最下部にスクロールした後にトップに戻りたい場合、スクロールバーを顶部にドラッグするか(またはページをリフレッシュするが、この方法の体験は良いものではありません)、効果が良い方法はアンカーを設定してこの問題を解決することです。ページ内またはページ間のジャンプを実現します。

例でアンカーダemonstration

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>基本チュートリアル(oldtoolbag.com),アンカーセット</title></head><body>
     <a href="#bottom" name="top">ボトムにいく</a>
    <div style="height: 5000px; width: 300px; background-color: #123">ここでは、ページのヘッダーとボトムにジャンプする方法を説明します</div>
    <a href="#top" name="bottom">トップに戻る</a></body></html>
テストを見て‹/›

アンカーを設定する方法

(一)、ページ内ジャンプ設定方法一:

  1. アンカーリンクを設定<a href="#miao">ニャン星人を見つける</a>;(注意:href属性の属性値の前に#を付けます)

  2. ページ内の必要な場所にアンカーを設定<a name="miao"></a>;(注意:aタグにname属性を付けます。属性値は[1]内のhrefの属性値と同じで、#を付并ません。タグ中に必要に応じてテキストを入力しますが、通常は内容を書かないことが多いです。

(二)、ページ内ジャンプ設定方法2:

  1. アンカーリンクを設定<a href="#miao">ニャン星人を見つける</a>;(注意:href属性の属性値の前に#を付けます)

  2. アンカーの場所を設定  <h4 id="miao">ニャン星人基地</h4>;移動先の位置のタグにid属性を追加します。属性値は①のhrefの属性値と同じで、#を付并ません。  

    注意:方法二では、アンカーを設定するために特別なaタグを追加する必要はありません。必要な場所のタグにidを追加するだけで良いです。

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>アンカーダemonstration-基本チュートリアルoldtoolbag.com</title>
</head>
<body>
    <ul>
        <li><a href="#miao">ニャン星人を見つける</a></li>
        <li><a href="#wang">ワン星人を見つける</a></li>
        <li><a href="#meng">他の可愛いもの</a></li>
    </ul>
    <a name="miao"></a><!--アンカー設定方法1-->
    <h3 id="miao">ニャン星人基地</h3><!--アンカー設定方法2-->
    <p>ニャンニャン~</p>
    <p>ニャンニャン~</p>
    <p>ニャンニャン~</p>
    <p>ニャンニャン~</p>
    <p>ニャンニャン~</p>
    <p>ニャンニャン~</p>
    
    <a name="wang"></a>
    <p>ワンワン~</p>
    <p>ワンワン~</p>
    <p>ワンワン~</p>
    <p>ワンワン~</p>
    <p>ワンワン~</p>
    <p>ワンワン~</p>
    <a name="meng"></a>
    <p>可愛い可愛い~</p>
    <p>可愛い可愛い~</p>
    <p>可愛い可愛い~</p>
    <p>可愛い可愛い~</p>
    <p>可愛い可愛い~</p>
    <p>可愛い可愛い~</p>
</body>
</html>
テストを見て‹/›