おためし受講中

レスポンシブコーディング入門 -ブレイクポイントごとのCSS完成-

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

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

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

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

学生代表

  • 未定

    未定

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    本日のアジェンダ
    00:32  (00:35 ~ )
    参照授業の紹介
    00:47  (01:07 ~ )
    レスポンシブデザインのおさらい
    00:44  (01:54 ~ )
    授業素材の準備方法
    01:31  (02:38 ~ )
    仕上げのcssを書いていこう
    00:10  (04:09 ~ )
    不具合が出ている箇所を調べよう
    02:45  (04:19 ~ )
    崩れたUIを修正しよう
    00:08  (07:04 ~ )
    右側に隙間がでる不具合を修正しよう
    03:46  (07:12 ~ )
    横置きタブレットUIのファーストビューの修正をしよう
    07:43  (10:58 ~ )
    cssのnav部分の修正をしよう
    03:36  (18:41 ~ )
    1240pxより幅が狭まった場合の不具合を修正しよう
    03:15  (22:17 ~ )
    mainタグ内の崩れを上書きしよう
    03:53  (25:32 ~ )
    はみ出したtableタグを修正しよう
    03:53  (29:25 ~ )
    1199pxからのfooterのカラム落ちを修正しよう
    04:34  (33:18 ~ )
    スクーロゴの修正しよう
    02:36  (37:52 ~ )
    上に戻るボタンの修正
    02:52  (40:28 ~ )
    実機で検証してみる
    01:12  (43:20 ~ )
    【後半】質疑応答
    Q,atomってどこですか
    00:24  (44:52 ~ )
    Q,今回はじめてなので設定したすべてのブレークポイントを教えて下さい。資料を見ると以下のブレークポイントがあるみたいですがそれ以外にあればお願いします タブレット用 768px-991px 狭いPC用 1240-992px スマホ用 415px-768px 不具合修正用? 921px-991px 921px-1240px
    01:16  (45:16 ~ )
    Q,ブレイクポイントが重なる部分があると、どちらが当たっているのか判らない時があります。重ならないように設定してもよいのでしょうか?
    00:23  (46:32 ~ )
    Q,個人や小さな制作会社では、最低で何台くらいの実機を用意するといいでしょうか?
    01:02  (46:55 ~ )
    Q,BootstrapなどのCSSフレームワークを使わずにレスポンシブコーディングする場合は、今日の授業でやったように、崩れたUIの細かい修正が必要となってくるのでしょうか?
    04:45  (47:57 ~ )
    Q,(min-width) と(max-width)の記載する順番に意味はあるのですか?
    01:06  (52:42 ~ )
    Q,vm,vhは数年使えないようなので当分は横幅やmarginは%指定が基本だと思いますが、 remで指定しても問題ないのでしょうか? remだと可変しないので固定になってしまいますが、レスポンシブは、フォントサイズ以外は、 すべて%でなくてはいけないというルールは特にありませんか? %だったりremだったりと混在してもOKでしょうか?
    03:19  (53:48 ~ )
    Q,PCのレイアウトでアクセス、お問い合わせ部分、LINEロゴがずれてしまっているのですが、どこを修正すれば良いですか?
    03:29  (57:07 ~ )
    Q,maerginやpaddingも%がいいのでしょうか?
    00:18  (1:00:36 ~ )
    Q,jqueryなどを使って画像を表示、ブレイクポイントを追加した事によってjqueryなどに不具合が発生するとかありますか?(ないとは思いますが)
    00:43  (1:00:54 ~ )
    お知らせ
      (1:01:37 ~ )