.(クラス名) .(クラス名) .(クラス名) .(クラス名) .(クラス名) のようにスペースを開けて複数
クラスを記述した場合はサブクラスの定義となります。詳しくは、こちらの記事を参照してください。
特定のクラスのスタイルをスタイルシートで定義するコードを紹介します。
クラスのスタイルを定義する場合は
以下の記述をします。クラス名の先頭に"."を記述します。
.(クラス名){
(スタイル記述)
}
.(クラス名) .(クラス名) .(クラス名) .(クラス名) .(クラス名) のようにスペースを開けて複数
クラスを記述した場合はサブクラスの定義となります。詳しくは、こちらの記事を参照してください。.MyFrame {
font-size:1.2rem;
}
.AttentionCaption {
font-size:0.8rem;
font-weight:700;
}
クラス名の名前のつけかたは、デザイン上の呼称よりも要素の意味を命名したほうが良いです。
エラーメッセージのスタイルを赤いテキストで表現する場合、"red-text"と命名するのではなく、"error-message" のように
意味を命名するほうが適切です。
.error-message {
color: red;
}
.red-text {
color: red;
}
下記のコードを記述します。
.MyClass1 {
font-size:18px;
color:#808080;
}
.MyClass2 {
background-color: #202020;
color:#E0E010;
font-size:14px;
}
.MyClass3 {
border-bottom: 1px solid #C02020;
font-size:14px;
}
<!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ブラウザで表示すると下図の画面が表示されます。クラス名に応じて画面表示のスタイルが違うことがわかります。
