コーディング

本気で学ぶ！HTML入門#02

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

HTML入門#2

「HTML入門」の2回目はHTMLの属性と属性値について学習しましょう。

今回の目標は、「属性とは何か」と「属性の書き方を覚える」です。

なんだか難しそうですね。

もし、HTMLの基本的な書き方や、そもそもHTMLって何？という方は先に、HTMLとは何か？HTMLの基本を学習しよう！を見ておいて下さい。

HTML入門#01

【HTML入門】HTMLとは何か？HTMLの基本を学習しよう！

  • date_range

目次

  1. HTMLの属性と属性値とは
  2. 属性の種類
  3. 【演習】lang属性を使ってみよう！
  4. まとめ

HTMLの属性と属性値とは

HTMLの要素には、属性というもの付ける事ができます。
この属性とういのは、その要素の何かしらの設定をつけるようなものと思っておいてください。

属性の書き方は以下の通りです。 

<要素名 属性="属性値">

ポイントは

  • 開始タグの要素名の後ろに半角スペースを開ける
  • 属性の後ろに=（イコール）を付ける
  • 属性値は"（ダブルクオート）で囲む

今回は、この属性の書き方を覚えましょう。

なお、属性値を囲む引用符は、'（シングルクオート）でも構いませんが、一般的に"（ダブルクオート）を使います。

あと、よく引用符を閉じ忘れて、うまく表示されないという人が多いので、属性値は引用符で囲むという事を覚えておいて下さい。

では、サンプルを書いてみます。

例えば、要素内の文章が何語かを指定する「lang」という属性があります。

そのlang属性に「ja（日本語）」という属性値を指定してみます。

一般的にこの属性は、「html要素」に指定する事が多いので、html要素に指定した例を紹介します。

属性のサンプル

<html lang="ja">

こんな感じです。
これで、「html内の言語は日本語です。」という設定にできました。

このように、要素名のところは「◯◯の」、属性のところは「◯◯は」、属性値は「◯◯です」と置き換えて読めばどんな設定かわかりやすくなります。

なので、 

<◯◯の ◯◯は="◯◯です">

という感じで覚えましょう。

なお、属性は複数指定する事も可能です。

その場合は、属性="属性値"を半角スペースで区切って記述します。 

<要素名 属性1="属性値1" 属性2="属性値2" 属性3="属性値3">

最初はややこしいですよね。
最初にも述べましたが、とりあえず「属性は、要素に何か設定を付けもの」と思っておいて下さい。

属性の種類

属性には、その要素固有の属性と、どの要素にでも指定できるグローバル属性の2種類があります。

要素固有の属性に関しては、その要素を紹介するタイミングで合わせて紹介するとして、ここでは、グローバル属性を紹介しようと思います。

グローバル属性

HTML5では以下のグローバル属性が使えます。ちなみに今はさらっと目を通すだけで大丈夫です。

たくさんありますし、ややこしいものもありますからね・・・。

id属性
要素に固有の名前を指定する属性。主にページ内のリンクを設定する際や、CSS（視覚的な表現を行なう言語）でデザインを行なう際などに使用する。属性値は任意の文字列を指定できる。使用できる文字は、半角英数字とハイフン（-）、アンダーバー（_）、コロン（:）、ピリオド（.）だが、一般的に記号はハイフン（-）、アンダーバー（_）しか使わない。なお、先頭の文字は数字から始めてはいけない。また、１ページの中に同じid名（属性値）が存在してはいけない。

<p id="apple">りんご</p>
class属性
要素に分類名（種類）を指定する属性。主にCSS（視覚的な表現を行なう言語）でデザインを行なう際などに使用する。属性値は任意の文字列を指定できる。使用できる文字は、半角英数字とハイフン（-）、アンダーバー（_）。なお、先頭の文字は数字から始めてはいけない。半角スペースで区切る事で複数の分類名を指定可能。

<p class="fruit red">りんご</p>
title属性
要素に補足情報を指定する属性。主にリンクをする際にリンク先の情報を記す目的で使用する。属性値には補足情報を文字列で指定できる。マウスオーバーの際に表示するブラウザもある。

<p title="赤い果物">りんご</p>
lang属性
要素内の言語を指定する属性。主にhtml要素や、ページ内に複数の言語が存在する際に使用する。属性値には言語コードを指定する。なお、日本語は「ja」と指定する。

<p lang="ja">りんご</p>
style属性
要素内にスタイル（デザイン）を直接指定する属性。属性値にはCSS（視覚的な表現を行なう言語）の「プロパティ: 値」を指定する。なお、CSSは外部のファイルで定義する事が推奨されている為、あまり使わない。

<p style="color: red;">りんご</p>
accesskey属性
要素にアクセスキー（ショートカットキー）を指定する属性。主にフォーム部品使用する。なお、ブラウザのショートカットキーと競合しないように注意が必要。またブラウザによって操作方法が異なる。WindowsのInternet Explorerの場合は[Alt] + [アクセスキー]。MacのSafariの場合は[alt] + [control] + [アクセスキー]

