ga-05-j5

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
文中から他ページの特定の場所に ジャンプする

文中から他ページの特定の場所にジャンプする方法を説明します。

他ページの飛び先にid名を付けて、リンク元でリンク先のアドレスの後ろに「#id名」を付けます。サンプルコードでは、「#idousaki-01」となっています。サンプルコードの前提は、リンク元もリンク先も同一フォルダーにあることです。

リンク元ファイルは、「link-moto.html」の名前で保存してください。リンク先ファイルは、「link-saki.html」の名前で保存してください。

【リンク元】
HTMLコード(link-moto.html)
<!DOCTYPE html>
<!--====================================
 リンク元ファイル ファイル名:link-moto.html
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <a href="link-saki.html#idousaki-01">
             ここをクリックすると別ファイルの
             link-saki.htmlの特定場所に移動</a>

</body>
</html>
        
【リンク先】
HTMLコード(link-saki.html)
<!DOCTYPE html>
<!--====================================
 リンク先ファイル ファイル名:link-saki.html
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="height: 20em"> </div>

    <p id="idousaki-01">飛び先です(ファイル:link-saki.html)
    </p>

</body>
</html>
        

文中から他ページに
ジャンプする

文中から他ページの
特定の場所に
ジャンプする

文中から外部ページに
ジャンプする

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken