【HTMLでページ内リンク（ジャンプ）をスクロールする方法】

レポート · Oct 07, 2020

以前のdreamweaverでは　このやり方として<a name=**

を使用してずっと使っていましたが。2019あたりからこのやり方がdreamweaverでfollowされなくなりました.

html5では　div と　id をつかってやるようなのですが、このやり方を具体的に教えてください

前に使用していた方法を現在削除してわからなくなりました。

よろしくお願いいたします。特にid をどこに指定するのか等々

レポート · Oct 08, 2020

Emikioさん、こんにちは。r360studio 森和恵です。

Dreamweaverのメニュー操作では完了しないので、HTMLコードを入力する方法の解説となります。

ステップは次の2つです。

1）リンク先指定

リンク先の要素に id属性を用いてアンカーを指定。
要素（タグ）は、どれを用いてもOKですが、一般的にブロックレベル要素を使うことが多いです。p要素を例にサンプルコードを示します。

例）p要素をアンカーを指定
<p id="pagebottom">リンク先</p>
※アンカー名”pagebottom”は、任意で名付けてください

2）リンク元指定
#（ハッシュ記号）とアンカー名で、同ページにあるアンカーへリンクします。
別のHTMLからリンクする場合は、「リンクパス#アンカー名」とすればOKです。

例）同ページ
<a href="#pagebottom">ここをクリックするとジャンプ</a>

例）別ページ test.html から
<a href="test.html#pagebottom">ここをクリックするとジャンプ</a>

くわしい解説を、以前放送した授業で視聴できますので、よかったら下記も参考にしてみてください。

YouTubeライブ授業『a要素（aタグ）の徹底解説：ページ内リンク』
https://youtu.be/QMG8EBe_CLU?t=4208

お役に立てれば幸いです。

レポート · Oct 10, 2020

アドバイスありがとうございます。大体わかったようでしたのでや実際やってみましたら

うまくいきません。

というのは　別の場所からopenevent.html内の2か所に別々にリンクしたい場合です

ともうひとつ

リンク元は

と

とした場合#01と#02 同じ場所を示してしまいますがどうしてでしょうか

この場合リンク元の#をどこにつければよいでしょうか？または#t01と#02

の名称を変える必要があるのでしょうか？

何か昔は簡単にやっていたようだったのですが、よくわからなくなりました

教えてください

Emikio

レポート · Oct 11, 2020

Emikoさん、こんにちは。

リンク先（アンカーポイント）では、URL（https://～）は不要で、「アンカーポイントの名前」のみを記述します。名前は、半角英数字を用いて自由に指定できます。

※以前のDreamweaverメニュー「挿入＞アンカーポイント」を実行した時に、ダイアログでアンカーポイント名を入力したと思いますが、それが「アンカーポイントの名前」です。

今回の場合なら、次のようにしてみてください。

【openevent.html内にある、リンク先となるアンカーポイント】

<a name="t01">詳細1</a>
<p id="t02">詳細2</p>

※結果、詳細1が、アンカーポイントの名前「t01」／詳細2が、アンカーポイントの名前「t02」を指定することとなります。

この内容はHTMLの文法の話となるので、今後迷いなく使うためには、一度HTML文法を調べて理解した後に使う方が安心だと思います。

※調べるのが面倒という場合は、とりあえず、この前のメッセージの最後に、わたしのライブ授業のURLを貼っておきましたので、よかったらご覧くださいませ。

ご参考になれば幸いです。

レポート · Oct 08, 2020

HTML4では

<h3><a name="section3">Section 3</a></h3>

と書いていたものが、HTML5では

<h3 id="section3">Section 3</h3>

と書きます。

私はちょっと短くなって楽になった、と思ってます。

1 件の正解