シュウ

今回は【HTML】aタグの基本的な使い方、リンク先のURLを指定しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はaタグの基本的な使い方、リンク先のURLを指定する解説になります

今回は、初心者向け講座になります。
aタグとは、「リンク先のURLを指定」、「電話番号」、「ダウンロードリンク」などを
指定する際に使用します。

aタグとは

aタグとは
「aタグ」はリンクを示します。リンクさせたい文字列の開始から終了を<a>〜</a>で囲みます。
「aタグ」はAnchorの略で、「リンク」を意味します。アンカーリンクとも言ったりします。
書き方は以下のようになります。

<!--基本的なリンクの例-->
<a href="url">リンク先のURLを指定</a>

リンク先のURLを指定する

hrefでURLを指定する

リンク先のURLを指定する際には、href="◯◯"の中にリンク先を指定します。
また、「HTMLファイル#要素のid属性」のように、HTMLファイルに続き「#」でid属性の値を指定することで、ジャンプ先の位置も指定可能になります。

1: 直接URLを指定しております。
指定する際には、絶対パスと相対パスがありますが、今後解説いたします。

2: #id属性を指定しております。
クリックすると、最初の見出し「aタグとは」までジャンプします。
※今回はjQueryを使いクリックしたらスクロールする使用になっております。

<h2 id="top">aタグとは</h2> <!--ここにジャンプ-->

<a href="#top">「aタグとは」</a>

2-1: HTMLファイル#要素のid属性を指定します。
クリックすると、「別ページのHTMLファイル#要素のid属性」にジャンプします。

<a href="別ページurl#top">別ページへジャンプ</a>

<a href="https://shu-naka-blog.com/">1:ウェブサイト(SHU BLOG)</a>
<a href="#top">2:aタグの基本的な使い方 「aタグとは」</a>

いろいろな種類のリンクを指定する

この章では、「画像にリンク」、「新しいタブ、ウィンドウ」、「ダウンロード」、「電話番号」など、
いろいろな種類のリンクを解説していきます。

画像にリンクを指定

画像にリンクを貼ることも可能です。
リンクさせたい画像<img>の開始から終了を<a>〜</a>で囲みます。

<a href="リンク先URL"><img src="画像パス" alt="aタグの基本的な使い方"/></a>

注意！
※<img>タグには、必ずalt属性を指定し、説明を入れるようにしましょう。
alt属性とは、img要素の中に記述される画像の代替となるテキスト情報のことです、ページの検索順位に影響することはほぼありませんが、正しく情報を入力しましょう。

targetで新しいタブ、ウィンドウでページ

クリックしたときに、新しいタブ、ウィンドウでページが開くように指定ができます。
aタグの中にtarget="◯◯"を入れ指定します。

<a href="url" target="_blank">1:ウェブサイト(SHU BLOG) 新しいウィンドウで開きます</a>

download属性でダウンロードリンク

download属性を指定することで、指定先のファイル(画像、PDF)をダウンロードします。
※ダウンロードリンクに指定する際には、同じサイト上にファイルを配置しましょう。
aタグの中にdownload="◯◯"を入れ指定します。

download属性でダウンロードリンク

この画像がダウンロードされます(sample.jpg)

画像をダウンロードする(クマの画像)

<a href="ファイルのURL/sample.jpg" download="sample.jpg">画像をダウンロードする</a>

telで電話番号をリンク

telを指定することで、電話のリンクになり、携帯電話でタップすると電話がかけられるようになります。
ハイフンありでも無しでもどちらでも問題はありません。数字もハイフンも全て半角で書きましょう。
aタグの中にhref="tel:電話番号"を入れ指定します。

<p>電話は<a href="tel:01203456789">0120-345-6789</a>まで</p>

mailtoでメールリンク

mailtoを指定することで、クリックしたらメーラー(メールソフト)が起動します。
現在では、お問い合わせフォームを作成するため、あまり「mailto」を使用はしません。
aタグの中にhref="mailto:メールアドレス"を入れ指定します。

<p><a href="mailto:◯◯◯◯◯@gmail.com">メールでお問い合わせ</a></p>

関連記事

まとめ

今回はこれで以上です。
次回は「aタグに対してCSSでリンクの文字を整える」解説になります。
少しずつ覚えていきましょう！

< 前の記事

【HTML】pタグとbrタグの使い方、段落と改行を理解し指定しよう!

次の記事 >

【HTML】aタグの基本的な使い方、CSSでリンクの文字を整える!