2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[初心者向け] HTMLのリンク(aタグ)の使い方を分かりやすく解説します!

HTMLのaタグがどのようなものか知りたい人

HTMLのリンク(aタグ)がどのようなものか知りたいな!

この記事は上記のような疑問を解決するものとなっています。

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

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

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

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

1.aタグとは?

aタグとは?

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

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

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




2.aタグの基本的な使い方

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

実行結果

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

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

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




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

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

実行結果

 

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

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

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




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

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

実行結果

 

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




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

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

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

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

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

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

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




6.まとめ

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

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

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

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

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

 

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

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