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

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

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

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

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

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

aタグの書き方

↓ソースはこのように書きます

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

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

aタグの子孫がリンクテキスト(リンク範囲)

上記の例にあるようにaタグで囲まれた部分=aタグの子孫がリンクテキスト(リンク範囲)となります。

aタグにはブロック要素を含むことができます。この場合aタグもブロック要素にしたほうがいいでしょう。

CSSで以下のようにdisplay:blockを設定すればaタグもブロック要素になります。

a{
display:block;
}

ブロック要素にしたいaタグだけに適用させましょう。

aタグの子孫にaタグは置けない

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

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

href属性

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

パスについては次回詳しく説明します。

target属性

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

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

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

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

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

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

まとめ

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

<a href="/index.php">マンガでわかるホームページ作成</a>
  • aタグの子孫がリンク範囲
  • href属性にリンク先URLかパス
  • target="_blank"を設定すると別タブで開く

関連記事