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

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

PREMIUM
第2回

レスポンシブコーディング入門 -ブレイクポイントを増やす-

2016年7月3日 60min

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

1 / 31

授業の概要

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

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

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

このコースでは前者のMediaQueryを用いたCSSのコーディング方法を学んでいきます。
第二回はエミュレーターを見ながら代表的なタッチデバイスのブレイクポイントを設定してCSSを書いていきます。

こんな人にオススメ

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

授業で使用する教材

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

チャプター

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