おためし受講中

レスポンシブコーディング入門 -ブレイクポイントを増やす-

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

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

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

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

学生代表

  • 徳田 葵

    徳田 葵

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    アジェンダ
    00:25  (00:39 ~ )
    参考授業の紹介
    01:05  (01:04 ~ )
    3つのシリーズのおさらい
    01:07  (02:09 ~ )
    授業資料をそろえよう
    01:31  (03:16 ~ )
    デバイズプレビュー
    00:11  (04:47 ~ )
    タッチデバイズの幅
    00:25  (04:58 ~ )
    スマートフォンの幅
    00:21  (05:23 ~ )
    タブレットの幅
    01:42  (05:44 ~ )
    デバイズ幅を確認しよう
    00:06  (07:26 ~ )
    ブラウザで切りかわるUIを確認してみよう
    00:38  (07:32 ~ )
    演習素材を確認しよう
    00:46  (08:10 ~ )
    前回までコーディングしたCSS
    00:22  (08:56 ~ )
    タブレットのUIをブラウザで確認してみよう
    02:24  (09:18 ~ )
    ブレイクポイント毎にCSSを書こう
    00:11  (11:42 ~ )
    タブレット用のブレイクポイントを作ろう
    01:54  (11:53 ~ )
    グローバルナビ部分の修正をしよう
    08:03  (13:47 ~ )
    ヘッダー部分の修正をしよう
    06:41  (21:50 ~ )
    メインコンテンツ部分の修正をしよう
    09:05  (28:31 ~ )
    次回授業の内容を確認しよう
    01:56  (37:36 ~ )
    【後半】質疑応答
    先生からのお知らせ
    07:27  (40:22 ~ )
    Q,基本的には今作っているブレイクポイントが標準でしょうか?
    01:49  (47:49 ~ )
    Q,レスポンシブでヒーローイメージをやや軽めにしたい時、黒いドットや透明なグラデーションを上に敷いて、 サイズを小さめにすることが流行っていますが、そのようにした場合画像の横幅はいくつにするのが、主流でしょうか?
    03:07  (49:38 ~ )
    Q,UIは何種類ぐらい用意できれば見栄えがよくなりますか?
    00:30  (52:45 ~ )
    Q,SPファーストとPCファーストでメディアクエリを書く順番の決まりはありますか?(cssを1ファイルでまとめる場合)
    02:23  (53:15 ~ )
    Q,作るサイトによって、違いますが、top◯%などの%の計算の仕方などは、どのように出していますか?電卓で計算して出していますか?
    01:07  (55:38 ~ )
    Q,実際のデバイスとfirefox for developerのレスポンシブモードでなどのエミュレーター?でどれだけ正確性が違うでしょうか?それとももっといい方法があります?
    01:49  (56:45 ~ )
    Q,article section figure{ padding:1rem 0; }を入れると画像が大きくなるのはなぜなのでしょうか。
    01:55  (58:34 ~ )
    Q,レスポンシブだとブレークポイントごとに画像がぼやけぎみになることが有りますが、どのようにどのように対処していますか?
    01:09  (1:00:29 ~ )
    Q,最近4Kスマホが出てきていますが、Retina同様に対応する必要ありますか?
    00:32  (1:01:38 ~ )
    次回授業のお知らせ
      (1:02:10 ~ )