HTML
LINEでログイン
Googleでログイン
Twitterでログイン
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
①画像リンク
・リンク設定する画像: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¥
補足
電話番号のリンクはPCの場合クリックしても電話はかかりません。
スマートフォンの場合、電話番号テキストは自動でリンクになります。
aタグは今回の問題のように
様々な場面で使用することができ、とても便利です。
シーンに合わせて使いこなせるようにしておきましょう!
スマートフォンの場合、電話番号テキストは自動でリンクになります。
aタグは今回の問題のように
様々な場面で使用することができ、とても便利です。
シーンに合わせて使いこなせるようにしておきましょう!
完了にする！
活動記録をTweetする
メールアドレスのリンクは「mailto:」に続けてメールアドレスを書きます。
最後に電話番号は「tel:」に続けて電話番号を書けばOKです。
ハイフンは必要ありません。