生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでCSSを学ぼう#10〜#12

CSSは、見た目を変えてくれるので視覚的にわかりやすくて楽しいですね!

今日も、ドットインストールさんCSSの学習をしたいと思います。

f:id:ponnkichi:20180203220011p:plain

 

 #10 ボックスモデルを理解しよう

「ボックスモデル」はprogateでも学習しました。

こちらの記事で学んでいます。

ponnkichi.hatenablog.com

f:id:ponnkichi:20171221092353p:plain

(progateより)

このようなイメージでしたね。

 

これもまた、視覚的にわかりやすい部分でもあります。学習をすすめましょう。

 

f:id:ponnkichi:20180203085157p:plain

ある要素がブラウザで表示されているとき、このような領域ができるのですが

高さをheight、幅をwidthで管理します。

f:id:ponnkichi:20180203085339p:plain

この白い部分の高さがheight 、幅がwidthになるのですね。

 

ちなみに、この枠線のことはborderというプロパティで管理します。

 

そして、このborderプロパティと要素の間にある内側の余白はpadding、外側の余白はmargin プロパティで管理します。

f:id:ponnkichi:20180203085540p:plain

うん、progate で学んだとおりだ。嬉しくなってしまいます^皿^

実践!

今回のhtmlは次のように記述されていました。

f:id:ponnkichi:20180203085823p:plain

<div>Element</div> 

 このdivにスタイルを指定していきましょう。

cssに記述をしていきます。

div{

background: silver

width: 200px;

height: 100px;

}

(とじかっこを忘れないように!)

divへの指定は、背景色がシルバー、幅が200px、高さが100pxということになりました。

ブラウザで確認してみましょう。

f:id:ponnkichi:20180203090156p:plain

なるほど、こうなるのですね。

シルバーって…グレーみたいですね^皿^

 

ちなみに、%で表すこともできますよね。

先ほどのcss

div{

background: silver

width: 50%;

height: 100px;

}

 widthを50%にすると、こうなります。

f:id:ponnkichi:20180203090359p:plain

親要素の50%の幅になりました。

ブラウザの幅を変えてみると、その幅のちょうど50%になるように幅がリサイズされます。おもしろい。(写真では意味がわからなくて申し訳ない)

 

これはおもしろい!と思って、高さも%で表すとどうなるでしょう。

 

div{

background: silver

width: 50%;

height: 50%;

}

高さを50%にして、ブラウザで見るとこうなっています。

f:id:ponnkichi:20180203090712p:plain

1行分…。

高さに関しては、「%」ではうまくいかないようです。

高さは、きちんと数値を明示しなくてはならないという決まりがあるそうです。要注意ですね。

 

divの親要素はbody とhtmlです。なので、親要素を明示すれば、思った通りの高さになるということです。

先ほど書いた上のほうに、bodyとhtmlについて書いておきましょう。

body , html{ height: 100%; }

div{

background: silver

width: 50%;

height: 50%;

}

  このように書き足すと、こうなります。

f:id:ponnkichi:20180203091057p:plain

そうすると、(写真では全くわからなくて申し訳ないのですが)先ほどと同じように

ブラウザのちょうど半分の高さになります。

ブラウザのサイズを変えると高さと幅も一緒にちょうど半分になるように動きます。

#11 borderで境界線のスタイルを変えよう

borderに関するプロパティはいくつかあります。

border-color:

border-widht:

border-style: 

 colorは境界線の色、widthは境界線の幅、styleは境界線のスタイルになります。

border-styleには色々な形があって、

solid(実線)

dotted(点線)

dashed(破線)

double(二重線)

inset / outset (立体的に見せる) 

 などがあります。

 

今回は、先ほどの

f:id:ponnkichi:20180203085823p:plain

divに、スタイルをしていきましょう。

div{

border-color: orange;

border-width: 4px;

border-style: dotted

}

 としてみます。

