htmlでリンクの貼り方【aタグの使い方】

ホームページと言えばリンクです。

リンクのないホームページなどほぼありません。

ホームページを作る以上必ず覚えなければならない「リンクの貼り方」を解説します。

htmlでリンクを貼るにはaタグを使う

htmlでリンクを貼るにはaタグを使います。

aタグは以下のように書きます。

<a href="/index.php">マンガでわかるホームページ作成</a>

ブラウザでは以下のように表示されます。

href属性

href属性にはリンク先のURLやパスを設定します。

絶対パス

URLをそのまま指定する方法です。

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

外部サイトの指定やWordPressなどのCMSでの記事作成のときは絶対パスでの指定がおすすめです。

相対パス

今のページを基準にリンク先がどこにあるか指定する方法です。

<a href="../../../about/about2/link.html">リンク</a>

自分のパソコン内でhtmlを作ってからアップする場合（静的htmlサイトの場合）、相対パスでの指定がおすすめです。

相対パスをきちんと理解しないとリンク切れの原因になります。

相対パスについて詳しくはこちら↓

PDFへリンク

リンクはhtmlファイルだけでなくPDFにもリンクできます。

<a href="../pdf/kessan.pdf">決算書（PDF）</a>

リンクのさせ方は基本的にhtmlと同じです。

PDFにかぎらず、エクセルやwordなどにリンクさせてダウンロードしてもらうこともできます。

ただし、スマホではPDFファイルは非常に見づらいため、PDFでなければならない場合を除き、できるだけ文字起こししてホームページ上にテキストで掲載しましょう。

target属性

target属性ではリンクの開き方を設定できます。

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

target属性には複数の値がありますが、使うとしたらtarget="_blank"一択でしょう。

target="_blank"を設定するとリンク先が別タブで開きます。

これによりリンク元に簡単に戻ってくることができます。

デザインが大きく変わるページ、PDF、外部リンクなどに使うことがあります。

が、設定しなくても別にいいです。お好みで。

ページ移動の種類

同じタブで開く

ふつうのリンクです。

<a href="/index.php">マンガでわかるホームページ作成</a>

別タブで開く

「target="_blank"」を指定することで別タブを作って開くことができます。

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

スマホの場合は別ウィンドウになります。

デザインが大きく変わるページ、PDF、外部リンクなどに使うことがあります。

ページ内移動

ふつうのリンクはページ最上部から開きますが、ページの途中（任意の地点）を開く方法です。

下記「ページ内リンク」をクリックすると「アンカー」の部分が一番上になるようにリンクします。

<div id="page1">アンカー</div>
<a href="#page1">ページ内リンク</a>

リンク先（アンカー）を設定する

ページ内リンクのリンク先をアンカーと呼びます。

<div id="page1">アンカー</div>

アンカーの指定方法は下記のとおりです。

nameを指定していたのは一昔前で、今はid一択です。

idが重複するとリンク先が2つあることになり不具合の原因になります。

設定するタグはなんでもいいです。h3などに指定するとページ内のタイトルまでページ内リンクができるでしょう。

リンクを設定する

ページ内リンクを指定するには「URL+#+アンカーのid」です。

<a href="link.html#page1">ページ内リンク</a>

同じページ内のリンクを指定するには「#+アンカーのid」です。

<a href="#page1">ページ内リンク</a>

アンカーがないと上部にリンクする特性を生かして「ページ上部に戻る」ときには「#」だけ指定することがあります。

<a href="#">ページ上部に戻る</a>

スムーズスクロール

リンクは上記で完成です。ページ内リンクをアニメーションで移動するとページの途中にリンクされたことがわかりやすくなります。

スムーズスクロールは下記CSSを指定すると可能です。

html{
    scroll-behavior: smooth;
}

上記ソースのまま「html」に指定しましょう。

リンクの形

aタグの中身およびデザインについてみていきましょう。

テキスト

基本はaタグの中にはテキストを入れます。

<a href="/index.php">マンガでわかるホームページ作成</a>

後述しますが、aタグの中のテキストはリンク先がわかるものにしましょう。

画像

aタグの中にimgを指定することで画像をリンクボタンにすることもできます。

<a href="https://csshtml.work/wp-content/uploads/cat.jpg">
    <img alt="子猫が毛布にくるまっている様子" width="300" height="170" src="https://csshtml.work/wp-content/uploads/cat.jpg">
</a>

ボタンを画像で作っておいてリンクボタンにする場合もこの方法です。

aタグの中には必ずテキストが必要です。imgだけ指定する場合はaltのテキストを必ず設定しましょう。

ボタン

CSSを駆使してリンクボタンを作ることができます。

マンガでわかるホームページ作成

