原文: HTML Link – How to Turn an Image into a Link and Nest Links Inside Paragraphs
段落内にリンクをネストしたり、画像をリンクに変換したいことがあるでしょう。ではそれを HTML でどのように書いたらいいでしょうか？
この記事では、段落内にリンクをネストする方法と、画像をリンクに変換する方法を、コード例を使用して紹介します。
段落タグの中にアンカータグをネストする方法
もし段落内にリンクを加えたかったら、段落タグの中にアンカータグをネストできます。
この最初の例では「I love freeCodeCamp」と言うテキストがあります。
<p>I love freeCodeCamp</p>もし「freeCodeCamp」と言う単語をリンクに変換したかったら、アンカータグで囲みます。
<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>リンクを新しいタブで開くには target="_blank" の属性を加えます。
<p>I love <a target="_blank" href="https://www.freecodecamp.org/">freeCodeCamp</a></p>マウスを「freeCodeCamp」と言う単語の上に重ねると、リンクがあることが分かります。クリックすると、ウェブサイトに移動します。
段落タグの中にリンクをネストすると、ページの主要なコンテンツに関する追加情報をユーザーに案内したい場合に役立ちます。
次の例では、freeCodeCamp のコースについて書かれた段落があります。
<p>I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.</p>初めに、ウェブサイトをユーザーに案内するために「freeCodeCamp」と言う単語をリンクに変換します。
<p>I started learning how to code using <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.</p>それから「Responsive Web Design Course」に別のリンクを追加して、ユーザーをプロジェクトベースのカリキュラムに案内します。
<p>I started learning how to code using <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed their <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>. I am looking forward to starting the JavaScript course soon.</p>最後に、JavaScript コースのためのリンクを追加して、これによってユーザーを JavaScript カリキュラムに案内します。
<p>I started learning how to code using <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed their <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>. I am looking forward to starting the <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/">JavaScript course</a> soon.</p>これはブラウザでの最終結果です:
画像をリンクに変換する方法
HTML では <img> 要素を使用してページに画像を追加することができます。この例では五匹の猫の画像を追加します。
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/>
もしこの画像をクリックできるリンクに変換したかったら、アンカータグの中に入れます。
<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>そのリンクを新しいタブで開くには target="_blank" と言う属性を使うことができます。
<a target="_blank" href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." /></a>マウスを画像の上に重ねると、カーソルの形が変わり、それが猫に関する記事へのリンクであることが分かります。
結論
この記事では、段落内にアンカータグをネストして、画像をリンクに変換する方法を学びました。
段落内にリンクを追加するには、段落タグの中にアンカータグをネストします。
<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>画像をリンクに変換するには、アンカータグの中に img 要素をネストします。
<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>この記事を楽しんでいただけたら嬉しいです。そして、あなたのプログラミングの旅に幸運を祈っています。