ここではHTMLの要素に付随する「属性」というものについてお話していきます。
コンテンツ
HTMLの属性って何？
代表的な属性は、class属性とid属性だと思います。例えば、こんな感じのタグを見かけたことはありませんか？
HTML
<div class="example">・・・</div> <div id="example">・・・</dv>
この要素の開始タグのところにあるclass="example"とかid="example"というのが属性です。
属性は、「属性名=”属性値”」という形式で要素の開始タグに記入します。属性の種類によって役割が全く違うので、「属性とは・・・」という言い方が難しいので具体例で見ていきましょう。属性って実はめちゃくちゃいろんな種類があります。理解するのが面倒くさくなるほどありますので、ここでは良く使いそうなもの・把握しておいた方が良さそうなものに絞ってご紹介していきます。よろしくお願いします。
グローバル属性
グローバル属性というのは、どんなHTMLの要素にも使える属性のことです。こちらの方が数が少ないのでまずは、グローバル属性から見ていきましょう。
class属性
class属性はスタイルシートでデザインを適用させたいときなどに使われる属性です。スタイルシートを少しでもかじったことがある方ならclass属性は大丈夫ですね。
id属性
id属性は、class属性とほとんど同じようなものと思っていただいて大丈夫ですが、「固有である」という点が違います。同じid名を１つのページに複数回使用することはできません。また、スタイルシートを適用させた場合、class属性よりも優先的に適用されるようになります。
style属性
要素に直接スタイルシートを入力したいときに使う属性です。style="プロパティ:値;"という形で開始タグの中に入力していきます。スタイルシートに記入するときと違うのはセレクタを書く必要がないという点です。このタグに直接記入したスタイルの方が外部ファイルから読み込まれたスタイルよりも優先的にデザインが適用されます。
draggable属性
要素がドラッグできるかどうかを指定できる属性です。属性値はtrue（ドラッグ可）とfalse（ドラッグ不可）の２つです。
draggable=”true”
draggable=”false”
上の画像は左がドラッグ可能、右がドラッグ不可です。
contenteditable属性
contenteditable属性はサイトの訪問者がページの一部を編集できるようにする属性です。属性値はtrue（編集可）とfalse（編集不可）の２つです。
例えば、このテキストは編集できます。カーソルを合わせて文字を編集してみてください。ただし、ページを再読込してしまうと元に戻ってしまいます。
コンテキストメニューを指定する属性ですが、ブラウザがあまり対応していないようなので、ここでは概要の説明のみに留めておきます。
その要素が関連性のない要素である場合に使います。値(hidden)は省略可なので、開始タグにhiddenのみを記入します。どういう使い道があるのかいまいち不明ですが、使う場合は細かいルールもあるようなので気をつけてくださいね。
dir属性
日本語のように横文字のテキストを左から右へ読むのではなく、右から左に読む言語を扱う場合などにこの属性で読む方向を指定します。
lang属性
どこの国の言語なのかを指定するものです。一応グローバル言語に分類されていますが、基本的にhtml要素に<html lang="ja">（日本語の場合）という形で記入するのが一般的です。
tabindex属性
tabindex属性は、キーボードの「Tab」キーを押したときにテキストリンクなどが選択される順番を指定する属性です。値のところに整数を入力すると、数字が少ない順に選択される仕組みです。
title属性
要素に補足情報を入れるときに使う属性です。画像に補足情報を入れたり、テキストリンクの場合はリンク先のタイトルを入れたりします。特別、これを入れるとSEOが有利になったりといったものでもないようなので、把握だけしておいてもらえればいいと思います。
translate属性
翻訳できる要素なのかどうかを設定する属性です。初期値は、翻訳可（yes）になっているので特別な理由がない限り、特に設定の必要はありません。でも、例えば要素の内容がソースコードだったりした場合、翻訳されてしまうと変な文章になってしまうこともあります。そういうときにtranslate="no"と設定します。
spellcheck属性
スペルをチェックする属性のようですが、日本語不対応なのでここでは省略します。
以上がグローバル属性でした。次に、グローバル属性でない属性の一部をご紹介します。
グローバル属性でないもの
グローバル属性は種類が少なかったのでいろいろ説明してきましたが、グローバルでない属性は種類がとても多いので代表的なもののみ（独断と偏見ですが・・・）を説明していきます。特筆すべき属性については、別の機会に個別の記事でお話していきたいと思います。
alt属性
画像が表示されない場合の代替テキストの設定をする属性です。
HTML
<img src="URL" alt="画像の代替テキスト">
alt属性はSEOの観点からも設定が必要な属性と言われていますので、画像を設定した際はできるだけalt属性で何の画像なのかを入れておきましょう。
charset属性
文字エンコードを宣言する属性です。meta要素内に入力してHTML全体のエンコードを指定する場合や、script要素内に入力してscriptのエンコードを指定する場合に使います。
color属性
カラー属性はbasefont要素、font要素、hr要素に使われます。特に必要がなければ色の設定はスタイルシートで行った方が良いですね。
colspan属性
td要素とth要素に使います。テーブルレイアウトの中でセルを横に結合したいときに使う属性です。colspan="2"という形で値のところに数字を入力すると、数字の数だけ横にセルが結合します。
rowspan属性
上記と同じようにtd要素とth要素に使います。テーブルのセルをタテに結合したいときにrowspan="2"という形で結合したいセルの数を数字で指定します。
content属性
meta要素の中でそのページの説明を記入する属性です。SEO上、重要な属性と言われています。
name属性
要素に名前を付けるための属性です。
href属性
昔、「ハレフ」と読んでいたことがありましたが、「エイチレフ属性」と呼びます。リンク先を設定する属性です。テキストリンクのこの部分ですね。
HTML
<a href="リンク先">テキスト</a>
src属性
img要素などに入れて画像URLを参照させる属性です。
HTML
<img src="画像URL">
target属性
a要素などに入れてリンク先を同じウィンドウで開くか、新しいウィンドウで開くかなどを設定します。
type属性
type属性は良く見かける属性ですが、用途目的が広いので「こういう属性です」という定義が難しい属性です。名前から何かのタイプを指定する属性ということは分かりますね。
とてもざっくりとして説明でしたが属性というのがどんなものかお分かりになっていただけたと思います。属性も要素と同じくそれぞれの使い方を覚えていかなくてはいけないものなので、少しずつ覚えていけば良いと思います。
