ログイン
問題8

aタグで様々なリンクを作成しよう

この問題では、aタグを使って様々なリンクを作成していきます。 メールリンクや電話リンクといった数多くのWebサイトで使用されるaタグなのでしっかり覚えていきましょう。

アイコン画像

本のアイコンaタグを使ったリンク

aタグを使うことで様々なリンクを作ることができます。
画像リンクや自動的にメールソフトを開くメールリンク、スマートフォンなどでワンクリックで電話がかけられる電話リンクなどを作成することができます。

本のアイコン画像リンクとは

画像リンクとは、その名の通り、画像をクリックするとページ遷移ができるリンクのことです。

この画像リンクは、検索エンジンが内容を把握することが難しいと言われています。
その為、画像リンクを設置する際は、必ずalt属性を設定しましょう。
alt属性の値には、リンク先を的確に示すキーワードを入れて、画像の説明を記述しましょう。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題8:aタグで様々なリンクを作成しよう

aタグを使って下記指定のリンクを作成してみましょう。

①画像リンク
・リンク設定する画像:https://ninjacode.work/assets/img/kv.png
・リンク先のURL:https://ninjacode.work/
②メールアドレスへリンクを張る
・アドレス:ninjacode:info@ninja.com
②電話番号へリンクを張る
・電話番号:0301234567

エディターのアイコンあらかじめエディタに書くコード

                <!-- 画像 -->
<a href=""></a>
<!-- メール -->
<a href="">メールを送る</a>
<!-- 電話 -->
<a href="">電話をかける</a>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <!-- 画像 -->
<a href="https://ninjacode.work/"><img src="https://ninjacode.work/assets/img/kv.png" alt="忍者CODEの画像"></a>
<!-- メール -->
<a href="mailto:ninjacode:info@ninja.com">メールを送る</a>
<!-- 電話 -->
<a href="tel:0301234567">電話をかける</a>
¥HTML¥
            

コメントのアイコン解説

画像リンクはimgタグをaタグで囲むことによって、画像からリンクを繋げられます。

メールアドレスのリンクは「mailto:」に続けてメールアドレスを書きます。

最後に電話番号は「tel:」に続けて電話番号を書けばOKです。
ハイフンは必要ありません。
ログインして解答を見る

コメントのアイコン補足

電話番号のリンクはPCの場合クリックしても電話はかかりません。
スマートフォンの場合、電話番号テキストは自動でリンクになります。

aタグは今回の問題のように
様々な場面で使用することができ、とても便利です。
シーンに合わせて使いこなせるようにしておきましょう!
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる