PREMIUM
第3回
レスポンシブコーディング入門 -ブレイクポイントごとのCSS完成-
2016年7月10日 60min
スライド資料
授業の概要
こんな人にオススメ
同一HTMLでデバイスごとにデザインが切り替わるサイトを作りたい方
担当の先生／パーソナリティ
チャプター
-
本日のアジェンダ
00:32 -
参照授業の紹介
00:47 -
レスポンシブデザインのおさらい
00:44 -
授業素材の準備方法
01:31 -
仕上げのcssを書いていこう
00:10 -
不具合が出ている箇所を調べよう
02:45 -
崩れたUIを修正しよう
00:08 -
右側に隙間がでる不具合を修正しよう
03:46 -
横置きタブレットUIのファーストビューの修正をしよう
07:43 -
cssのnav部分の修正をしよう
03:36 -
1240pxより幅が狭まった場合の不具合を修正しよう
03:15 -
mainタグ内の崩れを上書きしよう
03:53 -
はみ出したtableタグを修正しよう
03:53 -
1199pxからのfooterのカラム落ちを修正しよう
04:34 -
スクーロゴの修正しよう
02:36 -
上に戻るボタンの修正
02:52 -
実機で検証してみる
01:12
-
Q,atomってどこですか
00:24 -
Q,今回はじめてなので設定したすべてのブレークポイントを教えて下さい。資料を見ると以下のブレークポイントがあるみたいですがそれ以外にあればお願いします タブレット用 768px-991px 狭いPC用 1240-992px スマホ用 415px-768px 不具合修正用？ 921px-991px 921px-1240px
01:16 -
Q,ブレイクポイントが重なる部分があると、どちらが当たっているのか判らない時があります。重ならないように設定してもよいのでしょうか？
00:23 -
Q,個人や小さな制作会社では、最低で何台くらいの実機を用意するといいでしょうか？
01:02 -
Q,BootstrapなどのCSSフレームワークを使わずにレスポンシブコーディングする場合は、今日の授業でやったように、崩れたUIの細かい修正が必要となってくるのでしょうか？
04:45 -
Q,(min-width) と(max-width)の記載する順番に意味はあるのですか？
01:06 -
Q,vm,vhは数年使えないようなので当分は横幅やmarginは%指定が基本だと思いますが、 remで指定しても問題ないのでしょうか？ remだと可変しないので固定になってしまいますが、レスポンシブは、フォントサイズ以外は、 すべて%でなくてはいけないというルールは特にありませんか？ %だったりremだったりと混在してもOKでしょうか？
03:19 -
Q,PCのレイアウトでアクセス、お問い合わせ部分、LINEロゴがずれてしまっているのですが、どこを修正すれば良いですか？
03:29 -
Q,maerginやpaddingも％がいいのでしょうか？
00:18 -
Q,jqueryなどを使って画像を表示、ブレイクポイントを追加した事によってjqueryなどに不具合が発生するとかありますか？（ないとは思いますが）
00:43 -
お知らせ