chevron_left レスポンシブコーディング入門

レスポンシブコーディング入門

PREMIUM
第3回

レスポンシブコーディング入門 -ブレイクポイントごとのCSS完成-

2016年7月10日 60min

会員登録して、全てのスライドを見よう

1 / 48

授業の概要

Webページの閲覧は、サイトによってはスマートフォン(以降、スマホ)での閲覧が90%を超える時代になりました。スマホがWeb閲覧の主流となりつつある今、UIのデバイス切り替えは欠かせない手法です。

数年前までは、大規模サイトにおいてはPCサイトに付加されるされる形で、スマホ専用サイトを後付けで作るのが通常でした。それがいまでは大手企業のサイトでも一からレスポンシブサイトにリニューアルするところが多くなってきています。

デバイス毎のUIを実装する方法は、MediaQueryを用いてCSSをデバイス幅で切り替えるレスポンシブサイトと、.htaccess(ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル)を用いてデバイスによって表示サイトを切り替える手法があります。

このコースでは前者のMediaQueryを用いたCSSのコーディング方法を学んでいきます。
第三回はデバイス毎に作ったブレイクポイント毎のCSSを細かく設定し完成させていきます。

こんな人にオススメ

同一HTMLでデバイスごとにデザインが切り替わるサイトを作りたい方

授業で使用する教材

※授業以外での使用は禁止します

チャプター

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