HTMLのstyle属性,id属性,class属性を覚えよう

HTMLのstyle属性、id属性、class属性を覚えてCSSを使えるようになりましょう。

style属性とは？

HTMLには、「style」属性というものがあり、style属性を使うとHTMLのデザインや装飾をすることができます。

CSSとは？スタイルシートの役割を理解しようであるように、HTMLはページの構造を示す文書です。したがって、2017年現在、このstyle属性によるレイアウトや装飾は推奨されておりません。

レイアウトや装飾はCSSで行います。

HTMLでもスタイルを指定することができるということを頭の片隅に置いておきましょう。

使い方は、以下の様になります。

<p style="color:red;">style属性を覚えよう。</p>

要素名の右に半角空白を入れ、「style=””」とし、「” “」の中にcssのプロパティと値を入れます。
これで、CSSと同じスタイルを適用できますが、基本的には使用は控えましょう。

id（アイディー）属性とは？

id属性とは、「identity」の略で、HTMLの要素とCSSを関連付ける為の属性です。

簡単に言えば、「要素に名前を付ける」事です。

しかし、いくつか注意点がありますので、気を付けなければなりません。

まずは、使い方から見ていきましょう。

id属性の使い方

<p id="idの名前">id属性を覚えよう。</p>

要素名の右に半角空白を入れ、「id=””」とし、「” “」の中にidの名前を入れます。
例えば、下記のようなHTMLのコードがあるとします。

<p>通常の文字</p>
<p id="red">赤い文字に装飾します。</p>
<p id="blue">青い文字に装飾します。</p>

両方とも<p>タグですが、それぞれ赤い文字と青い文字等同じ要素でも見た目を変えたいときがあります。

そのような時に使用するのがid属性です。id属性を使うと、その要素に固有の名前を付けることができ、その要素固有のCSSを設定をすることができます。

p{
  color:#000;
}
#red{
  color:red;
}
#blue{
  color:blue;
}

すると、ブラウザの結果は以下の様になります。

使いかたは以下の様になります。

#id名{
  プロパティ:値;
}

要素名ではなく、#(シャープ)id名とします。

これで、固有のCSSを適用することができます。

その他のid属性の指定方法

実は、idをCSSで指定する方法は上記以外にも存在します。

どちらが正解ということはありませんので、使いやすさや会社のルールなどに従って使用してください。

以下、どちらも同じ意味を持つCSSです。下の方は、「要素名」を先頭に指定してあります。

意味合いとしては、「<p>タグに指定してあるredというid」となります。

#red{
  color:red;
}
p#red{
  color:red;
}

id属性を使用するときの注意点

冒頭でも述べたように、id属性は「固有の名前」を付ける為の属性です。

つまり、Webページ（同じページ）に同じid名が2つ以上存在することがあってはいけません。

「identity」とは、固有性、独自性といった意味です。

つまりそのページにおいて「固有の要素」である必要があります。

では、同じCSSを複数の要素に適用したいときはどうすればよいのでしょうか？

class（クラス）属性とは？

同じCSSを複数の要素に適用したいときは、「class属性」を使用します。id属性と違いclass属性は同じページに何個出てきても問題ありません。

使い方は以下の様になります。

class属性の使い方

<p class="classの名前">class属性を覚えよう。</p>

id属性同様、要素の右に半角空白を入れて「class=””」とします。「” “」の中には「classの名前」を入れます。
例えば、下記のようなHTMLのコードがあるとします。

<p>通常の文字</p>
<p id="red">赤い文字に装飾します。</p>
<p id="blue">青い文字に装飾します。</p>

id属性では#を使用しましたが、class属性では、「.(ピリオド)」を使用します。

p{
  color:#000;
}
.red{
  color:red;
}
.blue{
  color:blue;
}

すると、ブラウザの結果は以下の様になります。

その他のclass属性の指定方法

.red{
  color:red;
}
p.red{
  color:red;
}

id属性同様、要素名をクラス名の前に付けて指定する方法もあります。

上下の書き方による違いは、上は「すべてのredクラスが付けられた要素」に適用されるのに対し、下は「p要素に付けられたredクラス」に適用される点です。

うまく使い分けができるようになりましょう。

理解するポイントまとめ

• HTMLは、開始タグ（<>）と終了タグ(</>)を記述する
• タグ（要素）によって意味づけをする
• タグ（要素）には非常に多くの種類がある