ホームページを作っていると、
・文字をクリックしたら別のページに移動させたい
・外部サイトへリンクを貼りたい
・新しいタブで開きたい
このような場面はとても多いです。
そこでこの記事では、初心者の方でもすぐ使えるリンクの貼り方を、順番にわかりやすく解説します。
HTMLでは、たった1つのタグでリンクを作ることができるので、ぜひ確認してくださいね！
HTMLでリンクを貼る基本の書き方
まずは、HTMLでリンクを貼る基本の書き方からご紹介します。
一番シンプルな形から見ていきましょう。
<a href="page.html">こちらをクリック</a>このコードで、
「こちらをクリック」という文字を押すとpage.html に移動するリンクになります。
各部分の意味
<a>→ リンクを作るタグhref→ 移動先の場所- 表示される文字 → クリックできる部分
これだけ覚えればOKです。
外部のホームページへリンクする方法
次に、外部のホームページへリンクする方法をお伝えします。
自分のサイト以外へ移動させたい場合は、URLをそのまま書きます。
<a href="https://example.com">公式サイトはこちら</a>これで、外部のホームページにジャンプします。
よくあるミス
・httpsを入れ忘れる
・全角文字が混ざる
この2つに気をつければ問題ありません。
別タブ（新しい画面）でリンクを開く方法
別タブ（新しい画面）でリンクを開く方法をご紹介します。
リンクを押したときに、
今のページを残したまま別タブで開きたい場合はこちらを使います。
<a href="https://example.com" target="_blank">別タブで開く</a>target="_blank" を追加するだけです。
こんなときに便利
・外部サイトへのリンク
・参考ページへのリンク
読者が元のページに戻りやすくなります。
画像をクリックできるリンクにする方法
画像をクリックできるリンクにする方法をお伝えします。
文字だけでなく、画像もリンクにできます。
<a href="page.html">
<img src="sample.jpg">
</a>これで、画像をクリックするとページ移動します。
バナーやボタンとしてよく使われる方法です。
同じページ内でジャンプするリンクの作り方
同じページ内でジャンプするリンクの作り方をお伝えします。
長いページでは、指定した場所へ一気に移動できるリンクが便利です。
移動先を設定
<h2 id="point">ここが移動先</h2>リンクを作成
<a href="#point">ここへジャンプ</a>これでページ内移動ができます。
リンクがうまく動かないときのチェックポイント
リンクがうまく動かないときのチェックポイントについて、お伝えします。
うまくいかないときは、次を確認してみてください。
✔ ファイル名が合っているか
✔ スペルミスがないか
✔ 全角文字が入っていないか
✔ httpsを入れているか
ほとんどの場合、ここが原因です。
HTMLリンクの基本形のまとめ（コピペ用）
HTMLリンクの基本形のまとめをお伝えします。
コピペで使えますよ。
通常リンク
<a href="page.html">リンクはこちら</a>別タブで開くリンク
<a href="https://example.com" target="_blank">別タブで開く</a>画像リンク
<a href="page.html">
<img src="sample.jpg">
</a>まとめ
「HTMLでリンクを貼る方法と別タブで開く設定」の内容はいかがでしたでしょうか？
HTMLでリンクを作るのはとても簡単です。
✔ aタグを使う
✔ hrefで移動先を書く
✔ 別タブはtargetを追加
これだけ覚えれば十分です。
リンクを使えるようになると、ホームページは一気に使いやすくなります。
まずは基本形から試してみてくださいね！
