こんにちは、ゆーすけです。
今回も引き続き、
とにかく挑戦！スタイルシートで簡単webデザイン！
をやっていきましょう！
「前回の記事をまだ見ていない！」
という方は、
こちらのリンクから記事に飛べます。
とにかく挑戦！スタイルシートで簡単webデザイン！～１～簡単CSS入門～
さて、前回は、
「design.html」に、
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-color: red;
}
h1 {
color: orange;
}
p {
color: yellow;
}
</style>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p>僕は今、CSSを学んでいます</p>
</body>
</html>
このようなコードを書き込み、
このような結果が得られましたね！
デザインの部分をつかさどるCSSの部分は、
body {
background-color: red;
}
h1 {
color: orange;
}
p {
color: yellow;
}
この部分でしたね。
例えば、
p {
color: yellow;
}
と書くと、
「htmlのpタグのcolor(文字色)をyellow(黄色)にしてくれます」
という命令でした！
はい、ここまでが復習です！
前回では、
例えばpタグ全てにデザインを適用させていましたが、
今回は、
「pタグの適用させたい一部分だけにデザインを適用させる方法」
を中心にお教えしていきます！
それではいきます。
一緒にやっていくことで、
絶対により良い知識が定着しますので、
ぜひいっしょにやってみてくださいね！
まずは、
「design.html」を以下のように変更してみましょう！
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-color: red;
}
h1 {
color: orange;
}
p {
color: yellow;
}
</style>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p>僕は今、CSSを学んでいます</p>
<hr>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p id="myid1">僕は今、CSSを学んでいます</p>
</body>
</html>
できましたか？
以下のように複製できていたら成功です！
ちなみに、hrタグは、
「平行線」を表すタグで、
ご覧の通り真横いっぱいに線を引いてくれます。
また、hrタグは
「閉じタグの必要ない珍しいタグ」なので、
それも一緒に覚えておいてください。
さて、
<p id="myid1">僕は今、CSSを学んでいます</p>
この部分で、新しいところがありますね。
この、id="myid1"は、
“myid1”というidを今回はpタグにつけています。
タグに固有のidをつけることによって、
個別のデザインを適用できるようになるわけですね！
それでは、実際に個別のデザインをつけてみましょう！
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-color: red;
}
h1 {
color: orange;
}
p {
color: yellow;
}
#myid1 {
color: blue;
}
</style>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p>僕は今、CSSを学んでいます</p>
<hr>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p id="myid1">僕は今、CSSを学んでいます</p>
</body>
</html>
できましたか？
ちゃんと青色になっていますね！
このように、
「#+idの名前」を指定することで、
一部分にcssを適用することができます！
今回は以上です。
最後まで読んでくださって
ありがとうございました。
次回も楽しみにしていてください！