スポンサーリンク
ページ内リンクのHTML5の記述
「タイトルの位置へジャンプする飛ばす」このテキスト部分クリックで「タイトル」部分に飛ぶ着地とする・・・
①アンカー要素(aタグ)のid属性で属性値を指定する(※属性値は任意)
  例: <a id="title">タイトル</a>   属性値 title 
②アンカー要素(aタグ)のhref属性の属性値に①で指定したidを#(半角シャープ)を付けて指定する
  例: <a href="#title">タイトルの位置へジャンプする</a>
記事内の目次を作るには
始めに【目次】
とつけて その後にジャンプボタンをリストアップすればよいのだ\(^_^)/
この記事の【目次】
1 ○○○の理由 (というジャンプボタン)
2 ○○を試した
3 結論
なんて名調子。これを囲んだりすれば、それなりになるぞ~♪ (^_^)v

 

前回の記事で、うまく出来なかったのがシャクだから、検索して見つけたサルカワさんのページ。
         ⇒ 記事の途中に飛ばすには

さっきやったやり方の逆で、
まず、アンカー(目印)をきめて、その後にリンクを決めるのだ。
アンカーとなる「飛び先」を決めてから飛ぶところをきめる。

1. 飛びたい位置のタグにidを指定する

飛びたい!というタグにid名をつけます
例えば、あるh2見出し(これは見出しです)にジャンプしたいなら以下のように書きます。id名 部分は半角英数ならなんでもよい。
<h2 id="id名">これは見出しです。</h2>

この場合、「見出し」なので<h2> </h2>ではさまれている。
「見出し」ではなく、単に
ページ内の好きな位置、特定の文字列の場合は

<a id="id名">文字</a> 
 

HTML5 からは
<a name="title">タイトル</a> は推奨されていない。

2. ジャンプボタンを作る 

*ジャンプボタン!わかりやすい

ジャンプボタンは通常のリンクと同じようにaタグで作りますが、
URLのかわりにhref="#ジャンプ先のid名"
というように書きます。#をつけるのがポイントです。
たとえば「ここをクリック!」という名前のジャンプボタンを作りたければ以下のように書きます。
<a href="#id名">ここをクリック!</a>

 

3 違うページの特定の場所に飛ぶ

違うページの途中にジャンプしたいときは、次のように指定します。
① 飛びたいページの飛びたいタグにidを指定
さきほどと同じで、ジャンプしたい位置にあるタグにid名をつけます。

② ページのURL#id名 をリンク先としたジャンプボタン(aタグ)を作る
同じページの場合は#id名 だけだったが、この前に飛びたいページのURLを加える。
a href="〜"の ~を “飛びたいページのURL#id名" にする。
<a href="https://saruwakakun.com#"id名"></a>

別ウィンドウで開くなら、最後に target="_blank" をくっつける。
<a href="https://saruwakakun.com#"id名“target="_blank"></a>

 

 

スポンサーリンク
おすすめの記事