おためし受講中

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

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

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

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

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

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

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:14  (00:13 ~ )
    レスポンシブWebデザインとは
    05:20  (01:27 ~ )
    RWDの特徴
    08:52  (06:47 ~ )
    Fluid Grid
    05:53  (15:39 ~ )
    Fluid ImageとMedia Queries
    11:19  (21:32 ~ )
    ブレイクポイント
    06:57  (32:51 ~ )
    Viewport
    03:22  (39:48 ~ )
    ハンズオン実習
    28:04  (43:10 ~ )
    さらに最適化を
    03:03  (1:11:14 ~ )
    RWDワークフロー
    06:43  (1:14:17 ~ )
    RWDとこれからのWeb
    11:26  (1:21:00 ~ )
    まとめ
    01:47  (1:32:26 ~ )
    【後半】質疑応答
    Q:レスポンスデザインでは設計が難しいものがあるとおっしゃっていましたが、どんなものになると難しい/不可能になるのでしょうか?
    02:36  (1:35:10 ~ )
    Q:画像フォントよりWebフォントの方がパフォーマンス的には良いんですか?
    01:39  (1:37:46 ~ )
    Q:Wordpressなどでも、レスポンシブデザインは今日習った手順で実装できますか?
    02:06  (1:39:25 ~ )
    Q:PCサイトの横幅を狭くしてスマートフォンで表示すると画面一面が文字だけになりそうですが、この辺りを工夫している事例などがあれば、ご紹介して頂きたいです
    01:47  (1:41:31 ~ )
    Q:プロトタイプを作成するに辺り、どれくらいの工数を設けてますか?
    01:59  (1:43:18 ~ )
    Q:heightをautoにした場合、IEで表示しない場合、ハックを使用するのでしょうか?
    04:33  (1:45:17 ~ )
    Q:おすすめのCSSフレームワークはありますか?
    02:17  (1:49:50 ~ )
    Q:デザインカンプを作る時に、先生は何で作成していますか?
    01:45  (1:52:07 ~ )
    Q:基本RWDはモバイルファーストの考えで制作していくのが良いのでしょうか?
    01:28  (1:53:52 ~ )
    Q:WindowsPhoneのOSが独自仕様でレスポンシブが利かないと聞いたのですが、どうなのでしょうか?
    02:15  (1:55:20 ~ )
    Q:Webのアクセスビリティを向上させる為に役立つレスポンシブWebデザインの活用方法というのは何かあるでしょうか?
    02:07  (1:57:35 ~ )
    課題発表
      (1:59:42 ~ )