HTML手打ち、aタグでリンク作成
こんばんは！IT業界で働くアライグマです！
Webページを作成する際、リンクを設定することは欠かせません。リンクを適切に設定することで、ユーザーがサイト内をスムーズに移動できるだけでなく、検索エンジンの評価向上にもつながります。
HTMLを手打ちでコーディングする際には、aタグを使ってリンクを作成します。シンプルなテキストリンクから、画像を利用したリンク、外部サイトや同一ページ内の特定セクションへのリンクなど、さまざまな方法があります。
本記事では、aタグを活用したリンクの基本から応用的な使い方までを詳しく解説します。
aタグの基本構造
aタグを使うと、テキストや画像にリンクを設定できます。基本的な記述方法は以下の通りです。
<a href="https://example.com">こちらをクリック</a>
href属性にはリンク先のURLを指定します。これにより、ユーザーがテキストをクリックすると指定のURLへ移動します。
ターゲット属性を使う
リンクを新しいタブで開きたい場合は、target="_blank" を使用します。
<a href="https://example.com" target="_blank">新しいタブで開く</a>
また、rel="noopener noreferrer" を追加することで、セキュリティリスクを軽減できます。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">セキュアな新しいタブリンク</a>内部リンクと外部リンク
内部リンク
同じサイト内の別のページへリンクを設定する場合、相対パスを利用できます。
<a href="/about.html">会社概要</a>
これにより、現在のサイト内にある about.html へリンクを貼ることができます。
外部リンク
外部サイトへリンクを設定する場合は、完全なURL（絶対パス）を指定します。
<a href="https://www.google.com">Google</a>
外部リンクには target="_blank" を追加することで、別タブで開く設定も可能です。
ページ内リンク（アンカーリンク）
同じページ内の特定のセクションへ移動させる場合、アンカーリンクを活用します。
アンカーリンクの設定方法
- 移動先の要素に
idを設定
<h2 id="contact">お問い合わせ</h2>
aタグのhrefに#id名を指定
<a href="#contact">お問い合わせはこちら</a>
このリンクをクリックすると、ページ内の id="contact" が設定された要素にスクロール移動します。
画像をリンクにする
aタグの中に imgタグを入れることで、画像をクリック可能なリンクにできます。
<a href="https://example.com">
<img src="button.png" alt="ボタン画像">
</a>
alt属性を設定することで、画像が表示されない場合でも代替テキストが表示され、SEOにも良い影響を与えます。
メールアドレス・電話番号のリンク
メールアドレスへのリンク
クリックすると、メールアプリが開くリンクを設定するには、mailto: を使います。
<a href="mailto:info@example.com">メールを送る</a>
電話番号へのリンク
スマートフォンでクリックすると電話がかけられるリンクは tel: を使用します。
<a href="tel:0123456789">電話をかける</a>
ボタン風のリンク
CSSを使って、リンクをボタンのように見せることができます。
<a href="https://example.com" class="btn">クリック</a>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
まとめ
aタグを適切に使うことで、サイトのナビゲーションを改善し、ユーザーの利便性を向上させることができます。
href属性にURLを指定し、基本的なリンクを作成target="_blank"で新しいタブで開く- 内部リンクと外部リンクの使い分け
- アンカーリンクでページ内移動を可能にする
- 画像リンクやメール・電話リンクを活用
- CSSを使ってボタン風のリンクを作成
これらのポイントを押さえ、実践的なHTMLコーディングを行いましょう！