HTML初めての人向け|リンクを設定する方法

手順１

リンク元として設定する文の前後を<a></a>で囲む

半角空けてhref=""と入力

開始タグの中のaの後ろに半角スペースを入れ、href=""と入力します。
（href属性の追加）

" の入力方法はこちらから    = の入力方法はこちらから


手順３

""の中に移動先のURLを入力

移動先となるページのURLをコピーし、href属性の値として貼り付けます。

ここでは移動先の例として「リンクテストページ」を想定しているので、href属性の値は以下のようになります。

<a href="https://beginnertogainer.blogspot.com/p/blog-page_25.html">クリックするとリンクテストページに移動します</a>
これでページ外リンクの設定は完了です！

別ページの特定の場所に移動する

「クリックするとリンクテストページの２０行目に移動します」という文がクリックされたら、リンク先に指定した「リンクテストページ」の「20行目」と書かれたところに移動する。

移動先の設定 手順１

移動先となるタグにid属性を追加する

HTML入力モードに切り替え、半角で入力します。
タグ名の後ろに半角スペースを開けて、id=""と入力します。

" の入力方法はこちらから    = の入力方法はこちらから


ここでは例としてspanタグを使用していますが、移動先が他の種類のタグであっても同じようにid属性を設定します。

例
<div id="">移動先</div>
<p id="">ジャンプ先</p>
<h2 id="">ここに飛ぶ</h2>


移動先の設定 手順２

id属性の値（名前）を設定する

「""」の間に任意のid名を入力します。
ここで設定したid名は移動元の設定で使用するので、id名を覚えるかコピーしておきます。

id名を付ける際の注意点はこちらから（ページ内リンク）

これで移動先（リンク先）の設定は完了です！
続いて移動元（リンク元）の設定に移ります。


移動元の設定 手順１

移動元となる文の前後を<a></a>で囲む

移動元の設定 手順２

href属性を追加する

開始タグの中のaの後ろに半角スペースを入れ、href=""と入力します。


移動元の設定 手順３

""の中に移動先のURLを入力する

移動先となるページのURLをhref属性の値として入力します。

ここでは移動先の例として「リンクテストページ」を想定しているので、href属性の値は以下のようになります。

<a href="https://beginnertogainer.blogspot.com/p/blog-page_25.html">クリックするとリンクテストページに移動します</a>
URLはコピーして貼り付けると入力が簡単です。
ここまでは単にリンクを貼るのと同じですね。


移動元の設定 手順４

URLの後に#を追加する

ページ内の特定の場所（id属性を設定した場所）に移動させるには、 まずURLの後ろに#を入力します。

# の入力方法はこちらから


移動元の設定 手順５

#の後に移動先で設定したid名を追加する

<span id="idousaki">20行目</span>

この移動先のid名を移動元のhref属性の末尾、先ほど入力した#の直後に入力します。

これで完了です！別ページの特定の場所に飛ばすことができます！


最後に移動元と移動先の２つを並べてみます。

注意点

ここで紹介している「別ページの特定の場所に移動する方法」は、ご自身が管理していないウェブページ、つまり自分でHTMLを変更できないページについては適用できません。

単にページ外リンクを貼るだけでしたら、自分が管理していないウェブページであってもリンクを貼ることができるのですが、他の方が管理しているページの特定の場所に移動させることは、ここで紹介した方法ではできませんのでご注意ください。

まとめ

ページ内リンクを設定する

ここでは以下の例に沿って手順を進めていきます。

「30行目に移動します」という文がクリックされたら、 同一ページ内の「30行目」と書かれた場所に移動する

リンクテストページで動作確認

移動先と移動元のどちらから手をつけてもいいのですが、まずは移動先の設定から始めることにします。


移動先の設定 手順1

移動先に設定するタグにid属性を追加する

まずHTML入力モードに切り替えます。

そしてタグ名の後ろに半角スペースを開けて、id=""と入力します。

" の入力方法はこちらから    = の入力方法はこちらから


< の入力方法はこちらから    > の入力方法はこちらから    / の入力方法はこちらから

ここでは例としてspanタグを使用していますが、移動先が他の種類のタグであっても同じようにid属性を設定します。
<div id="">30行目</div>
<p id="">30行目</p>
<h2 id="">30行目</h2>




「""」の間に任意の名前を入力します。

id名を設定する際の注意点はこちらから（ページ内リンク）

ここで設定したid名は移動元の設定で使用するので、id名を覚えるかコピーしておきます。
これで移動先（リンク先）の設定は完了です！
続いて移動元（リンク元）の設定に移ります。




移動元の設定 手順２

href属性を追加する

開始タグの中のaの後ろに半角スペースを入れ、href=""と入力します。


移動元の設定 手順３

href属性の値に#を入力する

同一ページ内の特定の場所（id属性を設定した場所）に移動させるにはまず""の中に#を入力します。

別ページの特定の場所に飛ぶには、URLを入力した後に#を入力しますが、同一ページ内に移動する場合はURLは不要です。

移動元の設定 手順４

#の後に移動先で設定したid名を追加する

先ほど移動先のid名は以下のように設定していました。
<span id="moved">30行目</span>

この移動先のid名を移動元のhref属性の末尾、先ほど入力した#の直後に入力します。

これでページ内リンクの設定は完了です！
移動元と移動先を並べてみます。

まとめ

1. 移動先となるタグにid属性を追加する
2. 移動元となる文を<a href="#id属性名"></a>で囲う

リンク先にリンクを貼ってリンク元に戻る

ここまでは2つの場所に移動先と移動元の役を割り振ってきましたが、
１つの場所に２つの役割を持たせることも可能です。

リンク先にリンク元のURLを設定すると元の場所に戻ってくることができるので、クリックするたびにお互いの場所を行ったり来たりすることが可能になります。

ここでは設定する条件を４つに分けて取り上げます。

同一ページで設定する場合（aタグのみ使用）

例として以下の２つの文にリンクを設定してみます。

もくじ（クリックすると重要！に移動します）
重要！（クリックするともくじにもどります）
動作確認はこちらから


手順1
テキストをaタグで囲い、id属性と値（名前）を設定する



HTML入力モードに切り替え、半角で入力します。


手順2
href属性の値として#と移動先のid名を設定する



もう一つの文にも同じように設定します。



これで完了です！２つを並べてみます。

同一ページで設定する場合（aタグとspanタグを使用）

例として以下の２つの文にリンクを設定してみます。

もくじ（クリックすると重要！に移動します）

重要！（クリックするともくじにもどります）


手順1
テキストをaタグで囲い、href属性の値として#と移動先のid名を設定します



HTMLモードに切り替えて入力します。


手順2
aタグの外側 にspanタグを配置し、id属性と値（名前）を設定します

以下の文にリンクを設定し、リンク先の「元の場所に戻る」をクリックすると、以下の文に戻ってくるように設定してみます。

クリックするとリンクテストページの「元の場所に戻る」に移動します

id名とURLを変えてもう一つの文も同じように設定します。



これで完了です！２つを並べてみます。

別ページで設定する場合（片方にaタグとdivタグを使用し、もう片方にaタグとspanタグを使用）

手順1
テキストをaタグで囲い、href属性の値として#と移動先のid名を入力



HTMLモードに切り替え、半角で入力します。
id名は好きに付けることができますが、アルファベットで始めるようにします。
数字はNGです。


手順2
aタグの外側にdivタグを、id属性と値（名前）を入力



もう一つの文はspanでタグ付けしてみます。id名とURLを変えて同じように設定します。



これで完了です！２つを並べてみます。

aタグを内側に配置するか外側に配置するか

ここまでの例ではテキストに一番近い位置にaタグを配置してきました。



しかし、以下のようにspanやdivの外側にa要素を設定することもできます。

aタグを一番外側に配置する効果

aタグで囲まれた要素全体のスペースにリンクの効果が及ぶので、マウスを載せたときにクリックできる範囲が広がります。

つまりa要素にdisplay:blockを設定したような効果が生じるということですね。

これはspanタグでは分かりづらいですが、余白を設定しているdivタグでは違いが分かりやすいです。







ただ要素の最も内側にaタグを配置する方が多いようですね。

ここではこれらの基本的なリンクの貼り方について取り上げ、最後に応用として「リンク先にリンクを設定し、リンク元に戻ってくる」ということをやってみます。

別ページに移動する（ページ外リンク）

ここからは以下の例に沿って一つ一つ手順を進めていきます。

HTML入力モードに切り替え、半角で入力します。

< の入力方法はこちらから    > の入力方法はこちらから    / の入力方法はこちらから
手順２



もう一つの文にも同じように設定します。



これで完了です！２つを並べてみます。

別ページで設定する場合（aタグのみ使用）

手順1
テキストをaタグで囲い、id属性と値（名前）を設定します



HTMLモードに切り替えて半角で入力します。


手順2
href属性の値として移動先のURLと#とid名を設定します

<a>の意味

aタグのaはanchor（アンカー）の頭文字のaから取られたようです。

anchorは船の錨（いかり）という意味で、錨には船と海底を繋ぎとめる役割があります。
きっと「２つのものを繋ぐ」という意味で、リンクを設定するタグにanchorのaが採用されたのでしょうね。

id名の注意点

１ id名は他のid名と違うものを使用する

同じページ内に同じ名前のidを複数設定してしまうと、意図した場所に移動させることができなくなってしまいます。

「id名は同一ページ内にある他のid名と違うもの」になるよう設定します。
ページが別であれば、同じid名を設定してもリンクに関して問題は生じません。


２ id名の始まりはアルファベット

数字始まりは不可です。