こんにちは、ゆーすけです。
今回は、
とにかく挑戦！スタイルシートで簡単webデザイン！
ということなので、
あなたも一緒にwebデザインを楽しんでみましょう！
これも、触ったことのない人ならば、
「うわぁ、むずかしいのかな・・・？」
「絶対できるようにならない気がする」
「怖いなぁ」
なんて思う人が多いかもしれませんが、
実際はそんなことはありません！
僕の以前の記事の、
とにかく実際にHTML言語を書いてみよう！
シリーズと同程度の難易度です！
なので、これをやり遂げているのならば、
絶対あなたにもできます！
保証します！
では、説明していきますね。
まず、スタイルシートとはなんなのでしょうか？
スタイルシートとは、
見栄えと構造を分離するという目的で提唱された、
構造化文書などにおける表示形式を制御するしくみ
だそうです！
なんか難しい言葉ばっかりでよくわかりませんね。
要は、
「見た目をつくる部分」です！
・文字のサイズはいくらにしよう？
・背景は何にしよう？
・画像の大きさはどうしよう？
などの、
見た目部分はすべてスタイルシートで制御していきます！
そして、
HTML文書にスタイルシートを適用する場合には、
一般的にCSSが利用されます。
なので、今回はみなさんにCSSを触っていただきます！
（CSS: Cascading Style Sheets、カスケーディング・スタイル・シート）
（魔法の言葉と思っていただいていて大丈夫です。笑）
さて、では早速行きましょう！
まず、いつも通り、
htmlファイルを作りましょう。
「design.html」というファイルを作ってください。
（designの部分は、ほんとはどんな名前にしてもらっても構いません。）
そしてメモ帳などで開いて、
とりあえず以下の文章を書いてみてください！
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
これが、ホームページをつくるスタートラインでしたね！
そして、以下の文章を書き加えてみてください！
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p>僕は今、CSSを学んでいます</p>
</body>
</html>
ゆーすけの部分は、自分の名前にしてください！
できましたか？
いったんブラウザにドラックアンドドロップして、
動作を確認してみましょう。
以下のように表示されていたら成功です！
自己紹介
こんにちは、ゆーすけです。
僕は今、CSSを学んでいます
ではでは、いまからが本番です。
次の文章を書き加えてみてください。
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは、ゆーすけです。</p>
<p>僕は今、CSSを学んでいます</p>
</body>
</html>
できましたか？
この、styleタグの中に、
CSSの命令を書き加えていくことで、
webページの見た目を変えていくことができます！
これの動作を確認してみてください！
自己紹介
こんにちは、ゆーすけです。
僕は今、CSSを学んでいます
お、背景を赤色にすることができました！
(アメブロではこのコードじゃ無理でした...org)
この調子で次も行ってみましょう！
以下の文章を書き加えてみてください。
<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を学んでいます。
おお、文字の色が変わった！
(背景色赤で、この文字色になっているはずです！)
となるわけですね。
このように、CSSは
p {
color: yellow;
}
と書くと、
「htmlのpタグのcolor(文字色)をyellow(黄色)にしてくれます」
とても簡単じゃなかったですか！？
これを組み合わせることによって、
高度なデザインもできるようになるので、
これからも頑張っていきましょうね＾＾
まずはこのような書き方に慣れていきましょう！
次回は、引き続きCSSを触っていき具予定で、
部分部分にスタイルシートを適用させるところをやります！
それでは、
最後まで読んでくださって、
ありがとうございました。
次回も楽しみにしていてください！