スタイルを指定する（id・class属性）
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">これは2番目の見出しです</h2>
</body>
</html>
==============
cssファイル
==============
#title{
background: #333;
padding: 15px;
color: white;
}
.bg-color1{
background: #f6f5f5;
}
p.bg-color1{
color: red;
}
==============
解説
・id属性、class属性を指定することでタグに名前を持たせられる。
＞タグに名前を持たせることで、細かくスタイル指定ができる
・id属性 or class属性をつける場合
htmlファイルでは指定のタグに「id or class="名前"」
cssファイルでは「#名前{プロパティ名: 値;}」を入力
・id属性とclass属性の違い
id属性
⇨同ファイル内で重複した名前を指定できない
class属性
⇨同ファイル内で重複した名前を指定できる
cssファイル
==============
#title{
background: #f6f5f5;
}
⇨id属性「title」がついたタグの背景色を指定色に変更し、
余白を15pxに設定し、文字色を白に設定
==============
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="bg-color1"」を付ける
<p>A</p>
<p class="bg-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
==============
