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

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

PREMIUM
第1回

レスポンシブコーディング入門 -MediaQueryを実装する-

2016年6月26日 60min

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

1 / 32

授業の概要

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

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

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

このコースでは前者のMediaQueryを用いたCSSのコーディング方法を学んでいきます。
第一回はレスポンシブ概要とMediaQueryの基本を学びます。

こんな人にオススメ

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

授業で使用する教材

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

チャプター

play_arrow
授業全体の内容
00:46
play_arrow
アジェンダ
00:44
play_arrow
参考授業の紹介
01:03
play_arrow
3つのシリーズのおさらい
02:58
play_arrow
レスポンシブデザインと.htaccessの違いを学ぼう
00:15
play_arrow
.htaccessで切り替わるサイト
05:32
play_arrow
Googleがレスポンシブサイトを推奨
03:28
play_arrow
振り分け用重複コンテンツのデメリット
00:38
play_arrow
レスポンシブデザインとは
00:17
play_arrow
レスポンシブで作られた巨大サイトを見てみよう
03:52
play_arrow
ブレイクポイントとは
00:12
play_arrow
cssが切り替わるポイントを確認しよう
02:59
play_arrow
Bootstrapのブレイクポイント
03:51
play_arrow
MmediaQueryを実装しよう
00:17
play_arrow
授業素材のダウンロードしよう
00:47
play_arrow
MediaQueryを実装する方法を学ぼう
00:57
play_arrow
linkタグでの設定方法を学ぼう
00:32
play_arrow
cssファイル内の設定方法を学ぼう
00:32
play_arrow
viewportの指定を学ぼう
04:33
play_arrow
レガシーブラウザへの対応を学ぼう
01:20
play_arrow
linkタグでの実装を実際に見てみよう
05:57
play_arrow
media属性を用いたcssファイル内での設定を実際に見てみよう
02:43
play_arrow
Q,レガシーブラウザでもIE11の使用率がまだ高いですが、それはどういう扱いでしょうか?こちらの対応はしなくても問題無いでしょうか?
00:55
play_arrow
cssをもう一度確認してみよう
04:46
play_arrow
Q,切り替え時の設定991px 922px で値に間があいているのはなぜだろう。
01:13
play_arrow
Q,linkタグにmediaQueryをいれる方法とcssファイルに入れる方法どちらが主流ですか?
01:14
play_arrow
Q,linkタグにmediaQueryをいれる方法とcssファイルに入れる方法どちらが主流ですか?
01:24
play_arrow
Q,一般に、どちらで、した方がいいですか?PCとスマホのCSSをlinkでする方法とCSS1枚にPC用とスマホのブレイクポイントを書く方法。サイトによると思いますが
01:08
play_arrow
Q,ブレイクポイントは指定しませんが、横幅の最低サイズは320PXまででよいでしょうか? そこまでカラム落ちしないように作り、それ以下wrapperのdivにmin-widthで小さくならないように固定しておけばよいでしょうか? 最大は1920pxまでの固定ですね。
01:18
play_arrow
Q,sp版とpc版のcss共通部分をメディアクエリの外に書く方法があると聞いたのですが?
01:03
play_arrow
お知らせ