html5 classを使って同じstyleをまとめる
スタイルを各要素の中にたくさん書くとわかりづらくなってしまいます。 以下のように、同じスタイルを複数の箇所に記載しているときは、classを使えば同じスタイルを１箇所にまとめることができます。
<p style="border:solid 3px green; color:yellow;">トマト</p>
<p style="border:solid 3px green; color:yellow;">ピーマン</p>クラス/class
定義方法
クラスはhtmlのhead部分に記載します。スタイルタグを記載し、その中に先頭にクラスを定義します。 .(ピリオド)をつけて、その後にクラス名を記載します。下記の例では、yasaiというクラスを定義しています。 { }で囲った中にスタイルを記載します
<head>
<title>初めてのホームページ</title>
<meta charset="UTF-8">
<style type="text/css">
.yasai {
border:solid 3px green;
color:blue;
}
</style>
</head>反映方法
今までスタイルを直接記載していた箇所を、先ほど定義したクラスに置き換えます。
<p class="yasai">トマト</p>
<p class="yasai">ピーマン</p>最終的なhtmlは以下になります。
<!DOCTYPE HTML>
<html>
<head>
<title>初めてのホームページ</title>
<meta charset="UTF-8">
<style type="text/css">
.yasai {
border:solid 3px green;
color:blue;
}
</style>
</head>
<body>
<p class="yasai">トマト</p>
<p class="yasai">ピーマン</p>
</body>
</html>クラスとスタイルの優先順位
クラスとスタイルを両方指定した場合は、後が優先されます。 例えば、野菜（yasai）という共通のスタイルのクラスを定義しておき、スタイルで個々の野菜の色を定義するという使い方があります。
<!DOCTYPE HTML>
<html>
<head>
<title>初めてのホームページ</title>
<meta charset="UTF-8">
<style type="text/css">
.yasai {
border:solid 3px green;
color:blue;
}
</style>
</head>
<body>
<p class="yasai" style="color:red;">トマト</p>
<p class="yasai" style="color:green;">ピーマン</p>
</body>
</html>