<p accesskey="a">りんご</p>
tabindex属性
要素に[Tab]キーによるフォーカスの移動順序を指定する属性。主にフォーム部品使用する。

<p tabindex="1">りんご</p>
dir属性
要素の文字表記の方向を指定する属性。属性値には以下の3つがある。

  • ltr：left to rightの意味で左から右を表す（日本語や英語など）
  • rtl：right to leftの意味で右から左を表す（アラビア語やヘブライ語など）
  • auto：自動で判断させる。誤った解釈になる可能性があるので最終手段
<p dir="ltr">りんご</p>
contenteditable属性 [HTML5 新]
要素が編集が可能かどうかを指定する属性。尚、編集した人の環境のみで反映される。属性値には以下の2つがある。

  • true：編集可能
  • false：編集不可
<p contenteditable="true">りんご</p>
draggable属性 [HTML5 新]
要素がドラック可能かを指定する属性。属性値には以下の3つがある。

  • true：ドラック可能
  • false：ドラック不可
  • auto：ブラウザで定義された値になる（初期値）
<p draggable="true">りんご</p>
dropzone属性 [HTML5 新]
要素内にドロップした時の挙動を指定する属性。属性値には処理方法と、アイテムの種類を指定する
[処理方法]

  • copy：コピー
  • move：移動
  • link：リンク

[アイテムの種類]

  • s:~：文字列
  • f:~：ファイル
<p dropzpne="copy f:image/gif f:image/jpeg f:image/png">ここに画像をドロップして下さい</p>
spellcheck属性 [HTML5 新]
要素のスペルチェックを行なうかを指定する属性。主にフォーム部品や、contenteditable属性を「true」にした要素に使用する。ただし、日本語には対応していない。属性値には以下の2つがある。

  • true：スペルチェックを行なう
  • false：スペルチェエクを行なわない
<p spellcheck="true" contenteditable="true">りんご</p>
translate属性 [HTML5 新]
要素の翻訳可否を指定する属性。主にローカライズ時に翻訳されるとおかしくなるプログラムコードなどに使用する。属性値には以下の2つがある。

  • yes：翻訳する（初期値）
  • no：翻訳しない
<p translate="no">Apple</p>
hidden属性 [HTML5 新]
要素が今は無関係であることを指定する属性。主に今は関連性がなく、後ほど関連するかもしれない要素に使用する。属性値は「hidden」（省略可）のみである。

<p hidden>りんご</p>
contextmenu属性 [HTML5 新]
要素をどのコンテキストメニュー（右クリックで開くメニュー）と関連付けるかを指定する属性。この属性を使用する際は、別途「menu要素」に「id属性」でid名を指定したコンテキストメニューを作成する必要がある。その「id名」を「contextmenu属性」の属性値に指定する。

<p contextmenu="menu-apple">りんご</p>
<menu type="context" id="menu-apple">
  ・・・
</menu>
data-*属性 [HTML5 新]
要素に独自のデータを指定する属性。この属性は「data-」の後ろに1文字以上の任意の文字列（半角英数字）を記述し属性名とする。属性値には、任意の文字列を指定する。

<p data-pref="aomori">りんご</p>

「こんなに覚えられねー。」

って感じだと思いますが、「ふ〜ん。こんなのがあるんだー。」で今は大丈夫です。

よく使う属性は、自ずと覚えます。

【演習】lang属性を使ってみよう！

では、実際に属性を使ってみましょう。
今回は、上のサンプルと同様でhtml要素に「lang属性」をつけてみましょう。

index.htmlを開き、lang属性を追記

  1. 前回作ったHTMLファイル（index.html）をテキストエディタで開きましょう。
    （テキストエディタでHTMLファイルを開くときは、そのファイルをテキストエディタの画面内か、アイコンにドラッグ＆ドロップしたら開けましたね。）

  2. 下記を参考に、1行目のhtml要素に「lang属性」を追記してみましょう。

    <html lang="ja">
  <head>
    <title>ここにタイトル</title>
  </head>
  <body>
    <p>ここに本文を入れる</p>
  </body>
</html>
  3. 記述できたら、上書き保存しておきましょう。

  4. ブラウザで確認（index.htmlをダブルクリック）
    (見た目に何も変更はないですが、ちゃんと表示されているブラウザでも確認しておきましょう。)

できましたか？

まとめ

今回は、要素に何かしら設定をつけれる「属性」というのを学びました

属性にはたくさんの種類がありますが、まずは「属性」や「属性値」が何であるかということと、その書き方（フォーマット）を覚えましょう。 

<要素名 属性="属性値">

属性値の引用符の閉じ忘れに気をつけて下さいね

では次回は、HTMLのバージョンとDOCTYPE宣言について学習しましょう。

HTML入門#3

【HTML入門】HTMLのバージョンとDOCTYPE宣言

  • date_range