学科 CSS基礎⑥【オンライン】
講師：大浜先生
1・2限 マルチデバイス対応
✎ܚRWDについて
・現在WebサイトはPCよりもスマホで見られる事の方が多い
・Google様がモバイルフレンドリー対策をしていないサイトは上位に表示しないと宣言
→マルチデバイス対応が必須の時代に
✎ܚ動画「マルチデバイス対応について」
→Box modelをしっかり覚えよう
・width→可能な限り％使用推奨
*max-width min-widthは便利！
・height
・padding→指定通りに仕事をしてくれる良い子！
*box-sizing: border-box;を使えば大体解決するかも
*backgroud に画像を持たせる時に有効
*余白に悩んだらpadding！
・margin→ちょっと問題児
*backgroudが適用されない場所
・border→装飾のし甲斐がある部分
*box-sizing: border-box;を使えば大体解決するかも
・float→出来れば使いたくないが昔のコーディングで使われているので覚えよう
*使わない時はnoneにする
*floatしたらclearを徹底する
*ややこしいが使いこなせればレイアウト自由自在
*ネガティブマージンに合わせたら更に強力！
・clear→floatの回り込み解除
*floatとセットで使うと覚えても良い
・position→裏ボス
*上に戻るボタンなどに限定して使うのが無難
・overflow→はみ出た部分の処理
・display→全てを制御してるくらいに思って良い
*display:inline; a,spanなど
*display:inline-block; imgなど
*display:block; h1,p,ul,li,divなど
これら10種のセレクタを使いこなせればレイアウトは自在！！
3限 RWDの作り方
✎ܚ<head>内にメディアクエリを入れる
・<meta name=”viewport” content=”width=device-width,intial-scale=1.0,viewport-fit=cover”>
・メディアクエリ 幅の指定は大きい方から順番に
・大浜先生のサイトのWebパーツにもハンバーガーメニュー例あり！
*ブレイクポイントは年々変わっていくので意識しておこう
4・5限 各自作業
✎ܚハンバーガーメニューを実装してみよう
・大浜先生の用意されているハンバーガーメニューを参考に作成
RWD必須のハンバーガーメニューを
カタチだけは作れるようになりました😊
コーディングの授業は今日まで
次回からはWebデザインに入っていきます
