Box modelについて(RWD)
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしよう。
「マルチデバイス対応の教科書①.pdf」
【動画】
- Box Model
https://youtu.be/K1PcxtiiObc(12分19秒) - ボックスの幅(width)と高さ(height)の制御
https://youtu.be/UiOlkIahkT8(8分46秒) - ボックスの余白(padding/margin)の制御
https://youtu.be/kVjUE1xI9tY(9分41秒) - ボーダー(border)と横並び(float)の制御
https://youtu.be/uwNyg_GLYWM(7分37秒) - ボックスの配置と表示形式の制御
https://youtu.be/7_Ez0F5WKd8(9分13秒)
RWD 対応のサイトについて
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入