SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】aタグの基本的な使い方、リンク先のURLを指定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

aタグとは

aタグとは

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

<!--基本的なリンクの例-->
<a href="url">リンク先のURLを指定</a>
aタグブラウザとの比較

リンク先のURLを指定する

リンク先のURLを指定する

hrefでURLを指定する

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

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

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

#id属性の解説
<h2 id="top">aタグとは</h2> <!--ここにジャンプ-->

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

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

#id属性の解説02
<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タグの基本的な使い方

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

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

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

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

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

新しいタブ、ウィンドウでページが開くように指定する

1:ウェブサイト(SHU BLOG) 新しいウィンドウで開きます

<a href="url" target="_blank">1:ウェブサイト(SHU BLOG) 新しいウィンドウで開きます</a>
指定できる値
  • _blank
    新しいウィンドウに表示させます
  • _self
    現在のブラウジング・コンテキストを使用します
  • _parent
    親のブラウジング・コンテキストを使用します
  • _top
    最上位のブラウジング・コンテキストを使用します

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

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

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


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

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

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

telで電話番号をリンク

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

telで電話番号をリンク

電話は0120-345-6789まで

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

mailtoでメールリンク

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

mailtoでメールリンク

メールでお問い合わせ

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

関連記事

まとめ

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

POINT
  • aタグとは、リンクを示します。
  • リンクさせたい文字列の開始から終了をa/aで囲みます。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top