ドットインストールでCSSを学ぼう#10〜#12
CSSは、見た目を変えてくれるので視覚的にわかりやすくて楽しいですね！
今日も、ドットインストールさんでCSSの学習をしたいと思います。
#10 ボックスモデルを理解しよう
「ボックスモデル」はprogateでも学習しました。
こちらの記事で学んでいます。
（progateより）
このようなイメージでしたね。
これもまた、視覚的にわかりやすい部分でもあります。学習をすすめましょう。
ある要素がブラウザで表示されているとき、このような領域ができるのですが
高さをheight、幅をwidthで管理します。
この白い部分の高さがheight 、幅がwidthになるのですね。
ちなみに、この枠線のことはborderというプロパティで管理します。
そして、このborderプロパティと要素の間にある内側の余白はpadding、外側の余白はmargin プロパティで管理します。
うん、progate で学んだとおりだ。嬉しくなってしまいます＾皿＾
実践！
今回のhtmlは次のように記述されていました。
<div>Element</div>
このdivにスタイルを指定していきましょう。
cssに記述をしていきます。
div{
background: silver
width: 200px;
height: 100px;
}
（とじかっこを忘れないように！）
divへの指定は、背景色がシルバー、幅が200px、高さが100pxということになりました。
ブラウザで確認してみましょう。
なるほど、こうなるのですね。
シルバーって…グレーみたいですね＾皿＾
ちなみに、%で表すこともできますよね。
先ほどのcssを
div{
background: silver
width: 50%;
height: 100px;
}
widthを50%にすると、こうなります。
親要素の50%の幅になりました。
ブラウザの幅を変えてみると、その幅のちょうど50%になるように幅がリサイズされます。おもしろい。（写真では意味がわからなくて申し訳ない）
これはおもしろい！と思って、高さも%で表すとどうなるでしょう。
div{
background: silver
width: 50%;
height: 50%;
}
高さを50%にして、ブラウザで見るとこうなっています。
１行分…。
高さに関しては、「%」ではうまくいかないようです。
高さは、きちんと数値を明示しなくてはならないという決まりがあるそうです。要注意ですね。
divの親要素はbody とhtmlです。なので、親要素を明示すれば、思った通りの高さになるということです。
先ほど書いた上のほうに、bodyとhtmlについて書いておきましょう。
body , html{ height: 100%; }
div{
background: silver
width: 50%;
height: 50%;
}
このように書き足すと、こうなります。
そうすると、（写真では全くわからなくて申し訳ないのですが）先ほどと同じように
ブラウザのちょうど半分の高さになります。
ブラウザのサイズを変えると高さと幅も一緒にちょうど半分になるように動きます。
#11 borderで境界線のスタイルを変えよう
borderに関するプロパティはいくつかあります。
border-color:
border-widht:
border-style:
colorは境界線の色、widthは境界線の幅、styleは境界線のスタイルになります。
border-styleには色々な形があって、
solid（実線）
dotted（点線）
dashed（破線）
double（二重線）
inset / outset （立体的に見せる）
などがあります。
今回は、先ほどの
divに、スタイルをしていきましょう。
div{
border-color: orange;
border-width: 4px;
border-style: dotted
}
としてみます。
境界線の色はオレンジで、幅は4px、スタイルは点線ということになりますね。
ブラウザで見ると、このようになっています。
なりました！
なんだか、かわいいですね（＊＾＾＊）
ちなみに、一気に書くこともできるのだそうです。
div{
border: orange 4px dotted
}
と書いても、同じようになります。
こっちの方がらくちんでいいですね＾皿＾
ちなみに、境界線を上だけにしたいときにはborder-top、
しただけにしたいときにはborder-bottomと記述することでそれぞれを指定することができます。
たとえば、このように記述するとします。
div{
border-top: orange 4px dotted
}
「境界線の上だけに、オレンジで幅が4pxの点線をつけます」という意味です。
ブラウザで見ると、このようになっています。
できています！
同じようなコードをご紹介しています。
このようなコードを自分で書けるようになりそうで楽しいですね✨
#12 padding で余白を制御しよう
paddingについては、progateさんで学びました。
このころに比べたら、少し慣れてきたような気がします（気のせい？）
旧知の仲に会うような気軽な気持ちでいってみましょう！
今回も、htmlに用意されているのはhtml地獄。
しぬほど「こんにちは」と言われ続ける地獄です。なんておそろしい。
cssでは、このdivにこのように指定されています。
div{
background-color: silver;
}
背景色がシルバーですね。ブラウザで見るとこのようになっています。
これに余白をつけていきますよ！
ちなみに、「枠のところに少し余白があるんじゃないの？」と思うかもしれませんが（私は思わなかったけれど。笑）
これは、もともとブラウザが初期値としてbodyにmarginをもっているから
若干の余白があるように見えるのだそうです。
わざわざmarginをゼロに指定してみると。
body{ margin: 0; }
上と左がぴったりくっつきました＾＾；
たぶん、marginは次回に見ていくのかな？
さて、話半paddingに戻します。
全体に余白をあけるときには、「padding」だけでいいのですが、
borderの時と同じように、個別に指定する時には「padding-top」などのように記述します。
同じように上下左右に指定することができます。
padding-top: 10px
padding-right: 19px;
paddong-bottom: 10px;
padding-left: 10px
また、一気に指定する時にはこのように記述します。
padding:
all
top/bottom right/left
top right/left bottom
top right bottom left
paddingの後の数が１個だった場合、全ての値が同じに。
２個だった場合には「上と下」「右と左」という順番に。
３個だった場合には「上」「右と左」「下」という順番に。
４個だった場合には時計回りに「上」「右」「下」「左」という順番に指定されます。
では、先ほどのcssに書き加えて見ましょう。
div{
background-color: silver;
padding: 10px 50px
}
赤字が足したところです。
境界線の内側の余白が、上下10px、左右が50pxに指定されました。
ブラウザで見るとこのようになっています。
なるほど！余白が空いて、見やすくなりましたね。
先ほどのcssを書き換えて、次のように記述したとします。
div{
background-color: silver;
padding: 10px 20px 30px 40px
}
境界線の内側の余白が、
上が10px、右が20px、下が30px、左が40pxという面白い自体になっているはずです。
ブラウザを見てみましょう。
正直、動画の画面ではそこまで面白い事態にはなっていなかったですが＾＾；
上から時計回りに、少しずつ幅が広くなっているのが見て取れます。
これは趣深い。
そして、視覚的にわかりやすいので俄然頭に入ってきますね。
「やっぱりcssはおもしろいね！」
ざっくりでも理解できると、見た目が変化するので楽しいですね＾皿＾
html→cssへの流れをなんども動画で確認すると
理解が深まるような気がします。
学習はなんども繰り返したほうがいいですね。
すぐに忘れるので。
幸い、１本3分程度の動画なので
なんども見返すと覚えられるかもしれません＾皿＾
