じょんの美ライフ

じょんのび~新潟の方言で「のんびり、ゆったり」~

HTMLでのリンクの貼り方と属性・入れ子についてわかりやすく解説

f:id:RakuRakuOwl:20210504205033j:plain

いつも購読いただき、ありがとうございます。

前回の記事で、HTMLのタグについて解説した。 

rakurakuowl.com

 
今回は、タグの具体例として文字や画像にリンクを設定する<a>タグの使い方とタグにおける「属性」と「入れ子」についての解説記事を書いていく。

結論からまとめると、

  • <a>タグはコンテンツに指定したリンクを設定するタグ
  • タグの中に異なるタグが書かれていることを「入れ子」と呼ぶ
  • 開始タグに付け加える情報とその種類を「属性」と呼ぶ


といった内容。

 

 

サンプルコードの作成

サンプルコードは以下のとおり。解説部分には下線をつけている。

【サンプルコード】

   <!doctype html>
   <html lang="jp">
     <head>
       <meta charset="UTF-8">
     </head>
     <body>
       <p>「じょんのび」を<a href="https://google.co.jp">Google</a>で検索</p>
     </body>
   </html>


上記のサンプルを開発アプリの「JavaScript Anywhere(以下、JSAnywhere)」でコーディングする。

 作成したサンプルコードと動作確認の実行結果は以下のとおり。

f:id:RakuRakuOwl:20210518211840j:plain

JSAnywhereで作成したサンプルコード

f:id:RakuRakuOwl:20210518211940j:plain

写真のように表示されれば完成

実行結果の「Google」という部分にリンクが貼られており文字色が青になっている。

リンクが貼られた箇所をクリックするとGoogleの検索画面が開く。

f:id:RakuRakuOwl:20210518215258j:plain

Google」をタップするとGoogleの検索画面に移動する

正直、開発アプリは何でもいいのだが、本ブログでは無料かつ直感的に操作ができて、アプリ内の機能で動作確認も行えるJSAnywhereを使用している。

導入とサンプルデータの作成方法は以下の2記事を参考にしてほしい。

rakurakuowl.com
rakurakuowl.com

 

文法の解説

あらためてサンプルコードの解説部分を抜粋する。

【解説部分】

   <p>「じょんのび」を<a herf="https://google.co.jp">Google</a>で検索</p>


上記サンプルには3つの文法が使われている。


どれもWebページの制作やHTMLファイルを読み解くために必須となる基礎知識ばかりなので、各項目を詳しく解説していく。

 

入れ子」について

サンプルコードを見てみると、文章を表示する<p>タグで囲まれたコンテンツの内側にリンクを貼るためのタグ<a>で囲まれたコンテンツがあることがわかる。

【解説部分】

   <p>「じょんのび」を<a herf="https://google.co.jp">Google</a>で検索</p>

   ・<p>タグで囲まれた部分
       → 「じょんのび」を<a herf="https://google.co.jp">Google</a>で検索
   ・<a>タグで囲まれた部分
       → Google


このように開始タグと終了タグの間に別のタグが入っている状態を「入れ子」と呼ぶ。

リンクタグ<a>以外にも、文字を太くする<strong>タグも入れ子の状態で書かれることが多い。

【サンプルコード2】

   <p><strong>じょんのび</strong>を太字にする</p>

f:id:RakuRakuOwl:20210519223727j:plain

<strong>タグで「じょんのび」を太字に設定したHTMLの実行結果

入れ子を使う時の注意点として、必ず内側のタグから終了タグを書く必要がある。

入れ子における終了タグの正しい順序】

   ○正しい終了タグの順番
   <p><strong>じょんのび
</strong>を太字にする</p>
      →   入れ子になっている(コンピュータ:「OK!」)

   ×間違った終了タグの順番
   <p><strong>じょんのび</p>を太字にする</strong>

      →   入れ子になっていない(コンピュータ:「???」)


これはコンピュータがHTMLファイルを上から順番に読み込んでいくことが原因で、正しい順番でタグを終了しないとコンピュータがタグの始まりと終わりを理解できない。

HTMLファイルがうまく動作しないときは、終了タグの順番を見直すことを心がけよう。

 

「属性」について

次にサンプルコードの<a>タグの部分を見てみると、開始タグ<a>に以下の記載があることがわかる。

【<a>タグの要素を抜粋】

   <a herf="https://google.co.jp">Google</a>


下線部にはリンク先の情報が書かれていて、サンプルではGoogleの検索画面をページの移動先としている。

文字や画像にリンクを設定するからには「どこのリンク先へ移動するか」という情報がなければリンクを貼ることができない。

ので、開始タグに付加情報としてリンク先を書いておく必要がある。

このようにタグに追加で付け加える情報とその種類を「属性」と呼ぶ。

リンクタグ<a>の場合、リンク先のURLを「herf属性」を使って書くことになっている。

 

リンクタグの使い方

ここからは<a>タグの使い方を解説していく。

リンクを設定する基本的な流れは以下のとおり。

  1. リンクを貼りたい箇所(コンテンツ)を<a>タグの開始タグと終了タグで囲む
  2. 開始タグにherf属性としてリンク先の情報を書く


つまり、

<a herf="リンク先">リンクを貼るコンテンツ</a>

となる。

リンクは文字だけではなく、<img>タグで貼り付けた画像にも設定することができる。

以下のサンプルコードでは、本ブログのヘッダー記事にブログトップのURLリンクを設定している。

【サンプルコード3】

   <!doctype html>
   <html lang="jp">
      <head>
         <meta charset="UTF-8">
      </head>
      <body>
         <p>「じょんの美ライフ」のヘッダー画像</p>
         <p><a href="https://rakurakuowl.com">
                   <img src="img/20210520205317.png">
                </a>
         </p>
      </body>
   </html>

f:id:RakuRakuOwl:20210520205544j:plain

ブログのヘッダー画像にブログトップのURL設定をしたHTMLの実行結果

f:id:RakuRakuOwl:20210520211128j:plain

ヘッダー画像を選択することでブログのトップページに移動する

また、リンク先をpdfなどのファイルデータにすることも可能。

近年のWebサイトの各ページには至るところに<a>タグによってリンクが設定されている。

YouTubeで関連動画に出てきた他の動画を見るときや、ネット通販サイトの検索結果から商品ページへ移動する際などあらゆるWebページの移動には<a>タグによるリンクが使われている。

f:id:RakuRakuOwl:20210520215548p:plain

出典:YouTube

f:id:RakuRakuOwl:20210520215611j:plain

出典:【楽天市場】Shopping is Entertainment! : インターネット最大級の通信販売、通販オンラインショッピングコミュニティ

近代の快適なネット閲覧はリンク機能なしでは成り立たないといっても過言ではないだろう。 

 

まとめ

f:id:RakuRakuOwl:20210517224845j:plain

今回の記事をまとめると、

  • <a>タグは文字や画像にリンクを貼るタグ
  • リンク先の情報はherf属性で指定する
  • <a>タグは別のタグの中に書かれた入れ子となることがある


といった感じ。

次回は、画像を挿入する<ing>タグとファイルパスについての解説記事を投稿予定。

ということで、これからも「じょんのび」とブログを更新していくので、次の記事でまたお会いしましょう。最後まで購読いただきありがとうございました.