境界線の色はオレンジで、幅は4px、スタイルは点線ということになりますね。

ブラウザで見ると、このようになっています。

f:id:ponnkichi:20180203212537p:plain

なりました!

なんだか、かわいいですね(*^^*)

 

ちなみに、一気に書くこともできるのだそうです。

div{

border: orange 4px dotted

 }

 と書いても、同じようになります。

こっちの方がらくちんでいいですね^皿^

 

ちなみに、境界線を上だけにしたいときにはborder-top

しただけにしたいときにはborder-bottomと記述することでそれぞれを指定することができます。

たとえば、このように記述するとします。

div{

border-top: orange 4px dotted

 「境界線の上だけに、オレンジで幅が4pxの点線をつけます」という意味です。

ブラウザで見ると、このようになっています。

f:id:ponnkichi:20180203213044p:plain

できています!

 

はてなブログのカスタマイズ」で

見出しをカスタマイズするときの記事にも

同じようなコードをご紹介しています。

 

このようなコードを自分で書けるようになりそうで楽しいですね✨

#12 padding で余白を制御しよう

paddingについては、progateさんで学びました。

progate html,css 初級編2

progate html,css 初級編4

このころに比べたら、少し慣れてきたような気がします(気のせい?)

旧知の仲に会うような気軽な気持ちでいってみましょう!

 

今回も、htmlに用意されているのはhtml地獄。

f:id:ponnkichi:20180203213839p:plain

しぬほど「こんにちは」と言われ続ける地獄です。なんておそろしい。

 

cssでは、このdivにこのように指定されています。

div{

background-color: silver;

 背景色がシルバーですね。ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180203214021p:plain

これに余白をつけていきますよ!

 

ちなみに、「枠のところに少し余白があるんじゃないの?」と思うかもしれませんが(私は思わなかったけれど。笑)

これは、もともとブラウザが初期値としてbodyにmarginをもっているから

若干の余白があるように見えるのだそうです。

わざわざmarginをゼロに指定してみると。

body{ margin: 0; } 

 

f:id:ponnkichi:20180203214306p:plain

上と左がぴったりくっつきました^^;

たぶん、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の後の数が1個だった場合、全ての値が同じに。

2個だった場合には「上と下」「右と左」という順番に。

3個だった場合には「上」「右と左」「下」という順番に。

4個だった場合には時計回りに「上」「右」「下」「左」という順番に指定されます。

 

 

では、先ほどのcssに書き加えて見ましょう。

div{

background-color: silver;

padding: 10px 50px

  赤字が足したところです。

境界線の内側の余白が、上下10px、左右が50pxに指定されました。

ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180203215136p:plain

なるほど!余白が空いて、見やすくなりましたね。

 

先ほどのcssを書き換えて、次のように記述したとします。

div{

background-color: silver;

padding: 10px 20px 30px 40px

 境界線の内側の余白が、

上が10px、右が20px、下が30px、左が40pxという面白い自体になっているはずです。

ブラウザを見てみましょう。

f:id:ponnkichi:20180203215413p:plain

正直、動画の画面ではそこまで面白い事態にはなっていなかったですが^^;

上から時計回りに、少しずつ幅が広くなっているのが見て取れます。

これは趣深い。

そして、視覚的にわかりやすいので俄然頭に入ってきますね。

 

 

f:id:ponnkichi:20171219214742p:plain

「やっぱりcssはおもしろいね!」

 

 

ざっくりでも理解できると、見た目が変化するので楽しいですね^皿^

html→cssへの流れをなんども動画で確認すると

理解が深まるような気がします。

学習はなんども繰り返したほうがいいですね。

すぐに忘れるので。

エビングハウス忘却曲線なので。

f:id:ponnkichi:20180203215748p:plain

http://free-academy.jp/junior/index.php?エビングハウス忘却曲線

幸い、1本3分程度の動画なので

なんども見返すと覚えられるかもしれません^皿^