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

今回もまたまた引き続き、
とにかく挑戦！スタイルシートで簡単webデザイン！
をやっていきましょう！

「前回の記事をまだ見ていない！」

という方は、
こちらのリンクから記事に飛べます。

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

さて、前回は、
一部分にデザインを適用させるということをやっていただきました。

どやって一部分に適用させるか覚えていますか？

答えは、

「idを使う」のでしたね！

<p id=“myid1”>idを使ってみる</p>

というふうに自分の好きな名前のidをつけて、

#myid1 {
color: red;
}

のように#にidの名前をくっつけることにより、
部分的にデザインすることができました！

ここまでがおさらいでしたね。

そして、今日皆さんにやってもらうことは、
「空間を操作する」ということです！

え、どういうこと？？

と思った人は多いかもしれませんが、
空間を操作するというのは、
場所の高さや太さ、位置などを操作することです！

これができると、
自分で書いたhtmlの部品を、

自分の好きな大きさで、
自分の好きな場所に配置することが
できるようになりますよね。

もうここまでできれば、
あなたも晴れてデザイナーを
名乗ってもいいことになるでしょう！

なので気合い入れていきましょう！

それではいきますね。

まず、「design2.html」というファイルを作って、
以下の文章を写してください。

コピペはよくないので、必ず自分で書いてみましょう！笑

<html>
<head>
<meta charset="UTF-8">
<style>
#box1{
background-color: red;
}
#box2{
background-color: blue;
}
#box3{
background-color: yellow;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

divタグを三つ作って、それぞれに固有のidを振ってあげました。

ちなみに、divタグは
「それ自身に意味を持っていないタグ」です。

何かをとりあえず囲みたい！
というときに使うタグですので、
覚えておいてくださいね！

実は、divタグはhtmlで一番よく使うタグ
ですので、それほど重要です。

では、これを実行してみてください。

できましたか？

なにも表示されなければ成功です！

「え？background-colorで
背景に色をつけてあげているのに、
なんでなにも表示されないの！？」

と思ったあなた、いい質問ですね！

たしかに、それぞれのdivタグに
background-colorをつけてあげていますが、
今現在は大きさが0ですので、
背景色を塗る場所がないんです！

だから何もないように見えちゃうんですよね。

なので、大きさをつけてあげましょう！

以下のコードを書き加えてください。

<html>
<head>
<meta charset="UTF-8">
<style>
#box1{
background-color: red;
width: 100px;
height: 100px;
}
#box2{
background-color: blue;
width: 200px;
height: 100px;
}
#box3{
background-color: yellow;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

widthが横幅で、heightが縦幅を表しています。

pxとは「ピクセル」のことで、長さの単位です。

これを実行すると、

このように四角が並べられて、
指定した大きさ、色になっていますね！

それでは、これを自由な位置に動かしてみましょう！

以下の文を書き加えてください。

<html>
<head>
<meta charset="UTF-8">
<style>
#box1{
background-color: red;
width: 100px;
height: 100px;
}
#box2{
background-color: blue;
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 100px;
}
#box3{
background-color: yellow;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

position: absolute;は、
位置を動かすときのおまじないと
今は思っておいてください！

もしきになるなら、
ググってみましょう！

topとは、四角の上の辺の位置を指します。

なので、top: 100px;と書くと、
「四角の上の辺が上から100pxの位置に四角を表示」
することになります。

また、leftは、四角の左の辺の位置を指していて、

left: 100px;と書くと、
「四角の左の辺が左から100pxの位置に四角を表示」
することになります。

これを実行すると、

このように、
青色の四角が指定した場所に移動してくれましたね！

また、
「何も場所を指定していないものは、勝手に詰める」
ということも頭の片隅に入れておいてください！

今回だと、
黄色の四角が上にずれていますね。

おめでとうございます！

これであなたはCSSで、
空間を操作できる能力を手に入れました！

これを用いれば、
web上の好きな場所に好きなものを
いくらでも配置することができますよね！

あなたのセンス次第ではもう既に
ものすごいwebページを作れちゃうかもしれません！

一度、いろいろためしてみてください＾＾

それでは、
今回はこれで以上です。

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

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

とにかく挑戦！スタイルシートで簡単webデザイン！〜3〜空間を操作しよう〜