おためし受講中

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

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

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

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

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

学生代表

  • 未定

    未定

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

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