【今すぐ無料で試す】ゼロから始める定額・学び放題のプログラミング学習サービス「侍テラコヤ」

【初心者向け】HTMLのリンク（aタグ）とは？読み方・サンプルを用いた基本的な使い方を解説

SHARE

HTMLとCSSを知っている人

Webページを作成している時に他のWebページやWebページ内の特定の場所に遷移させたいなと思ったことはないでしょうか?

 

そんな時に利用するのが「HTMLのリンク（aタグ）」です。

 

そこでこの記事では「HTMLのリンク（aタグ）」についてお話していきます。

 

気になる方は是非読んで頂ければと思います。

 

aタグとは?

 

HTMLとCSSを知っている人

HTMLのaタグはハイパーリンクを指定する時に使用します。

 

ハイパーリンクとは複数の文書を結びつける役割を担っているものです。

 

インターネット上に公開されているWebページの場合、URLを指定することで他のWebページに遷移することが可能となっています。

 

aタグのaとは「anchor（アンカー）」を省略したものです。

 

読み方は一般的に「エータグ」と呼びます。

 

aタグはハイパーリンクの出発点と到達点を指定する役割を持っています。

 

出発点とはWebページの画像や文字のことを、到達点とはリンク先となる他のWebページやファイルのことを指します。

 

またaタグはhref（エイチレフ）属性やtarget属性など多くの属性を有していることも特徴です。

 

そのためリンクを設定する際に、さまざまな性質を付加させることが可能となります。

 

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

 

HTMLとCSSを知っている人

本書はHTMLの要素（タグ）とCSSのプロパティを解説したリファレンスです。

 

開きやすく手元に置きやすいB6判で、タグやプロパティの内容をサッと調べることができます。

 

タグやプロパティの解説だけでなく、基礎知識編ではHTMLやCSSの仕様、記述方法に加え、文字参照、URLといったWeb制作者として不可欠な知識も解説しています。

 

また、読者特典として、本書で使用しているサンプルコードをダウンロードできます。

 

 

HTML&CSSを学びたい方必見

 

HTMLとCSSを知っている人

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

 

現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

 

実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

 

 

aタグの基本的な使い方

 

HTMLとCSSを知っている人

それではaタグの基本的な使い方をみていきましょう。

 

<!DOCTYPE html>

<html lang="ja"> 　

<head> 　　

<meta charset="UTF-8">

<title>aリンク</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<a href="https://www.web-knowledge-info.com">押さえておきたいWeb知識</a>

</body>

</html>

 

実行結果

 

 

上記のソースコードをWebブラウザで表示させると「押さえておきたいWeb知識」という文字に下線が引かれており、リンクとなっています。

 

href属性で遷移先のURL(https://www.web-knowledge-info.com)を指定することでaタグで別のWebページに移動することができます。

 

HTMLのaタグでリンクを設定した文字の部分をアンカーテキストといいます。

 

例えば、上記のように記述すると、aタグで囲まれた文字列「押さえておきたいWeb知識」がアンカーテキスト、ダブルクォーテーションで括られた「https://www.web-knowledge-info.com」がリンク先となります。

 

このようにaタグを利用する際、href属性は必須となっています。

 

画像のリンクボタンを作成したい場合

 

HTMLとCSSを知っている人

次に画像のリンクボタンを作成したい場合にどのようにするのかみていきましょう。

 

<!DOCTYPE html>

<html lang="ja"> 　

<head> 　　

<meta charset="UTF-8">

<title>aリンク</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<a href="https://www.web-knowledge-info.com"><img src="example-image.png"></a>

</body>

</html>

 

実行結果

 

 

画像のリンクボタンを作成するのはとても簡単です。

 

aタグで画像をはさむだけでOKです。

 

上記の画像をクリックして頂くとURL「https://www.web-knowledge-info.com」に遷移することができます。

 

リンク先を別タブで開きたい場合

 

HTMLとCSSを知っている人

次にリンク先を別タブで開きたい場合にどのようにするのかみていきましょう。

 

<!DOCTYPE html>

<html lang="ja"> 　

<head> 　　

<meta charset="UTF-8">

<title>aリンク</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<a href="https://www.web-knowledge-info.com" target="_blank">押さえておきたいWeb知識</a>

</body>

</html>

 

実行結果

 

target属性(target=”_blank”)を付け加えることでリンク先を別タブで開くことができます。

 

そのため、リンク先に移動したユーザーにまたサイトに戻ってきてほしい場合や複数のWebページを表示したい場合などに有効な表示方法となります。

 

なお、新しいタブではなく、今表示中のタブに表示したい場合は空欄にするか、「_self」 と入力します。

 

ページ内リンクを作成したい場合

 

HTMLとCSSを知っている人

次にページ内リンクを作成したい場合にどのようにするのかみていきましょう。

 

この手法はWebページの「目次」などに使われることが多く、ハイパーリンクをクリックすることでページの特定の見出しまで簡単に移動することが可能です。

 

「調べたい内容が決まっている」「特定の情報を表示したい」といった、ユーザーの検索意図がはっきりしている場合に、ページ内リンクが役立ちます。

 

<!DOCTYPE html>

<html lang="ja"> 　

<head> 　　

<meta charset="UTF-8">

<title>aリンク</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<a href="#move">ページ内移動をする!</a>

~~~

<h2 id="move">ページ内移動完了!</h2>

</body>

</html>

 

まずはページ内移動させたい場所にid名をつけます。

 

上記では「id=”move”」としています。

 

次にページ内移動をするためのリンクを作成します。

 

上記では「href=”#move”」としています。

 

ここで一つ注意する点として、id名の前に「#」をつけ忘れないようにしましょう。

 

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

 

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

 

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

 

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

 

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

 

HTMLとCSSを知っている人

月額100円程度で利用できるおすすめのレンタルサーバーとして以下のものがあげられます。

 

 

 

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

 

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

 

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

 

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

 

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

 

HTMLとCSSを知っている人

以下のプログラミングスクールもオススメです。

 

是非検討してみてはいかがでしょうか？

 

  1. 侍テラコヤ（初月50%OFF学び応援キャンペーン実施中）（解説記事はこちら）
    ⇒ 学び応援キャンペーンでお得に申し込む!
    ・コスパ最高! 月額2,980円〜利用できる!
    ・単月定額と比べて総額最大44,400円OFF!
    ・学び応援キャンペーン実施中!
  2. ZeroPlus Gate（受講料98,000円がなんと0円!）（解説記事はこちら）
    ⇒ 受講料0円でプログラミングを学ぶ!
    ・受講料0円
    ・現役エンジニアに質問し放題
    ・30日で副業レベルのWebスキルを学べる
  3. 本気のパソコン塾（無料体験特典3つあり）（解説記事はこちら）
    ⇒ 7日間無料体験または無料相談会に申し込む!
    ・実際に役立つウェブデザイン、ウェブプログラミングを身につけることができる
    ・【期間限定】無料相談会参加特典3つあり!
    ・7日間無料体験・無料相談会実施中!

 

 

まとめ

 

HTMLとCSSを知っている人

最後まで読んで頂きまして、ありがとうございました。

 

aタグはよく使用するものであるので、しっかりと理解しておく必要があります。

 

途中で分からないことがあり、中々進まないこともあると思います。

 

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【2022年版】TOEICで600点を取るために使った教材

次の記事

【iPhone12対応】あのAnkerからMagSafeが出た…