■
Hello world!
レイアウトで一番大事なのはdisplayプロパティらしいよ。
( ・∇・)
各どういった挙動をするのか解説しているサイトが山のようにありますよね。
なのでかいつまんでやってけばどうにかこうにか、アウトプットがつくれないものかと、まずはサイト模写からスタートしたのですが、なかなかうまくいかず。
( ・∇・; )
ということで、ちょっとサイト模写とかは脇に置いて勉強してます。
で、さっそくですがdisplay。
フレックスボックスの時に、親要素に指定するだけのものと思ってました。
( ・∇・)
でもちがくて、実際はすべての要素はデフォルトでなにかしらのdisplayの値がわりふられているみたいです。
( ・∇・) ?
そのデフォルトっていうのはたいていの場合 display: block; もしくは display: inline; 。
blockはblock-level elementと呼ばれることが多いらしいです（英語では）。
display: block; がデフォルトで設定されているタグは、
HTML5ではdiv, p, form, header, footer, sectionなどが。
display: inline; がデフォルトで設定されているタグは、
span や a など。
( ・∇・) !
CSSが空っぽであっても、
divに子要素としていれるかむき出しかで、行間の幅とか違ったりしますもんね。
もっと他にもあるみたいですが、もう一つ覚えておくとしたら display: none; かなと。
これはscriptタグなどにデフォルトであてられている値だそう。
なるほど。
display: none; を指定すると、完全にページに存在していないものとして扱われるそうで、別のプロパティでは、存在はしているけど見えないようにするだけ、というものもあるそうです。今回はそこまで踏み込みません。
width: 500px; とかにしているのになぜかぴったり500pxにならない。
だからそれを避けるために、marginやpadding の値を計算しつつ width heightを決めたり、微調整したりしてたんですけども、
そんなことをしなくても、自分がかいたwidth height内におさまってくれるプロパティがありました！
box-sizing: border-box;
( ・∇・) 神
実際こんなかんじです。
👩💻はみ出し対策
— Nao | Coding Beginner (@ahochauyo) 2019年7月13日
選択範囲のはみ出しやっと解決💦 揺れてて見にくいですが右サイドの右端がはみ出しているの見えますでしょうか。
左サイド全体にbox-sizing指定
右サイド 指定なし
です🙃
チュートリアルを一通り見た後自分でゼロからやるとバグが沢山でて学び多くなるのでオススメです👍#css pic.twitter.com/B2J5HfmvTh
主に参考にしたおすすめサイト2つはっときます。
短いので一番最初から読んだ方が流れがわかりやすいです。
実際コードを実行したときのページがわかりやすいのでぜひそちらもクリックしてみてください。
ではー！
