本講座ではHTMLの属性について学んでいきます。

属性とは?

属性とは、HTMLタグに様々な機能を追加できるものです。
全てのHTMLタグに設定できる属性もあれば、特定の要素にのみ設定可能な属性もあります。

属性の働き

属性の働きを見てみましょう。

私たちはこれまでに、いくつかのリンクを設置してきました。
index.htmlからlink.htmlに対してリンクしている記述を見てみましょう。

<a href="./link.html">はじめてのリンク</a>

これによって"はじめてのリンク"という文字列が表示され、その文字列をクリックすることでlink.htmlに遷移することができましたね。

この「link.htmlに遷移する」機能が、属性によって追加された機能です。

上のHTMLの中ではhrefが属性にあたります。
このhrefがなければaタグはリンクとして機能しません。

属性を追加してみよう

リンクにもう1つ属性を追加してみましょう。
属性は対象のHTMLタグに設定可能なものであれば、いくつでも追加できます。

まず、index.htmlにGoogleへのリンクを設置してみましょう。 ※

  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/">Googleへ</a>

ひとまずこの状態で動作を確認してみます。

Googleへのリンクを追加 Googleへ遷移

Googleへ遷移すれば完璧!です。

続いて、Googleへのリンクを以下のように変更してみます。

  <a href="https://www.google.co.jp/" target="_blank">Googleへ</a>

もう一度動作を確認してみましょう。

Googleへのリンクを追加 Googleを別タブで表示

Googleが別タブで開いたでしょうか?

このようにaタグにtargetという属性を追加することで、リンク先の表示場所を変更する機能を追加することができます。


Googleのホームページへアクセスし、urlをコピーしてhrefの値に設定します。
このように、完全なurlを指定することでもリンクとして機能します。

属性の追加方法

属性はHTMLタグの中に追加します。
各属性は半角スペースで区切り、属性="値"という形で設定します。

属性の種類

いくつかの属性を見ていきましょう。

href

参照するファイルや機能などを指定するための属性です。
aタグなどのいくつかのタグに設定が可能です。

target="URL"という形でaタグに設定すると、リンクとして機能させることができます。

hrefは「hypertext reference」の略である、というのが有力のようです。

target

リンクなどの画面遷移を伴う機能において、どの画面で表示するかを指定するための属性です。
aタグなどのいくつかのタグに設定が可能です。

値に_blankを指定すると、リンク先などが別タブで表示されるようになります。

target属性は初期値を持っており、target属性を指定しない場合は初期値が自動で設定されます。
target属性の初期値は_selfで、リンク先などが自画面に表示されます。

style

要素の見た目を調整するcssを記述するための属性です。
全てのHTML要素に設定が可能です。

src

画面に埋め込むコンテンツのURLを指定するための属性です。
imgタグなどのいくつかのタグに設定が可能です。

src="URL"という形でimgタグに設定すると、画面内に画像を表示させることができます。

srcは「source」の略です。

class

HTML要素をグループ分けするために用いる属性です。 ※
全てのHTML要素に設定が可能です。

<h1 class="heading">見出し1</h1>
<h2 class="heading">見出し2</h2>

このように設定すると、h1要素とh2要素は同じグループとして扱われます。


グループ分けする理由は次の講座で取り上げます

id

HTML要素を一意のものであると意味づけするために用いる属性です。
全てのHTML要素に設定が可能です。

id属性に設定する値はそのHTML内で一意でなければなりません(= 値が重複してはいけない)。

HTML要素を一意にすることで利用できる機能として、例えばページ内リンクがあります。
HTML要素の位置が特定できるため、リンク機能を使用してその位置に移動できます。
当記事の右側に出ている見出しリンクもこの機能を使用しています。

まとめ

本講座では

  • HTML属性の働き
  • 属性の追加方法
  • 一部属性の紹介

について学びました。

HTML属性にはあなたのサイトを使いやすくする機能がたくさんあります。
まずは属性の基礎を押さえて、便利な属性を使っていきましょう。

最終コード

  • index.html
<!doctype html>
<html>
<head>
  <title>はじめてのHTML</title>
</head>
<body>
  <h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank">Googleへ</a>
</body>
</html>
  • link.html
<!doctype html>
<html>
<head>
  <title>はじめてのリンク</title>
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html>
<head>
  <title>HTML入門課題</title>
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...