HTML 入門トップページ

---

目次

1. ホームページ作成はじめの一歩
2. HTMLの基礎
3. 基礎的なタグをマスターしよう
4. HTML 文書を検証してみよう
5. スタイルシート
   1. CSS ファイルを準備する
   2. CSS ファイルを読み込む
   3. 表示を確認しておこう
   4. CSS にデザインを記述する
   5. 複数のセレクタに適用する
   6. classを使う
   7. 表のデザイン
   8. 図のデザイン
   9. HTML内にスタイルを記述する
6. フォームを使ってみよう
7. 参考サイト

---

スタイルシート

classを使う

class は特定の（いくつかの）要素にだけスタイルを適用したいときに，それらの要素を特定するために付ける名前であると理解すると良いでしょう．例えば，次のとおりアンケート結果の箇条書き各項目に positive または negative の class のどちらか一方指定してみます．これによってアンケートの結果を2つの種類に分けることを考えます．

index.html（抜粋）コピー
<h2>アンケート結果</h2>
<ul>
  <li class="positive">将来性がありそう</li>
  <li class="negative">残業が多そう</li>
  <li class="positive">自分のやりたい仕事ができそう</li>
  <li class="positive">給料が高い</li>
  <li class="negative">ブラックかも</li>
</ul>

スタイルシートには positive と negative のそれぞれに異なったスタイルを記述してみます．なお，セレクタに class を指定するときには先頭にピリオド (.) を付ける必要があることに注意しよう．

style.css（抜粋）コピー
.positive {
  font-weight: bold;
}

.negative {
  font-style: italic;
}

ブラウザで表示すると，次にようになります．クラスごとに異なったスタイルが適用されていることが確認できるでしょう．

さらに，<span> を使って，任意の範囲にスタイルを適用できることも確認しておこう．

index.html（抜粋）コピー
<h2>アンケート結果</h2>
<ul>
  <li class="positive"><span class="keyword">将来性</span>がありそう</li>
  <li class="negative"><span class="keyword">残業</span>が多そう</li>
  <li class="positive">自分の<span class="keyword">やりたい仕事</span>ができそう</li>
  <li class="positive"><span class="keyword">給料</span>が高い</li>
  <li class="negative"><span class="keyword">ブラック</span>かも</li>
</ul>

style.css（抜粋）コピー
.keyword {
  background-color: #FFFF00;
}

---