初心者大歓迎!HTMLを使って一緒にHP作成してみませんか?


超初心者のための超かんたんHP作成講座・サルでもわかる?かんたんHTML

サルでもわかる?かんたんHTML トップページ  >>> #5.リンク  >>> ページのトップへジャンプしよう



      



ページのトップへジャンプしよう



HP作成講座の先生  「さて、今まではクリックすると他のページへジャンプしておったな。
    今回は同じページの他の場所へジャンプするタグを勉強するぞぃ。」



 サンプル




HP作成講座の先生  「ページ下の「トップへ戻る」をクリックしたら
    ページの一番上へ戻ったじゃろう?
    こんなタグを使うぞぃ。」



電球  ページのトップへジャンプするためのタグ
-----------------------------------------------------------------


 <A name="■"> 〜 </A> : この場所に■という名前をつける。

 <A href="#■"> 〜 </A> : 〜をクリックすると■までジャンプする。

                    (■には半角英数字で好きな名前を入れる)

                
-----------------------------------------------------------------



HP作成講座の先生  「HPのページの下の方で「ページのトップへ戻る」というような
    リンクを見たことあるかのぅ?」


HP作成超初心者  「はい、あります!
    縦になが〜いページだと、一番上に戻りたい時に便利ですよね。
    下のタグは最初にやったリンクを貼るタグですか?」


HP作成講座の先生  「うむ。じゃがちと違うぞぃ。
    よく見ると下のタグの■の前に # がついておるぞぃ。
    このタグは2つでセットになっておるんじゃ。」


HP作成超初心者  「ほんとだ。今回■に入るのはURLじゃないんですね。」


HP作成講座の先生  「そうじゃ。自分で好きな名前を入れられるぞぃ。
    これは実際に使ってみた方がわかりやすいのぅ。」



 メモ帳
<BODY>〜</BODY> の間に入力


<A name="top">一寸法師</A>


むか〜しむかしあるところに

おじいさんとおばあさんが住んでいました。

    ↓

    ↓

    ↓

    ↓

   (略)

    ↓

    ↓

    ↓

    ↓

めでたしめでたし。


<A href="#top">トップへ戻る</A>




HP作成講座の先生  「1ページの長さが画面に納まってしまう程度の行数じゃと
    このリンクは意味がないぞぃ。
    画面の横にスクロールバーが出るくらい長いページの場合に使うとよいぞぃ。」



 ブラウザ




HP作成講座の先生  「ちゃんとページのトップに戻れたかのぅ?
    「ページのトップへ戻る」の部分はもちろん画像も使えるぞぃ。
    今回はこれでおしまいじゃ。」






↑ページのTOPへ


リンク画像の枠線を消そう
<<< 前のページへ戻る
別のウインドウで開こう
次のページへ進む >>>


サルでもわかる?かんたんHTML トップページ  >>> #5.リンク  >>> ページのトップへジャンプしよう





Copyright (C) 2006
超初心者のための超かんたんHP作成講座
サルでもわかる?かんたんHTML