レスポンシブWebデザインの基礎と,コーディング実習

スマートフォン、タブレットなどのスマートデバイスの爆発的な普及により、Webサイトのマルチデバイス対応が求められてます。そのひとつの手法としてレスポンシブWebデザインが注目されています。

この授業では、レスポンシブWebデザインの概要と、注目されている理由、その基本的な実装方法について話します。また実際にハンズオンで簡単なレスポンシブWebデザインのサイトを制作します。実際に手を動かして制作することでより理解が深まります。

レスポンシブWebデザインは比較的新しい手法であり、またレイアウトが可変で複数のデバイスに対応するため、今までのサイト制作とは大きく考え方や制作のフローを変える必要があります。またデバイスの画面サイズや回線速度などの違いを様々な技術を組み合わせて補う工夫をする必要もあります。

このように学ぶことは多岐に渡りますが、まずは入り口として基本的な部分を学んでレスポンシブWebデザインがどのようなものかイメージを掴んでください。

詳細を開く
レスポンシブWebデザインの基礎と,コーディング実習
2013年9月30日公開
02:00:00
  • 自己紹介&アジェンダ
  • 01:14
  • レスポンシブWebデザインとは
  • 05:20
  • RWDの特徴
  • 08:52
  • Fluid Grid
  • 05:53
  • Fluid ImageとMedia Queries
  • 11:19
  • ブレイクポイント
  • 06:57
  • Viewport
  • 03:22
  • ハンズオン実習
  • 28:04
  • さらに最適化を
  • 03:03
  • RWDワークフロー
  • 06:43
  • RWDとこれからのWeb
  • 11:26
  • まとめ
  • 01:47
  • Q:レスポンスデザインでは設計が難しいものがあるとおっしゃっていましたが、どんなものになると難しい/不可能になるのでしょうか?
  • 02:36
  • Q:画像フォントよりWebフォントの方がパフォーマンス的には良いんですか?
  • 01:39
  • Q:Wordpressなどでも、レスポンシブデザインは今日習った手順で実装できますか?
  • 02:06
  • Q:PCサイトの横幅を狭くしてスマートフォンで表示すると画面一面が文字だけになりそうですが、この辺りを工夫している事例などがあれば、ご紹介して頂きたいです
  • 01:47
  • Q:プロトタイプを作成するに辺り、どれくらいの工数を設けてますか?
  • 01:59
  • Q:heightをautoにした場合、IEで表示しない場合、ハックを使用するのでしょうか?
  • 04:33
  • Q:おすすめのCSSフレームワークはありますか?
  • 02:17
  • Q:デザインカンプを作る時に、先生は何で作成していますか?
  • 01:45
  • Q:基本RWDはモバイルファーストの考えで制作していくのが良いのでしょうか?
  • 01:28
  • Q:WindowsPhoneのOSが独自仕様でレスポンシブが利かないと聞いたのですが、どうなのでしょうか?
  • 02:15
  • Q:Webのアクセスビリティを向上させる為に役立つレスポンシブWebデザインの活用方法というのは何かあるでしょうか?
  • 02:07
  • 課題発表
開く
スライド資料
授業で使用するファイル

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

担当の先生
関連授業