W3School TIY Editor
W3CSTUDY オンライン チュートリアル
方向を変更
ダーク モード
コードの実行
<!DOCTYPE html> <html> <head> <style> /* ID が「myHeader」の要素のスタイルを設定します */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* クラス「city」を持つすべての要素のスタイルを設定します */ .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h1>クラスと ID の違い</h1> <p>クラス名は複数の HTML 要素で使用できますが、ID 名はページ内の 1 つの HTML 要素でのみ使用できます。</p> <!-- 一意の ID を持つ要素 --> <h1 id="myHeader">私の街</h1> <!-- 同じクラス名を持つ複数の要素 --> <h2 class="city">上海</h2> <p>中国最大の経済都市。 </p> <h2 class="city">深セン</h2> <p>中国で最も革新的な都市。 </p> <h2 class="city">北京</h2> <p>中国の首都。 </p> </body> </html>