プログラミング

【HTML5入門】4-1 アンカータグ(HTMLのリンク)

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、項目情報がセットになったリスト表記について学んできました。

今回は、アンカータグについて学んでいきましょう。

アンカータグとは

アンカータグを学ぶ前に、「アンカー」という言葉の意味を理解しておきましょう。

アンカーは「錨(いかり)」を表す英単語”Anchor“を示しております。船を留めておくためのものです。

Web上におけるアンカーは、「リンクの飛び先」を意味します。そのため、アンカータグは、リンクの飛び先を指定するタグ、ということができます。

アンカータグに使用する2つの属性

アンカータグを作る際に使用する2つの属性があります。それが以下です。

  • href属性
  • id属性

それぞれ順番に確認していきましょう。

href属性

hrefは、「Hypertext Reference」の略で、「リンクの参照先」を意味します。この属性を定義することにより、クリックなどがされたときに指定するWebページへ遷移させることができます。

id属性

idはユーザー管理などで一般的に使われている「ID」とほぼ同義です。id属性となった時の役割としては、「ページの中のある特定の部分に名前をつける」となります。

HTMLに記述してみよう

これら2属性は、文字で理解するよりも、実際に記述するコードから理解した方がわかりやすい部分が多いので、早速、2つの属性を使って、実際にHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>

  </body>
</html>

アンカータグを記述してみよう

では、まずは属性を使うためのアンカータグを用意しましょう。アンカータグの頭文字「a」を用い、コードを下記のように記述してみました。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <a>My Link</a>
  </body>
</html>

この状態でどのようにWebブラウザに表示されるかを確認してみましょう。

「My Link」は表示されましたが、href属性で参照先のURLを指定していないため、クリックしても何も反応はありません。

href属性を用いて、Googleに飛ばしてみよう

今度は、実際に「My Link」をクリックすると、Googleのページに遷移するようにしてみましょう。href属性を用いて、下記のようにGoogleのURLを入力します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <a href="https://www.google.co.jp/">My Link</a>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。

ページを更新すると、文字が青くなり、下線が付きました。これが、href属性が適用されている証です。クリックすると、きちんとGoogleのページに遷移することができています。

id属性を新たに付与してみよう

次に、id属性について見ていきましょう。href属性のリンクの参照先を「index」というidがついた場所にしてみます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <!-- リンクの参照先を#indexに変更> -->
    <a href="#index">My Link</a>
  </body>
</html>

このままですと、indexというidがないので、indexというid属性を持ったpタグを作ってみましょう。同一ページ内の遷移が可能であることを確認するため、間に大量のbrタグを仕込み、それぞれの文章が離れるようにしています。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <a href="#index">My Link</a>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id="index">ここはindexというidがついた場所です</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
  </body>
</html>

このコードにより、下記のようなブラウザの表示になっていると思います。

では、この状態のコードで「My Link」をクリックしてみましょう。以下のような挙動になれば成功です。
このようになったのは、href属性に「idがindexとなっているところを参照する」という役割がついたからです。

href属性の参照先に「#」をつけることによって、HTML上では「id」という意味を持ちます。この表記は、HTMLだけでなく、今後CSSでも使用する知識ですので、ぜひ覚えておいてください。

おわりに

今回は、アンカータグについて見てきました。多くのWebページには、ユーザーがみたいページや場所を参照できるように、href属性やid属性が多く組み込まれています。そういった意味で、今回学んだことは、実務上も非常によく使われる技術といえます。

次の記事はこちら

※鋭意制作中です。

【HTML5入門】3-2 定義リスト(HTMLのリスト表記)

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLにおけるリスト表記の作り方について学んできました。

今回は、項目情報がセットになったリスト表記について学んでいきましょう。

情報がセットになったリスト

リスト表記をする際に、各項目の内容を示したい場合があるかと思います。前回やった「リストの階層」を用いるのも1つの手ですが、ここでは、別のタグを使った方法をご紹介します。

dlタグ

dlタグは、情報がセットになったリスト全体を示すタグとなります。dlの正式名称は「definition list」となり、定義リストと訳されます。

dtタグ

dtタグは、情報の項目名を表記する場合に使用するタグとなります。dtの正式名称は「definition team」となり。定義語を表します。

ddタグ

ddタグは、情報の内容を表記する場合に使用するタグとなります。ddの正式名称は「definition description」となり。定義の説明を表します。

定義リストを使用する具体例

定義リストの使い方はわかっても、現時点では、どのような場合に使用するのかを判断するのが難しいかもしれません。ここでは、定義リストを使用する1つの具体例として、「質問と答え」を表記する場合を考えてみましょう。

HTMLに記述してみよう

では早速、今回学んだ3つのタグを使って、実際に具体例の通りにHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    質問1
    答え1
  </body>
</html>

この状態でWebブラウザを確認すると、下記のように表示されていると思います。

定義リストを作成してみよう

では、まずはdlタグを使用し、記述が定義リストであることを示してみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <!-- dlタグを追加し、定義リストを作成 -->
    <dl>
      質問1
      答え1  
    </dl>
  </body>
</html>

項目と内容を定義してみよう

続いて、dtタグとddタグを使って、項目と内容を定義してみましょう。今回は、「質問1」を項目とし、「答え1」を内容とします。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <dl>
      <!-- dt,ddタグを追加し、定義リストの中身を項目と内容に区別 -->
      <dt>質問1</dt>
      <dd>答え1</dd>  
    </dl>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

