HTML・はじめの一歩

リンクで他のページへ

クリックすると別のページへ飛ぶ——Webを「Web（くもの巣）」たらしめる仕組みがリンク。aタグで作ります。

Webのいちばんの魔法は、文字をクリックすると別のページに飛べること。この「つながり」があるから、世界中のページがくもの巣（Web）のようにつながっています。それを作るのがリンク。使うタグは <a> です。

いちばん短いリンク

<a href="https://example.com">サンプルサイトを見る</a>

分解するとこうです。

部分意味
<a>anchor（アンカー＝いかり）の目印。リンクを作るタグ
href="..."行き先の住所（URL）。ここが肝心
サンプルサイトを見る画面に見える、クリックできる文字

「サンプルサイトを見る という文字をクリックしたら、href の場所へ飛ぶ」という意味になります。表示すると、その文字だけ色が変わって、押せる合図になります。

ブラウザ表示。地の文の中で「サンプルサイトを見る」の部分だけが青色＋下線のリンクになっている
まわりの文字は黒いまま、リンクにした文字だけが青くなって下線がつきます。これが「押せる合図」。

サイトの中のページへ飛ぶ

外のサイトだけでなく、自分のサイトの別ページへも飛べます。その場合は、そのページのファイルへの道すじを書きます。

<a href="/about.html">このサイトについて</a>

https://... から始まる長い住所が「外の家の住所」なら、/about.html は「同じ家の中の部屋番号」のようなもの。同じサイト内なら、短く書けます。

メールや電話にもリンクできる

リンクの行き先は、Webページだけではありません。href の書き方を変えると、メール作成や電話をかける画面をひらくリンクも作れます。

<a href="mailto:[email protected]">メールを送る</a>
<a href="tel:09000000000">電話をかける</a>
書き方押すと…
href="mailto:メールアドレス"メールを書く画面がひらく
href="tel:電話番号"スマホで電話をかけられる

お店の連絡先や、自分への「お問い合わせ先」を置きたいときに便利です。

このレッスンのまとめ

  1. リンクは <a href="行き先">文字</a>
  2. 行き先（URL）は href に書く
  3. 外のサイトにも、同じサイトの別ページにも飛べる

できたら、自分のリンクに書きかえてみましょう。よく見るサイトや、自分のメールアドレスでOK。 :::

やってみよう：れんらくのリンク

しまちゃんのページに「れんらく」を足しましょう。<h2> の下に、<a> でYouTubeとメールへのリンクをならべます。

<h2>れんらく</h2>
<a href="https://www.youtube.com/">YouTube</a>
<a href="mailto:[email protected]">メール</a>

mailto: は、押すとメール作成がひらくリンク。https://... は、そのWebページへ飛びます。

ブラウザ表示。「れんらく」の見出しの下に、YouTubeとメールのリンクが青い文字＋下線で並んでいる
リンクにした文字だけが青くなって、押せる合図に。

よくある質問

リンクを新しいタブで開くには？
aタグにtarget="_blank"を足します。あわせてrel="noopener"も付けておくと、開いた先のページから元のページを操作されない安全な形になります。
リンクの青色や下線は変えられる？
変えられます。CSSでaタグにcolor（色）やtext-decoration:none（下線消し）を指定します。ただし「ここは押せる」と分かる見た目は何かしら残しましょう。
hrefの「/で始まる住所」と「ファイル名だけの住所」の違いは？
/で始まる書き方はサイトの一番上の階層から数えた住所、ファイル名だけの書き方は今のページと同じフォルダから数えた住所です。