1限目
実技 WEBページ制作実習②
レスポンシブWebデザインについて
2限目
実技 WEBページ制作実習②
RWD 対応のサイトについて
3限目
実技 WEBページ制作実習②
Webページ制作実践
4限目
実技 WEBページ制作実習②
Webページ制作実践
5限目
実技 WEBページ制作実習②
Webページ制作実践
本日のポイント
レスポンシブWebデザインを理解しましょう
レスポンシブWebデザインについて
「レスポンシブWEBデザイン」と検索すると
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの
画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現
する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを
用意すること なく、マルチスクリーンに対応したWEBサイトを制作できます。
【メリット】
・1つのHTMLファイルで複数デバイスに対応できる。
・更新・修正やサイト制作の作業工数の軽減出来る。
・各デバイスのURL統一化SEO対策に効果的になる。
【デメリット】
・設計やデザインが複雑になる。
・PCとモバイルの内容が同じなので、ページの読み込みが重くなる可能性がある。
・常に新しいデバイスの登場に対応が必要になる。
Box model
「 マルチデバイス対応」のサイトの特徴は固定値からの解放です。
横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ません！
【ボックスモデルに関わるセレクタ】
☑ width ☑ padding ☑ margin ☑ border
☑ height
【ボックスをレイアウトさせるセレクタ】
☑ float ☑ clear ☑ position ☑ overflow ☑ display
- 非表示「 display :none;」
パソコンでは表示して、スマホ版では非表示にしたり出来るタグ
photoshopでアニメーション作る
ブレイクポイント
コメント