最新のWeb開発のチュートリアル

HTMLクラス


使用するclass属性を

HTMLのclass属性は、同じクラス名を持つ要素のために同じスタイルを定義することが可能となります。

ここでは、3持っている<div>同じクラスの名前を指すの要素を:

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>
»それを自分で試してみてください

ロンドン

ロンドンはイギリスの首都です。 それは13万人を超える住民の首都圏で、イギリスで最も人口の多い都市です。

テムズ川の上に立って、ロンドンは、その歴史はロンディニウムそれを命名ローマ人、によって創立に戻って、2千年のための主要な決済となっています。

パリ

パリはフランスの首都で最も人口の多い都市です。

セーヌ川沿いに位置する、それはまた、地域のパリジェンヌとして知られ、イルドフランス地域の中心です。

その首都圏の中で12万人以上の住民で、ヨーロッパで最大の人口密集地の一つです。

東京

東京は日本の首都、首都圏エリアの中心、世界で最も人口の多い首都圏です。

これは、日本政府と皇居の座席、そして日本の皇室の家です。

東京都38万人と世界最大の都市の経済と、世界で最も人口の多い首都圏の一部です。


使用するclassインライン要素の属性を

HTMLクラス属性もインライン要素のために使用することができます。

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
»それを自分で試してみてください

練習で自分自身をテストします!

演習1» 演習2» 演習3»