問題
8aタグで様々なリンクを作成しよう
この問題では、aタグを使って様々なリンクを作成していきます。 メールリンクや電話リンクといった数多くのWebサイトで使用されるaタグなのでしっかり覚えていきましょう。
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¥
期待する画面
解答と解説（aタグで様々なリンクを作成しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
画像リンクはimgタグをaタグで囲むことによって、画像からリンクを繋げられます。
メールアドレスのリンクは「mailto:」に続けてメールアドレスを書きます。
最後に電話番号は「tel:」に続けて電話番号を書けばOKです。
ハイフンは必要ありません。
補足
電話番号のリンクはPCの場合クリックしても電話はかかりません。
スマートフォンの場合、電話番号テキストは自動でリンクになります。
aタグは今回の問題のように
様々な場面で使用することができ、とても便利です。
シーンに合わせて使いこなせるようにしておきましょう!
ポイント
aタグを使ったリンク
aタグを使うことで様々なリンクを作ることができます。
画像リンクや自動的にメールソフトを開くメールリンク、スマートフォンなどでワンクリックで電話がかけられる電話リンクなどを作成することができます。
画像リンクとは
画像リンクとは、その名の通り、画像をクリックするとページ遷移ができるリンクのことです。
この画像リンクは、検索エンジンが内容を把握することが難しいと言われています。
その為、画像リンクを設置する際は、必ずalt属性を設定しましょう。
alt属性の値には、リンク先を的確に示すキーワードを入れて、画像の説明を記述しましょう。
