1限目：レイアウト系のプロパティについて
2限目：練習問題の説明
3限目：CSSのプロパティと値を考える
4限目：練習問題の解説
5限目：本日の講義のまとめ
今日教わったこと
・CSSのレイアウトが1番山場
・CSSは正解がないので、これをやるとこれができる、これをやるとダメなんだを覚えるしかない
・コーダーやりたいならとにかく入力して試してみるしかない
・親の要素がそのまま適用されることを継承といって、プロパティによって継承するもの・しないものがある
・vw：ブラウザの表示領域。100vwは100分の100で画面いっぱい。％とは似て非なるので注意。
▼レイアウト系プロパティ
・widthプロパティ（内容の幅）
ブロックレベル要素でしか持てない。インライン要素では使えない。箱の幅のみ。pxも％、vwも使える。
ただ親の要素がある場合、親以上のサイズにはなれないので常に親の中で何％かという指定になる。
親はだいたい1000pxに設定されてることが多い。継承無し。初期値はautoで何も指定しなければ親に対して100％になる
・max-widthプロパティ（幅の最大値）
widthと併用もする。初期値は「none(無し)」
例）widthは400、max-widthは330と言っている場合、重なり合う部分だけ表示されるのでこの場合は330で表示される。スマホ対応のためにこうしてる。
・min-widthプロパティ（幅の最小値）
単独の場合、親から大きくなろうとも指定したとおりに表示される。widthと併用もされる。
例）widthは330、min-widthは300と言っている場合、最低300は満たしているのでwidthで指定している330が表示される。もしwidthを％で指定していて、その値がmin-widthを下回っているならmin-widthが優先される。
初期値は「auto」だが固定値を入れることで中身が重なり合ってしまうこともあるので、基本的には初期値のまま成り行きに任せた方がいい。
・heightプロパティ（内容の高さ）：ブロックレベル要素でしか持てない。インライン要素では使えない。初期値は「auto」
・max-heightプロパティ（高さの最大値）
・min-heightプロパティ（高さの最小値）：↑の理由でmax/min共に使う機会は少ない。
・floatプロパティ（回り込み）：基本的にブロック要素は縦に積まれていくが、そうではなく横に並べたい時に使う。最近は別のタグを使うことが多いが、古いサイトの更新のお仕事だと出てくるので覚えておく。初期値は「none(無し)」で、left、rightと指定できる。先頭のボックスにしか設定していないともぐりこんできてしまうし全部に適用した結果親要素の中身が空になると親要素の高さが0になってしまう。
・clearプロパティ（回り込みを解除）：↑に対して固定させて下の要素を潜り込ませないようにするために使う。なので単独では使わない。floatとセット。初期値は「none(無し)」で、left(左落ち着け)、right(右落ち着け)、both(全員落ち着け)と指定できるのでbothを使うことが多い。
・displayプロパティ（要素の表示方法）：元々持っている要素とは別の要素を無理やり付与する。親に言う時と子に言う時のプロパティが違うので注意。
・例：aタグのリンク(初期値はinline要素なので書いてある部分しかない)に対してdisplay:blockを付与することでblockとして幅と高さを設定して表示できる。リンクできるスペースが大きくなるのでよく使う。
・pタグの文章(初期値はblock要素なので文章が短くてもblock分の幅が取られている)にdisplay:inlineを設定することで文章の分だけしか書式も設定されない。
・inline-blockはソースコード上の改行で生まれた半角スペースによって横並びの間に隙間ができるので、改行せずに書くかコメント入れて改行してないことにする。
・none：HTML上にはあるが見た目は非表示になる。
・flex：中身の子要素をflexアイテム、それをまとめる親要素をflexコンテナーという。親要素として囲むためのdivなどが必要。そうなると縦に並ぶけど横にしたいなら親に「display: flex;」を指定するだけでOK。ただ、サイズが自動調整されるので、サイズを変えたくないならflex-wrap（子要素の折り返し）を設定したりjustify-contentで良い感じに配置したり。
・justify-content
space-between：最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around：両端の子要素も含め、均等に間隔をあけて配置。ただ、両端のアイテム⇔親間の余白は要素間の幅の半分。
space-evenly：両端の子要素も含め、均等に間隔をあけて配置
・order：PCは横並び、スマホで縦とする時に、レイアウトによってはうまく表示されなくなるので、並び順を設定してあげる。
例：写真、文、改行して文、写真になっているとスマホ対応で縦になった時に画像の下に文章が来るレイアウトにできないので、写真1、文2、改行した文4、写真3と順番を振ってあげてスマホ対応でもレイアウトを狙い通りにできるようにする。
・overflowプロパティ（ボックスからあふれた内容の処理方法）：heightを指定しているから溢れる。初期値は「visible」で溢れたら溢れたまま見せる。hiddenで非表示にして、scrollはスクロールバーを出して見えるようにしてあげて、autoは溢れることが確定した時にスクロールバーを出してあげる。xとyでスクロールバーを縦だけ出すか横だけ出すか設定できる。
パディング系とマージン系プロパティは前提としてボックスモデルへの理解が必要。
例：書いてある文章(content)→枠の内側の余白(padding)→表示されてるかは別として、コンテンツの枠線(border)→外側の余白(margin)
▼パディング系プロパティ
・padding-top/-bottom/-left/-rightプロパティ（パディング上下左右）：それぞれで設定することができる
・paddingプロパティ（パディング一括指定）：1だと「上下左右」のすべての指定になり、2つだと「上下」と「左右」の順で指定、3つだと「上」と「左右」と「下」の順で指定、4つだと「上」と「右」と「下」と「左」の順で指定する。複数の場合間は半角スペースで。複数設定する時、0もつかえる。まとめて指定した方が楽なのでこっちを使うことが多い。
▼マージン系プロパティ
参考サイト
・margin-top/-bottom/-left/-rightプロパティ（マージン上下左右）
・marginプロパティ（マージン一括措定）
・マージンの相殺：空要素を入れても回避できないので、例みたいにそれぞれで要素を取るんじゃなく全部bottomで最初から60px空ける。また、場合によってはマージンではなくパディングを使うことも求められるので上手くいかなかったら頭をパディングに切り替えることも必要。
例1）子同士の要素があったとして、兄にマージン50px、弟に10pxとしたとしたら60pxにはならず相殺されて40pxとなる。
例2）要素の下に親要素がいて、その中にいる子要素からマージンを50px、親自身から10pxとしたら親と子同士で相殺して40pxになる。
・マイナスマージン：パディングと違ってマイナスの値を入れることができる。あえて重ねたい時など。
・ボックスの中央配置：「margin: 0 auto;」をよく使う。0の所(上下を示す)に任意の数字を設定すれば左右はオートで調整してくれる。ただこれは親要素と子要素のサイズが一緒だと働かない。余白を調整するって話。
・ボックスの右端配置
▼その他のプロパティ
・box-sizing プロパティ（ボックスサイズ計算）：ボックスサイズをcontent-boxとborder-boxのどっちを基準にするか指定するもの。後者を設定してリセットCSSの1番最初の行に*{}でに入れることが多い。(点数で負けないように)
・content-box：初期値。サイズの基準がコンテンツ。昔はcontent+padding+borderを足してサイズを求めていた。
・border-box：↑が面倒なのでこれを指定することでborderの線の外側までをサイズとして計算できるようになった。
コメント