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

  • このエントリーをはてなブックマークに追加
レスポンシブコーディング入門 -MediaQueryを実装する-
第1回:2016年6月26日公開 01:00:00

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

受講する

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

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

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

この授業では前者のMediaQueryを用いたCSSのコーディング方法を学んでいきます。

授業一覧
レスポンシブコーディング入門 -MediaQueryを実装する-
2016年6月26日公開
01:00:00

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

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

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

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

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

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

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

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

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

  • アジェンダ
  • 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,UIは何種類ぐらい用意できれば見栄えがよくなりますか?
  • 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,最近4Kスマホが出てきていますが、Retina同様に対応する必要ありますか?
  • 00:32
  • 次回授業のお知らせ
レスポンシブコーディング入門 -ブレイクポイントごとのCSS完成-
2016年7月10日公開
01:00:00

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

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

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

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

  • 本日のアジェンダ
  • 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
  • お知らせ
こんな人にオススメ
WEBデザイナー(中級)

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

タグ
授業で使用するファイル
担当の先生
受講生代表
  • 徳田 葵

    徳田 葵

    スクー放送部

この授業を受けたい(1554人)
その他 1475人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×