スキルアップを始める!

HTMLのaタグの基本とアンカーの設定方法

HTML(エイチティーエムエル)
HTML(エイチティーエムエル)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

HTMLのaタグとは?

HTMLのaタグは、リンクを作成するために使用されます。HTMLでアンカー(特定の場所にジャンプするための場所を示す)を作成するために使用される要素です。

この要素は、id属性を持つ別の要素に対してハイパーリンクを作成するときに使用されます。

<a href="https://www.google.com">Google</a>

a name=”…”を使用すると、ページの任意の場所にアンカーを作成できます。例えば、以下のようなコードを使用して、ページ上部にジャンプするためのアンカーを作成できます。

<a name="top"></a>

このアンカーを作成すると、ページの他の場所から、リンクでジャンプできます。

上記のコードは、href属性に#topを指定しており、#の後にアンカー名(ここではtopという名前)を指定しています。

これにより、リンクをクリックすると、ページの先頭であるtopにジャンプすることができます。

id属性を持つ要素に直接リンクする

[rml_read_more]

なお、HTML5以降では、a name=”…”の代わりに、id属性を持つ要素に直接リンクすることができます。つまり、以下のように、アンカーを作成するための要素に直接id属性を付与することができます。

そして、この要素に直接リンクするために、以下のようにリンクを作成することができます。

<a href="#section1">Section 1にジャンプする</a>

上記のコードでは、href属性に#section1を指定しています。

<h1 id="section1">Section 1</h1>

これにより、リンクをクリックすると、ページ内のid="section1"を持つ要素にジャンプすることができます。

<a href="#section2">Section 2へジャンプする</a>

...

<h2 id="section2">Section 2</h2>
<p>ここはSection 2のコンテンツです。</p>

上記の例では、aタグのhref属性に「#section2」というアンカーを指定し、ページ内のh2要素にid属性「section2」を設定しています。このように設定することで、aタグをクリックすると、ページ内のSection 2に直接ジャンプすることができます。

まとめ

本記事では、HTMLのaタグについて説明しました。aタグは、ハイパーリンクを作成するために使用され、href属性を使用して、リンク先のURLを指定します。また、aタグを使用して、ページ内の別の場所に直接ジャンプすることもできます。

アンカーを使用するには、aタグのhref属性に「#」とジャンプ先の要素に指定したid属性を組み合わせて設定します。aタグの使用は、ウェブサイトのユーザーエクスペリエンスに大きく影響します。ぜひ使えるように復習してみましょう。

URLをコピーしました!