忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2018 . 08
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    携帯ボタンでジャンプするハイパーリンク



    このエントリーをはてなブックマークに追加
     携帯用のHPはコンテンツが多くなるとそれだけ縦の幅が長くなって、一番下までスクロールするのにすごく時間がかかってしまうようになります。
    そこで携帯電話の①や②ボタンを押すだけでページ内の指定した場所にジャンプできるリンクを紹介したいと思います。

    使う技術はそれほど難しくはなく、HTMLだけでできます。

    まずは移動させたい場所に以下のタグを書き込みます。

    <a name="ue" id="ue"></a>

    name="リンクの名前を入力"
    (ここではueとします。)


    id="nameと同じ名前を入力"
    (xhtmlなので一応idも付けましたがnameだけでも動きます。)


    次に<body>内のどこでもいいのでボタンの設定を書きます。

    <a href="#ue" accesskey="1"></a>

    これで携帯電話の①ボタンを押した時に"ue"にジャンプする事になります。


    例)

    <html>
    <head>
    <title>携帯ボタンリンク</title>
    </head>
    <body>
    <!--ここの所はどこに書いてもいいです。-->
    <a href="#①ボタン" accesskey="1"></a>
    <a href="#②ボタン" accesskey="2"></a>
    <a href="#③ボタン" accesskey="3"></a>
    <a href="#④ボタン" accesskey="4"></a>

    <h1>ボタンリンクページ</h1>
    <table>
    <tr><td height="800">
    <h2><a name="①ボタン" id="①ボタン">あ行</a></h3>
    あ<br />い<br />う<br />え<br />お<br />
    <td/></tr>
    <tr><td height="800">
    <h2><a name="②ボタン" id="②ボタン">か行</a></h2>
    か<br />き<br />く<br />け<br />こ<br />
    </td></tr>
    <tr><td height="800">
    <h2><a name="③ボタン" id="③ボタン">さ行</a></h2>
    さ<br />き<br />す<br />せ<br />そ<br />
    </td></tr>
    <tr><td height="800">
    <h2><a name="④ボタン" id="④ボタン">た行</a></h2>
    た<br />ち<br />つ<br />て<br />と<br />
    </td></tr></table>
    </body>
    </html>


    ・サンプルファイル-botan.html
    PR




    ■ この記事にコメントする
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード
    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    ■ コメント一覧
    ■ この記事のトラックバック
    この記事にトラックバックする:
    RSSを読み込んでhtmlで自動表示するスクリプト HOME Movable Type 4.2 トップページの編集方法
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]