属性の書き方の基本と、id属性とclass属性の違い、CSSの適用方法
HTMLのタグには「属性」を付けることができます。
属性には、値を指定することができます。
この値を「属性値」と言います。
タグによって付けれる属性・属性値と付けれない属性・属性値があります。
具体例を挙げます。
input要素のtype属性に「text」という属性値を指定しています。
<input type="text">
ol要素のreverse属性に「ture」という属性値を指定しています。
<ol reverse="ture">
・・・といった感じです。
属性と属性値は次のような書き方をします。
属性名="属性値"
「"」はダブルクォーテーションです。
Shiftを押しながら「2 ふ "」のボタンを押すと入力できます。
具体例を見てみましょう。
次のものは<p>タグにid属性を付けて、属性値に「rasberry」を指定しています。
<p id="rasberry">ラズベリー</p>
何のために属性という仕組みがあるのか、疑問に思った方もいるのではないでしょうか？
属性を指定することにより、同じタグでも属性名や属性値を指定したタグと、していないタグでCSSの設定内容を適用させるものと、させないものに分けたりすることができます。
タグにCSSの設定内容を適用させる具体例
次のものは、「flower」というid属性が付いている「pタグ」の文字を「赤色」にするというCSSの設定内容です。
一方、<p>果物</p>は
「flower」というid属性が付いていないので赤色になりません。
p#flower{
color:red;
}
<p>果物</p>
<p id="flower">花</p>
#（シャープ）は、id属性という意味です。
今回ははとりあえず「p#flower」と書くと、「「p要素で、flowerというid属性」という意味なんだな」程度に捉えておいてください。
詳しくはCSSのページで紹介します。
よく使う属性 id属性とclass属性
下記に挙げるid属性、class属性は大半の要素に指定できます。
id属性
1つのhtmlファイルの中で、1つの要素にだけ指定できます。
次の具体例は上に挙げたものと同じです。
<p id="rasberry">ラズベリー</p>
class属性
id属性とは異なり、１つのHTML文書内で2個以上定義できます。
書き方の具体例は次の通りです。
<p class="fruits">ラズベリー</p>
<p class="airplants">キセログラフィカ</p>
