HTMLの<a>タグをマスターしよう！リンクの基本と応用テクニック

Webページには、他のページやサイトへ移動できる「リンク」が必要です。<a> タグを使えば、簡単にリンクを作成できます！この記事では、基本的な使い方から、便利な応用テクニックまで詳しく解説します。

<a> タグの基本構造

HTMLでリンクを作成するには、<a> タグを使います。
```
			<a href="https://mitumine.stars.ne.jp/kopipesityainayo/">こちらをクリック</a>
		
```
各属性の説明
- href=”URL” → リンク先のURLを指定します。
- <a>～</a> の間に書いたテキストが、リンクとして表示されます。
例えば、「Googleのサイトに移動するリンク」を作る場合は以下のように書きます。
```
			<a href="https://www.google.com">Googleへ移動</a>
		
```
このコードをHTMLに記述すると、「Googleへ移動」という文字がクリック可能なリンクになります。

別のページや同じサイト内のページにリンクする
1. 外部サイトへのリンク
  
  外部のWebサイトにリンクする場合、href にURLを指定します。
```
				<a href="https://mitumine.stars.ne.jp/kopipesityainayo/">外部サイトへ移動</a>
			
```
2. 自分のサイト内の別ページにリンクする
  
  同じサイト内のページにリンクしたい場合は、相対パスを使います。
```
				<a href="about.html">このサイトについて</a>
			
```
  この場合、about.html は同じフォルダ内にあるページを指します。

新しいタブでリンクを開く

通常、リンクは同じタブで開かれますが、target=”_blank” を追加すると新しいタブで開けます。
```
			<a href="https://mitumine.stars.ne.jp/kopipesityainayo/" target="_blank">新しいタブで開く</a>
		
```
注意: 新しいタブで開くリンクには、rel=”noopener noreferrer” を追加するのが推奨されています。
```
			<a href="https://mitumine.stars.ne.jp/kopipesityainayo/" target="_blank" rel="noopener noreferrer">安全な新しいタブリンク</a>
		
```

画像をリンクにする

文字だけでなく、画像をクリックして別のページに移動するリンクも作れます。

画像の挿入に関しては後日説明をいたします。とりあえずこういうことができることを頭に置いておいてください。
```
			<a href="https://mitumine.stars.ne.jp/kopipesityainayo/">
			  <img src="image.jpg" alt="クリックすると移動します">
			</a>
		
```

ページ内の特定の位置へ移動する（アンカーリンク）

ページ内の特定の場所へジャンプするリンクを作るには、id を使います。
1. 移動先に id を設定
```
					<h2 id="section1">ここが移動先の見出し</h2>
				
```
2. href に #id名を指定
```
					<a href="#section1">この部分へ移動</a>
				
```
  これで、リンクをクリックするとページ内の指定した位置へスクロールできます。

メールや電話番号へのリンク

リンクをクリックすると、メールや電話アプリを開くことも可能です。
1. メールを送信するリンク
```
					<a href="mailto:メールアドレスを入れる">メールを送る</a>
				
```
2. 電話をかけるリンク（スマホ対応）
```
					<a href="tel:+電話番号を入れる">電話をかける</a>
				
```

まとめ

<a> タグを使ってリンクを作成できる
href にURLを指定して外部・内部リンクを設定
target=”_blank” で新しいタブで開ける
画像やページ内の特定の場所へリンクすることも可能
メールや電話番号へリンクすることもできる

[custom_toc]