Web制作

初心者のためのHTML講座|リンクをつけるための<a>タグの書き方

ネットショップを運営していると
ちょっとしたページ更新をやらなきゃいけない場面ってありますよね。

年末年始の営業時間をお知らせしなきゃ!
セール用のバナー外さなきゃ!

Web担当者さんや外注業者さんがいればやってもらえますが
緊急で修正が必要なときなど、依頼している時間がないときもありますよね。

そんなときのために、簡単な修正はできるようにしておきましょう!

というわけで、今回から「初心者のためのHTML講座」と題して
ちょっとムズカシイHTMLを、分かりやすく解説していきたいと思います!

今回は、文字や画像にリンクをつけるための「aタグの書き方」です!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座/Mana

created by Rinker
¥2,486
(2019/11/12 06:14:13時点 楽天市場調べ-詳細)

HTMLのaタグってなに?

aタグとは、文字や画像にリンクをつけるときに使われるHTMLタグです。

<a>と書くので、そのまま「エータグ」と呼称されます。

aは、「Anchor(アンカー)」の頭文字をとっていて
リンクの出発点、到達点を指定することができます。

aタグの基本の書き方

aタグは、<a href=””></a>という2つの文字列を一組にして使用します。

それぞれ、開始タグ終了タグと呼ばれていて
リンクをつけたい要素を挟むようにして記載します。

aタグの書き方

hrefの後のダブルコーテーションの間に記載したURLが、リンク先のURLになります。

テキストにリンクをつけるaタグの書き方

開始タグと終了タグの間には、リンクをつけたい要素を記載します。

まずは、テキストにリンクをつけるときの書き方です。

<a href=“https://gk-post.com”>じーぽのトップ</a>

ブラウザでの表示 じーぽのトップ

これはとても簡単です。
上記のように、開始タグと終了タグの間に文字を打ち込むだけです。

タグの間に打ち込んだ文字にリンクが設定されましたね。

リンクがついた部分には
色や下線がついてわかりやすくなるぽ!

画像にリンクをつけるaタグの書き方

つぎは、バナーなどの画像にリンクをつけるときの書き方です。

<a href=“https://gk-post.com/writers”>
<img src="https://gk-post.com/img/writer.jpg" alt="ライター紹介">
</a>

ブラウザでの表示
ライター紹介ページ

画像を表示するにはimgタグ(=イメージタグ)を使います。

このimgタグをaタグで囲むと、画像自体にリンクをつけることができます。

imgタグが見つかれば、すぐできるぽ!

別タブでリンクが開くようにするときの書き方

実は、ここまでのやり方でリンクをつけると
見ているページ自体がリンク先のページに切り替わってしまいます。

リンク先が外部サイトの場合や、商品一覧ページからリンクさせる場合などは
いま見ているページの表示自体はそのままにして
新しいタブにリンク先のページを表示させるようにするべきです。

<a href=“https://www.rakuten.co.jp/” target="_blank">
楽天市場でお買い物をする!
</a>

ブラウザでの表示 楽天市場でお買い物をする!

リンクが別タブで開かれるようにしたいときは
aタグの開始タグに「target=”_blank”」という記載を追加します。

戻るボタンでページを開きなおす手間が省けるから
ユーザの離脱リスクが軽減できるんだぽ!

まとめ – aタグの書き方

日頃なんとなく難しそうだなと思って見ていたHTMLも
これさえ覚えておけばリンクの更新はお手の物です!

最初のうちは時間がかかるかもしれませんが
慣れてくれば数分で作業できるようになります。

少しずつ覚えて、自分ひとりでサイト更新できるようになりましょう!

それでは、また次回のHTML講座で~
【Web制作の基礎】サイト制作の流れと作業工程をざっくりまとめて解説します!ネットショップ運営をしていると、イベントやキャンペーンのたびにページ制作やLP制作をしていますよね。でも実際どんな作業をしているのかって意外と知らないもの。そんな方のために、サイト制作の流れと作業工程をざっくりまとめました。ざっくりでも把握できればサイト制作のスケジュールも立てやすくなります。...
【Web制作の基礎】サイト制作に必要なファイルとソフトウェアECサイトの運営はしているけど、Webサイト制作の細かいことまではよく知らない。そんなショップ運営者さんは意外と多いですよね。そんな方のために、ウェブサイトってどんなもので、どうやって制作してるの?そんなことを解説しています。HTMLやCSSなど、聞いたことはあるけど、よく分からない!を解決します。...

スラスラわかるHTML&CSSのきほん 第2版 [ 狩野 祐東 ]

created by Rinker
¥2,178
(2019/11/11 16:20:48時点 楽天市場調べ-詳細)

ABOUT ME
サムライ
元デザイナー。いまは技術全般いろいろ見てます。 デザインのちょっとしたコツやトレンド情報など、分かりやすくて役に立つ記事を公開していくでござる。

ネットショップ運営でお困りのことはありませんか?
お気軽にご相談ください。