問題

8
HTML

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

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

ポイント

aタグを使ったリンク

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

画像リンクとは

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

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

HTMLの問題に挑戦しよう!

問題

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¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

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

補足

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

aタグは今回の問題のように
様々な場面で使用することができ、とても便利です。
シーンに合わせて使いこなせるようにしておきましょう!

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET