特定のクラスのスタイルを定義する - クラスセレクターの利用 - CSS

特定のクラスのスタイルをスタイルシートで定義するコードを紹介します。

書式

クラスのスタイルを定義する場合は

.(クラス名){
(スタイル記述)
}

と記載します。クラス名の先頭に"."を記述します。

コード

下記のコードを記述します。

ClassSelector.css

.MyClass1 {
  font-size:18px;
  color:#808080;
}

.MyClass2 {
  background-color: #202020;
  color:#E0E010;
  font-size:14px;
}

.MyClass3 {
  border-bottom: 1px solid #C02020;
  font-size:14px;
}

ClassSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ClassSelector.css" />
</head>
<body>
    <div class="MyClass1">コンテンツ その1 (クラス1)</div>
    <div class="MyClass2">コンテンツ その2 (クラス2)</div>
    <div class="MyClass3">コンテンツ その3 (クラス3)</div>
</body>
</html>

表示結果

上記のHTMLをWebブラウザで表示すると下図の画面が表示されます。クラス名に応じて画面表示のスタイルが違うことがわかります。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

特定のクラスのスタイルを定義する - クラスセレクターの利用 - CSS

書式

コード

ClassSelector.css

ClassSelector.html

表示結果

関連するページ