こんにちは、ゆーすけです。

今回も引き続き、
とにかく挑戦！スタイルシートで簡単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を適用することができます！

今回は以上です。

最後まで読んでくださって
ありがとうございました。

次回も楽しみにしていてください！

とにかく挑戦！スタイルシートで簡単webデザイン！〜２〜一部分にデザインを適用しよう！〜