「答え1」がインデントされ、質問1との対応関係がわかりやすくなりました。

同様の定義を複数作成してみよう

では、上記のコードを複製して、3つの「質問と答え」を作成してみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <dl>
      <dt>質問1</dt>
      <dd>答え1</dd>
      <!-- 同じような内容を合計3つ作成 -->
      <dt>質問2</dt>
      <dd>答え2</dd>
      <dt>質問3</dt>
      <dd>答え3</dd>
    </dl>
  </body>
</html>

これが実際にどんな表示になるのか、Webブラウザで確認してみましょう。

「問題と答え」のセットが3つ分、それぞれわかりやすく表示されました。

定義リストを使用する理由

今回の「定義リスト」と「リストの階層」のように、リストには、同じように表示させるためにも複数の方法があります。

その中で、定義リストを採用する理由の1つとして、コードの可読性を上げるというものがあります。実際にWebブラウザに表示する際の見え方はそれほど変わりないかもしれませんが、HTMLファイルを見た時に、項目と内容で分かれていることがわかりやすくなり、対応関係の判別が容易になります。

おわりに

今回は、項目情報がセットになったリスト表記について見てきました。今回学んだタグは、一見すると少し使いどころが難しく感じるかもしれませんが、CSSと組み合わせたりする際に、非常に役に立ちます。うろ覚えでも良いので、「定義リストというものがある」ということを、ぜひ覚えておいてください。

次の記事はこちら

【HTML5入門】3-1 リスト項目(HTMLのリスト表記)

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、コード・改行・プリフォーマットについて学んできました。

今回は、HTMLにおけるリスト表記の作り方について学んでいきましょう。

2種類のリスト

HTMLでリスト表記をする場合には、下記の2パターンが考えられます。

  • 順番のかかわるリスト
  • 順番のかかわらないリスト

どちらを適用するかによって、使うタグが異なるので、順番に見ていきましょう。

olタグ

olタグは、順番のかかわるリストを表記する場合に使用するタグとなります。olの正式名称は「ordered list」となります。orderには”順番”という意味合いもありますので、和訳すると「順番付けられたリスト」となります。

ulタグ

ulタグは、順番のかかわらないリストを表記する場合に使用するタグとなります。ulの正式名称は「unordered list」となります。orderにunがついているので、olとは対照的に「順番付けられていないリスト」と解釈することができるでしょう。

liタグ

上記2つのタグでは、それぞれのタグの中身がリストであることを示すことはできますが、実際にリスト化するには、項目を示すためのタグが別に必要になります。それがliタグです。

liタグは「list」の省略で、項目自体を作る際に使用します。

HTMLに記述してみよう

では、今回学んだ3つのタグを使って、実際にHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>

  </body>
</html>

順番のかかわるリストを作成してみよう

では、まずはolタグを使用し、順番のかかわるリストを作成してみましょう。まずはolタグを用意し、その中にliタグで4つほど項目を用意していきます。この時、olタグの中にliタグがあることがすぐにわかるように、インデントを一段下げておきましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <ol>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>3つめ</li>
      <li>4つめ</li>
    </ol>
  </body>
</html>

この状態でWebブラウザを確認すると、下記のような表示になることが確認できると思います。

各項目の最初に番号が振られているのが確認できますね。これはWebブラウザがHTMLに記述してあるolタグを読み取った結果となります。これにより、このリストに順番が付けられていることがわかります。

項目の順番を変えてみよう

では、試しに、項目の順番を変えてみて、表示がどのようになるかを確かめてみましょう。今回は、「3つめ」を項目の一番上に持っていってみます。コードは下記の通り書き換えます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <ol>
      <!-- 「3つめ」を項目の1番上へ -->
      <li>3つめ</li>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>4つめ</li>
    </ol>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

HTMLファイルに記載した通りの順番になったため、olタグで付けられた順番と対応しなくなってしまいましたね。

順番のかかわらないリストにしてみよう

上記のコードで、olタグを使用したままだと、ユーザーが表示を見にくくなってしまうため、olタグからulタグに書き換えてみたいと思います。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <!-- olタグからulタグに変更 -->
    <ul>
      <li>3つめ</li>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>4つめ</li>
    </ul>
  </body>
</html>

実際にどんな表示になるのか、Webブラウザで確認してみましょう。

数字だった部分が”なかぐろ”に変わったことがわかると思います。これにより、順番が関係ないリストであることが判別できるようになりました。

リストの階層を増やしてみよう

リストの中に更にリストを作ることも可能です。これにより、リストが階層で表示されるようになります。

最初に作ったリストをコピーして、一番上の項目の中に、更にulタグを用いてリストを作ってみましょう。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <ul>
      <li>3つめ</li>
      <!-- リストの中に更にリストを追加 -->
        <ul>
          <li>3つめ</li>
          <li>1つめ</li>
          <li>2つめ</li>
          <li>4つめ</li>
        </ul>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>4つめ</li>
    </ul>
  </body>
</html>

これをWebブラウザで確認すると、以下のようになると思います。

リストが別の記号によって階層表示されていれば、OKです。こうした技法を用いることによってわかりやすくなるリスト表示も沢山あります。

おわりに

今回は、HTMLのリスト表記の作り方について見てきました。覚えてしまえばその構造は極めて単純ですが、似たような名前のタグのため、それぞれの名前と使い方をしっかり理解するまでは、何度か自分でリストを作成してみてください。

次の記事はこちら