PR

9月22日（金）学科 CSS基礎⑥【ｵﾝﾗｲﾝ】

2023.09.22

大浜 信彦　先生

アジェンダ

1限目
学科 CSS基礎⑥
ボックスモデルについて

2限目
学科 CSS基礎⑥
ボックスモデルについて

3限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

4限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

5限目
学科 CSS基礎⑥
本日の講義のまとめ

ポイント

  • <動画より>
  • モバイルフレンドリー（未対応はGoogle評価下がる）
  • CSSで「Box model」は必需。特徴は”固定値からの解放”
    • 【ボックスモデルに関わるセレクタ】５個
      • ☑ width ☑ padding ☑ margin ☑ border ☑ height
      • 横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ません！
        • widthは可能な限り「％」を使用
        • padding　期待値にならない→「box-sizing: border-box;」を使えばだいたい解決
        • margin　ボックス間の距離をとるため。マイナス値可能、「marginの相殺」がやっかい　見た目OKでも間違っている可能性があるのできっちりと理解しておく
        • border　「box-sizing: border-box;」を使うこと。
        • position　ヘッダーの固定や、ページトップへのボタンの固定に便利。2つのセレクタを併用しなければならないのでややこしい
        • overflow　ず「float」の親要素に「overflow: hidden;」が便利
        • display　
          • 要素の横並びの箇所（グローバルナビ等）には必須
          • ・非表示「 display :none;」の扱いには要注意
          • ・表組「table」の解体に必要
    • 【ボックスをレイアウトさせるセレクタ】５個
      • ☑ float ☑ clear ☑ position ☑ overflow ☑ display
        • float　→センターができない。今後「display:flex;」で代用する。「float」したら「 clear 」を徹底。
  • https://html-css.hamaya2020.com/lesson-11.html
    • 「ワンソース・マルチデバイス」という考え方であり「レスポンシブWebデザイン」という手法。Google では、モバイルファーストインデックス（MFI）として Web サイトのインデックス登録や検索順位に スマホサイトを基準に評価を行うことを発表。
      1. PC向けのWeb ページを作成
      2. viewport 定義を指定します。
      3. 横幅変動時のコンテンツ幅を設定します。
      4. Media Queries を使用してデザインを整えます。
      5. 画面サイズに合わせた表示部品を導入します。（メニューのハンバーガーメニュ部品等）
    • サイドバー設置時　サイドバー幅は固定＋メインはサイドバーを引いた残り
    • 「css ブレークポイント」検索

コメント