PREMIUM
第2回
レスポンシブコーディング入門 -ブレイクポイントを増やす-
2016年7月3日 60min
スライド資料
授業の概要
こんな人にオススメ
同一HTMLでデバイス毎にデザインが切り替わるサイトを作りたい方
担当の先生／パーソナリティ
チャプター
-
アジェンダ
00:25 -
参考授業の紹介
01:05 -
3つのシリーズのおさらい
01:07 -
授業資料をそろえよう
01:31 -
デバイズプレビュー
00:11 -
タッチデバイズの幅
00:25 -
スマートフォンの幅
00:21 -
タブレットの幅
01:42 -
デバイズ幅を確認しよう
00:06 -
ブラウザで切りかわるUIを確認してみよう
00:38 -
演習素材を確認しよう
00:46 -
前回までコーディングしたCSS
00:22 -
タブレットのUIをブラウザで確認してみよう
02:24 -
ブレイクポイント毎にCSSを書こう
00:11 -
タブレット用のブレイクポイントを作ろう
01:54 -
グローバルナビ部分の修正をしよう
08:03 -
ヘッダー部分の修正をしよう
06:41 -
メインコンテンツ部分の修正をしよう
09:05 -
次回授業の内容を確認しよう
01:56
-
先生からのお知らせ
07:27 -
Q,基本的には今作っているブレイクポイントが標準でしょうか？
01:49 -
Q,レスポンシブでヒーローイメージをやや軽めにしたい時、黒いドットや透明なグラデーションを上に敷いて、 サイズを小さめにすることが流行っていますが、そのようにした場合画像の横幅はいくつにするのが、主流でしょうか？
03:07 -
Q,ＵＩは何種類ぐらい用意できれば見栄えがよくなりますか？
00:30 -
Q,SPファーストとPCファーストでメディアクエリを書く順番の決まりはありますか?(cssを1ファイルでまとめる場合)
02:23 -
Q,作るサイトによって、違いますが、top◯％などの％の計算の仕方などは、どのように出していますか？電卓で計算して出していますか？
01:07 -
Q,実際のデバイスとfirefox for developerのレスポンシブモードでなどのエミュレーター？でどれだけ正確性が違うでしょうか？それとももっといい方法があります？
01:49 -
Q,article section figure{ padding:1rem 0; }を入れると画像が大きくなるのはなぜなのでしょうか。
01:55 -
Q,レスポンシブだとブレークポイントごとに画像がぼやけぎみになることが有りますが、どのようにどのように対処していますか？
01:09 -
Q,最近４Kスマホが出てきていますが、Retina同様に対応する必要ありますか？
00:32 -
次回授業のお知らせ