リンクってどういうもの？どう作ったらいいの？
リンクはページ内の移動や別ページへの移動に使ったりするよ。HTMLを学ぶ上でとても重要だから、使い方とよく使う方法を教えていくよ。
- リンクとは
- よく使うリンクを作る方法
前回のゼロわかはこちら▼
HTMLのリンクって？
リンクは同一サイトの別ページへの移動、ページ送り、外部サイトへの誘導など、Webサイトになくてはならない機能です。
Webページを見ていて、画像などをクリックやタップをして別のページへ移動することがありますよね。それがリンクの機能です。
リンクは英語でlinkと書き、「接続」や「繋がり」と言った意味を持ち、ページなどを繋げるといった機能を持っています。
IT業界では、リンクを作ることをリンクを「貼る」と言うよ。
リンクの基本的な作り方
リンクはaタグを使って作ります。
基本的にaタグでリンクを作りたいものを挟めばOKで、以下は一番基本的な文字にリンクを付ける方法です。
使い方
<a href="飛ばしたいページのURL">リンクを付ける文字</a>hrefに飛ばしたいページのURL（https://～～）を記載して、リンクを付けたい文字列をaタグで挟みます。
例
<a href=”https://www.zerowaka-drill.tech/”>ゼロわかドリルトップへ</a>
このサイトのトップページに飛ばすリンクを作るときはこのように書きます。
実際の表示のされ方
この”ゼロわかドリルトップへ”という文字を押すと、このサイトのトップに行きます。
以上のように「ここから別のページに飛ばしたい！」という時に使うタグです。
ページめくりが出来ない本がないように、このリンクがないとWebページも別ページに行くことができないため、最頻出・最重要なタグです。
ちなみにaタグのaはanchorの頭文字。船についているイカリという意味です。ここでは”飛ぶ”と言う表現をしていますが、本来の意味的には指定された場所に留めるというのが正しいでしょう。
よく使うリンクを作成する方法
リンクを付けられるものは文字以外にもあり、画像やボタンにもつけることができます。
よく使うものを紹介します。
テキストにリンクを付ける方法
<a href="飛ばしたいページのURL">リンクを付ける文字</a>hrefに飛ばしたいページのURLを指定し、aタグで挟んだ文字にリンクを付けることができます。
書き方や実際の見え方は先ほどお伝えしたので割愛します。
画像にリンクを付ける方法
<a href="飛ばしたいページのURL"><img src="リンクを付ける画像"></a>画像を入れるためのimgタグを、aタグで挟むだけで画像にも簡単にリンクを付けることが出来ます。
↓はサンプルです。
ソース
<a href="https://www.zerowaka-drill.tech/"><img src="https://www.zerowaka-drill.tech/wp-content/uploads/2022/10/背景黄_わかドリ_立っている_右向き-1024x1024.png"></a>実際の表示のされ方
ボタンにリンクを付ける方法
<button onclick="location.href='URL'">ボタンのテキスト</button>ボタンにリンクを付ける方法はいくつかありますが、ここではボタンタグを使った方法をご紹介します。
onclickというボタンをクリック or タップしたときに動く仕組みを使ってボタンを押すとリンクへ飛ぶようにします。
サンプル
<button onclick="location.href='https://www.zerowaka-drill.tech/'">トップページへ</button>実際の表示のされ方
同じページ内でリンクを使って移動させる方法
リンクは多くの場合は別のページに移動するに使われますが、同じページ内の移動にも利用可能です。
この場合、リンクだけではなく同一ページ内の要素にidが必要になります。
hrefにURLではなく、同一ページ内のidを設定します。
<a href=”#id”>リンクを付ける文字</a>
試しにこのページの目次へ移動するリンクは以下のように作ります。
目次のidがrtoc-mokuji-titleなのでそこへ移動します。
<a href="#rtoc-mokuji-title">目次へ</a>正確にはURLを省略した書き方が”#id”という書き方ですが、同一ページないに移動するにはidが必要ということを覚えておきましょう。
idって何？というあなたはこちらの記事もあわせてどうぞ。
URLの種類
URLには種類があり、絶対パスと相対パスに分けられ、それぞれ使い方に違いがあります。
絶対パスや相対パスと聞くと難しく感じるかもしれませんが、案外簡単なのでちょっとだけ頑張りましょう。
絶対パスと相対パス
絶対や相対という言葉を見ると難しいですが、私たちに身近な住所で考えると簡単です。
例えば東京タワーの住所で考えてみます。
”東京都港区芝公園４丁目２−８ 東京タワー”というのが絶対パス、”自分の家から1km先にある場所”というのが相対パスです。
絶対パスは誰がどんな場所にいても、必ずその場所を指し示すものです。
対して相対パスは、”自分がいる場所”によって変わるものです。
”自分の家から1km先にある場所”というのが東京タワーを指し示す場合もありますし、人によっては東京スカイツリーを指し示す場合もあります。
このような違いがあり、それぞれメリットやデメリットを考えながら指定してあげる必要があります。
絶対パス
全部のURLを書く書き方で、どこのページからでも対象のページに飛ぶことが出来ます。
例えば、このサイトのトップページに飛ぶ時の絶対パス（URL）は”https://www.zerowaka-drill.tech/”と記載します。
全部のURLを書くので、ソースが長くなったりするのがデメリットですが、自分の位置がどこであろうと辿りつけるのでとりあえず書けてしまうというメリットもあります。
外部サイトへのリンクを作る場合は、必ずこの書き方をする必要があります。
相対パス
記述されたファイルに対して、どこのフォルダの階層にいるファイルかを記載します。
内部サイトへの指定でのみ使うことが出来ます。
例えば、このページと同じ階層にあるHTMLの属性についての別記事に飛ばすにはこのように書きます。
<a href="../html-tag-attribute">【超初心者向け】HTMLタグのよく使う属性一覧と値</a>“../”はこの記述があるページ（自分）から一つ階層を上がるという意味を持ちます。
ですので、これを絶対パスで書くと”https://www.zerowaka-drill.tech/html-tag-attribute”のようになります。
また、ルート相対パスという書き方もあり、その場合以下のように書きます。
<a href="/html-tag-attribute">【超初心者向け】HTMLタグのよく使う属性一覧と値</a>これは、絶対パスの”https://www.zerowaka-drill.tech”を省略した書き方で、自サイト内でのみ指定可能です。
業務アプリケーションを作るとき、自サイト内の移動は基本的に相対パスで書きます。
その方が、管理がしやすく動的なページも作りやすいためです。
例えば、同じ階層の別フォルダに移動する時なども修正がいらないため、管理もしやすいのです。
このページではこれだけ覚える！
とりあえずaタグで挟む
<a href="飛ばしたいページのURL">リンクを付ける文字</a>この書き方だけ覚えましょう！
今回のゼロわか
- リンクとは
- ページの移動などに使うもの
- よく使うリンクを作る方法
- 文字にリンクを付ける
- 画像にリンクを付ける
- 同じページ内に移動する
お疲れさまでした。
今回は、リンクをゼロからわかっていただきました。
プログラミングをゼロから学ぶあなたはこちらから▼
