HTML クラス

HTMLを分類（クラスを設定）して、要素のクラスに対してCSSスタイルを定義することができます。

同じクラスに対して同じスタイルを設定したり、異なるクラスに対して異なるスタイルを設定することができます。

例

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>ロンドン</h2>
<p>
ロンドンはイングランドの首都です。 
これはイギリスで最も人口が多い都市です。 
1300万人以上の大都市地域を有しています。
</p>
</div> 
</body>
</html>

自分で試してみる

ブロック要素に分類されます

HTML <div> 要素はブロック要素。他の HTML 要素のコンテナーとして使用できます。

クラスを設定して、同じ <div> 要素に同じクラスを設定することができます：

例

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>ロンドン</h2>
<p>ロンドンはイングランドの首都です。 
これはイギリスで最も人口が多い都市です。 
13百万以上の人口を持つ都市地域があります。</p>
</div>
<div class="cities">
<h2>パリ</h2>
<p>パリはフランスの首都で、人口が最も多い都市です。</p>
</div>
<div class="cities">
<h2>東京</h2>
<p>東京は日本の首都であり、大東京地域の中心地です。</p>
そして世界で最も人口が多い都市地域。</p>
</div>
</body>
</html>

自分で試してみる

インライン要素に分類

HTML <span>要素はインライン要素であり、テキストのコンテナーとして使用できます。

要素のクラスを設定することで、同じ要素に同じスタイルを適用できます。

例

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

自分で試してみる