スタイル指定の幅を広げる方法
htmlファイル
——————————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページのタイトル</title>
<link rel="stylesheet"type="text/css"href="style.css">
</head>
<body>
<h1 id="title">ホームページの見出し</h1>
<p class="bg-color1">これは段落です</p>
<h2 class="bg-color1">これは２番目の見出しです。</h2>
<p>これは２番目の段落です。</h2>
</body>
</html>
——————————————————————
cssファイル
——————————————————————
#title{
background:#333;
padding:15px;
color:white;
}
.bg-color1{
background:#f6f5f5;
}
p.bg-color1{
color:red;
}
——————————————————————
解説
- id属性、class属性をつけることで、タグに名前をつけられる
- タグに名前を付けることで、スタイル指定を細かく設定できる
- id属性をつける場合：htmlファイルでは指定のタグに「id="名前"」、cssファイルでは「#名前{プロパティ名 : 値}を入力
- class属性をつける場合：htmlファイルでは指定のタグに「class="名前"」、cssファイルでは「．名前{プロパティ名 : 値}を入力
id属性とclass属性の違い
- id属性は、同ファイル内で重複した名前を指定できない
- class属性は、同ファイル内で重複した名前を指定できる
cssファイル
——————————————————————
#title{
background:#333;
padding:15px; → 余白
color:white;
}
→id属性「title」がついたタグの背景色を指定色に変更し、余白を15pxに設定し、文字色を白に指定
——————————————————————
.bg-color1{
background:#f6f5f5;
}
→class属性「bg-color1」がついたタグの背景色を指定の色に変更
——————————————————————
p.bg-color1{
color:red;
}
→class属性「bg-color1」がついたpタグを「赤」に指定
——————————————————————
- bg＝background（背景）の略
補足
上記内容は複雑なので、もう少し噛み砕くと
例えば、下記htmlファイルで、Bだけを赤文字にしたい時
——————————————————————
<p>A</p>
<p>B</p>
<p>C</p>
——————————————————————
cssファイルで以下のように入力すると
——————————————————————
p{color:red;}
——————————————————————
pタグ全てにスタイルが適用されてしまうので、下記のようになる。
——————————————————————
A
B
C
——————————————————————
そこで、スタイルを適用したい箇所に「class="color1"（class属性）」をつけ
——————————————————————
<p>A</p>
<p class="color1">B</p>
<p>C</p>
——————————————————————
cssファイルにも「.color1（class属性＋名前）」を指定することで
——————————————————————
.color1{color:red;}
——————————————————————
「class="color1"」が付いた「B」だけが赤文字になる。
——————————————————————
A
B
C
——————————————————————
Cだけを青くしたい場合も、同じようにclass属性をつける（名前は変える）
——————————————————————
<p>A</p>
<p class="color1">B</p>
<p class="color2" >C</p>
——————————————————————
cssファイルも同じようにclass属性「color2」を指定することで
——————————————————————
.color1{color:red;}
.color2{color:blue;}
——————————————————————
Cだけを青文字に指定できる。
——————————————————————
A
B
C
——————————————————————