<style>
.example{
    display: block;
    width: 50%;
    background: #1b8e00;
    color: #FFF;
    border-radius: 5px;
    margin: 15px;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
}
</style>
<a href="/index.php" class="example">マンガでわかるホームページ作成</a>

リンクはホームページにとって重要なものです。

ボタンとして装飾し目立たせることでクリックを促すことができます。

ボタンを作るときは「display: block」がミソです。

aタグはインライン要素であるため、一部のCSSが効きません。

display: blockを指定するとブロック要素になるためCSSが効くようになります。

aタグの中に入れることができるhtmlタグ

aタグはインライン要素ですが、ブロック要素も入れることができます。

divやp、h3などを入れることができます。

もちろんspanやimgもいれることができます。

一方で、aタグの中（子孫）にaタグは置けません。そりゃそうです。どっちにリンクすりゃいいんだとなります。

リンク先がおかしかったり崩れていたらaタグの中にaタグが入っていないか確認しましょう。

リンクとSEO

SEOにおいてリンクは非常に重要です。

リンクされている＝参照されている＝有力な情報源＝信用できる情報ということでSEOの評価が高まります。

ただし、Googleもいろいろな対策をしているためむやみにリンクを貼ったり貼ってもらったりしても意味がありません。

ユーザーにとって有益なリンクを貼りましょう。

また、リンクを貼る際のテキストはリンク先がわかるものにしましょう。

<p>× マンガでわかるホームページ作成は<a href="/index.php">こちら</a></p>
<p>○ <a href="/index.php">マンガでわかるホームページ作成はこちら</a></p>

ロボットはaタグ内だけでリンク内容を見ます。「こちら」だけではリンク先がわかりません。

リンク先にはサイト名やページタイトルをいれることをオススメします。

デザインの変更

文字色を変える

リンクの文字色を変えるにはCSS「color」を指定します。

<style>
a{
    color: #209b1b;
}
a:visited{
    color: #d10c5f;
}
a:hover{
    color: #1d03e5;
}
</style>
<p><a href="link.html">リンク前</a></p>
<p><a href="https://csshtml.work/html-atag/">リンク後</a></p>

colorにはカラーコードで色を指定します。

カラーコードについて詳しくはこちら↓

リンクではリンク前、リンク後、マウスを乗せたときで色を分けることができます。

リンクの色を見ただけで新しい情報かわかったり、マウスが乗ったとき変化があることでリンクであることがわかったりします。

リンク前はふつうに指定します。基準の色とします。

a{
    color: #209b1b;
}

リンク後は「:visited」を付けて指定します。

a:visited{
    color: #600671;
}

マウスが乗ったときは「:hover」を付けて指定します。

a:hover{
    color: #e53f03;
}

「:hover」は「:visited」の後に指定しましょう。

逆にすると訪問後のリンクにマウスを乗せても変化しなくなるためです。

また、スマホではマウスを乗せることはできません。

「マウスを乗せればわかるだろう」と考えず、見ただけでリンクであることがわかるようにしましょう。

リンク色について、リンク前は青、リンク後は紫が一般的です。

大きく変えるとリンクだと気づかれにくくなる場合があります。

リンクだとわかる範囲で変えるようにしましょう。

下線の有無を変える

下線を消すにはCSS「text-decoration: none」を指定します。

<style>
a:hover{
    text-decoration: none
}
</style>
<p><a href="#">hoverで下線を消す</a></p>

マウスが乗ったときの動きは「:hover」を指定します。

下記はふだん下線がなく、マウスが乗ったら下線が出るパターンです。

<style>
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
</style>
<p><a href="#">hoverで下線を出す</a></p>

まずaタグに「text-decoration: none」を指定して下線を消します。

リンクにマウスが乗ったとき「a:hover」に「text-decoration: underline」を指定します。

「text-decoration: underline」は下線を表示させるCSSです。

【まとめ】htmlでリンクの貼り方

リンクを貼るにはaタグを使う

<a href="/index.php">マンガでわかるホームページ作成</a>

• href属性にリンク先URL
• target="_blank"を設定すると別タブで開く

ページ内移動

• リンク先（アンカー）となるidを設定する
• ページ内リンクは「URL+#+アンカーのid」

リンクの形

• テキスト（通常）
• 画像（img）
• ボタン（CSSを駆使して）

aタグの中に入れることができるhtmlタグ

• ○ div,p,h1~h6,ul,span,img…
• × a

リンクとSEO

• リンクはSEO上重要。
• リンクテキストにはサイト名やページタイトルをいれよう。

文字色を変える

CSS「color」を指定

下線の有無を変える

• 下線を消すにはCSS「text-decoration: none」を指定
• 下線を表示するにはCSS「text-decoration: underline」を指定

以上、htmlでリンクの貼り方でした。