SUNABACOおんらいん1st（6日目）
今日から二週目！
写経課題のスマホ版ハンバーガーメニューが開かないけど気にせず行きましょー🌱
5日目回答
レスポンシブデザイン
→pc1000px、スマホ750px
見せたいものデザインにより
Display のつかいかた総まとめ
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？サルワカ
まずはイメージで理解しましょう。
block⇒積木のイメージ
要素が横までいっぱいに広がり、縦に並んでいく、高さ、横幅、内外の余白など形の自由度が高い、pタグ、div タグ、hタグ
inline⇒電車のイメージ
要素が平ぺったく横に並んでいく、文中やブロック内で使う、高さ、上下の余白等縦方向の自由度が低い文字の長さや大きさに依存する、左右の余白は指定可能、aタッグ、spanタグ
inline-block⇒積木を横に並べるイメージ
blockとinlineの中間、横に積み上げるブロック、要素を並べる
none⇒お化けのイメージ
読み込まれるが非表示になる、レスポンそびデザインに使える
範囲がわかりやすいように検証用でbackgroundーcolor入れるといいよね
margin外の余白
padding内の余白（肩パッド的な詰め物的な）
display none visibility hidden
display:none と visibility:hidden の違い
display none→お化けのイメージ
もともとそこに要素が存在しないようにする
visibility hidden→ 透明人間のイメージ
要素はそこに存在するが見えない
CSS flex BOX
日本語対応！CSS Flexboxのチートシートを作ったので配布します
itemの並べ方自由自在に
詳しくは上のサイトを見てくれれば。。。
とりあえず便利な命令なのはわかった
メディアクエリ
①CSSを複数読み込み
head内のlinkで条件等を指定（pc版700〜、smapho版）
メリット/コード管理楽
デメリット/読み込みファイルが増えるので重くなる
②CSSに直接書き込む（@使うifみたいな）
メリット/読み込み早い
デメリット/管理が大変
土日の課題壁が解決した瞬間でした
突破ー
ハンバーガーも今気にしないでOK！
とりあえず見た目は大丈夫かな