「id」と「class」
「id」と「class」
「id名」や「class名」を指定して、スタイルを定義することができます。 スタイルを適用させたいHTMLタグ内の「id属性」や「class属性」で指定し、その要素に適用することができます。
CSS(スタイルシート)記述の際、「id」の場合は「#id名」、「class」の場合は「.class名」というふうになります。 スタイルには半角英数字の好きな名前を付けることができます。 「#id名」「.class名」の直前に「h1」「p」などの要素名を記述することにより、 スタイルを適用させたい要素を指定することもできます。
CSSソース
#idsample{
background-color: #ff1493;
margin: 10px;
}
.classsample{
font-size: 13px;
color: #33ccff;
}
background-color: #ff1493;
margin: 10px;
}
.classsample{
font-size: 13px;
color: #33ccff;
}
HTMLソース
<p id="idsample">
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>
<p class="classsample">
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>
<p id="idsample" class="classsample">
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>
<p class="classsample">
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>
<p id="idsample" class="classsample">
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせず
ん
</p>