Skip to content

Instantly share code, notes, and snippets.

@hyuki

hyuki/chat.md Secret

Created April 14, 2023 01:27
Show Gist options
  • Save hyuki/a34bfcdcc3e168cf258ebb710cd6b42a to your computer and use it in GitHub Desktop.
Save hyuki/a34bfcdcc3e168cf258ebb710cd6b42a to your computer and use it in GitHub Desktop.
#ChatGPT と結城浩の対話: ページ内リンクの記述方法について

Model: GPT-4

Date: 2023-04-14

HTMLでページ内の別の場所にジャンプするリンクを作りたいと思っています。ページの上に目次があって、そこをクリックするとページ内の別の場所にジャンプするイメージです。確か、<a name="article-name" id="article-id">記事の見出し</a>のように記事の側に書いた記憶があるのですが、name属性とid属性とどちらだったか忘れてしまいました。

<a>タグのname属性は、HTML5では廃止されました。代わりにid属性を使用して、ページ内ジャンプを実装することが推奨されています。

以下の方法でページ内ジャンプを実装できます。

ジャンプ先の要素にid属性を追加します。

<h2 id="article-id">記事の見出し</h2>

ジャンプ元のリンクをhref属性にハッシュ記号#とid属性の値を付けて作成します。

<a href="#article-id">記事の見出しへジャンプ</a>

このようにして、ページ内ジャンプを実装できます。目次から各見出しにジャンプするには、目次部分にそれぞれの見出しに対応するリンクを作成し、各見出しにid属性を設定してください。

なるほど。name属性は廃止されたのですね。ありがとうございます。念のため、MDNで裏を取ってみました。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/a 確かに廃止されていました。

はい、おっしゃるとおりname属性は廃止されています。代わりにid属性を使用して、ページ内ジャンプを実装することが推奨されています。MDN Web Docsは、Web開発に関する正確な情報を提供しているため、今後も疑問がある際には参照してみてください。

もしご不明な点がございましたら、お気軽にお尋ねください。お手伝いできることがあれば幸いです。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment