レスポンシブWEBデザインについて
レスポンシブWEBデザイン(RWD)：PC、タブレット、スマートフォンなど異なるデバイスで画面サイズの幅を基準にしてWEBサイト表示を柔軟に調整し見やすくすること
モバイルフレンドリー：スマートフォン用に表示してモバイル端末でWEBサイトを閲覧しやすくすること
レスポンシブWEBデザインの手順
- viewportを指定していないとPCサイトが縮小された表示になってしまい、拡大しないと見れないサイトになる ↩︎
- メディアクエリとは、WEBページのデザインを記述するCSSのうちの1つで、画面環境にあったデザインに切り替える機能があり、それぞれの画面の大きさや解像度に適した形に調整して表示することができる ↩︎
- 画面サイズに合わせて異なる表示部品を導入することで操作性を向上させることができ、
例えばスマホなどにはメニューの表示形式をハンバーガーメニューにすることで狭い画面を有効的に使用することが可能 ↩︎
幅広デザイン(PC)でWEBページをデザインした後、viewportを指定したり、MediaQuerieを使用するなどしてページの見やすさを向上させるようにする
Box model(ブロックボックスとインラインボックス)
CSSにはブロックボックスとインラインボックスの2種類があり、完全なCSSボックスモデルはブロックボックスに適用され、インラインボックスはボックスモデルで定義された動作の一部のみを使用する
ボックスの構成
ボックスモデルに関わるセレクタは以下
- width、height：contentsが表示される領域でwightやheightなどのプロパティを使用してサイズを変更できる
- padding：contentsを囲む空白で、そのサイズはpadding及び関連するプロパティを使用して制御できる
- border：contentsとpaddingを囲む罫線
- margin：もっとも外側にあるボックスで、ほかの要素の間の空白
ボックスをレイアウトさせるセレクタは以下
- float：指定された要素をleftまたはrightに寄せて配置
- clear：floatプロパティの回り込みを解除する
- position：ボックスの配置方法(基準位置)が、相対位置「relative」絶対位置「absolute」を指定でき、表示位置の指定には「top」「bottom」「left」「right」を併用して基準位置からの距離を設定する
- overflow：ボックスの内容に入りきらない場合にはみ出た部分を表示の仕方を指定する
- display：ブロックレベル・インライン等の要素の表示形式を指定する際に使用
inlineは横幅の絶対値を持てない
blockとinline-blockは横幅の絶対値が持てる
noneは表示を隠す←「display :none;」の扱いに注意
