HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでブックマークリンク（ページ内リンク）を作成する方法

HTMLでブックマークリンクを作成するには、<a>タグのname属性を使ってブックマーク（名前付きアンカー）を定義し、その場所へのリンクを設置します。ブックマークは「名前付きアンカー」とも呼ばれ、クリックひとつで読者をページ内の特定のセクションへ直接ジャンプさせられるため、特に長いページのナビゲーション改善に非常に便利な機能です。

注意：name属性はHTML5で廃止されています

<a>タグのname属性はHTML5で廃止（非推奨）されたため、現在の新規開発では使用しないでください。代わりに、ジャンプ先の要素にid属性を付与する方法が標準的な手法となっています。動作はname属性とほぼ同じで、コードもよりシンプルになります。

実装例：従来のname属性を使った方法

以下のコードを実行すると、HTMLでブックマークリンクを作成する流れを確認できます。ページ上部のリンクをクリックすると、「Scripting Languages」のセクションへスクロール移動します。

<html>
   <head>
      <title>HTML Bookmark Link</title>
   </head>
   <body>
      <h1>Tutorials</h1>
      <p>
         <a href="#z">Learn about Scripting Languages</a>
      </p>
      <h2>Programming</h2>
      <p>Here are the tutorials on Programming.</p>
      <h2>Mobile</h2>
      <p>Here are the tutorials on App Development.</p>
      <h2>Design</h2>
      <p>Here are the tutorials on Website Designing.</p>
      <h2>Databases</h2>
      <p>Here are the tutorials on Databases.</p>
      <h2>Networking</h2>
      <p>Here are the tutorials on Networking.</p>
      <h2>Java Technologies</h2>
      <p>Here are the tutorials on Java Technologies.</p>
      <h2>Digital Marketing</h2>
      <p>Here are the tutorials on Digital Marketing.</p>
      <h2>
         <a name="z">Scripting Languages</a>
      </h2>
      <p>Here are the tutorials on Scripting Languages.</p>
   </body>
</html>

現代的な方法：id属性を使ったブックマークリンク

現在推奨されるのは、ジャンプ先の見出しや要素にid属性を指定する方法です。リンク元は「#id名」で参照します。

<p><a href="#scripting">Learn about Scripting Languages</a></p>

<h2 id="scripting">Scripting Languages</h2>
<p>Here are the tutorials on Scripting Languages.</p>

このようにid属性を使えば、<a>タグでアンカーを個別に定義する必要がなく、任意の要素（見出し・段落・画像など）をそのままジャンプ先として指定できます。目次や「ページトップへ戻る」リンクなどにも応用できるので、ぜひ活用してみてください。

  1. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800