レスポンシブ Web デザインの基礎

C302e84057a922dce0ecbe80207e3fcc?s=47 mu_zaru
August 13, 2020

レスポンシブ Web デザインの基礎

配信動画はこちら
https://youtu.be/LNI8pr86PpA

もし良かったらムーザルちゃんねるのチャンネル登録お願いします!
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

C302e84057a922dce0ecbe80207e3fcc?s=128

mu_zaru

August 13, 2020
Tweet

Transcript

  1. YouTube Live (2020.08.13 Thur. 21:00~)

  2. None
  3. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で

    macOS アプリづくりが 趣味 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  4. 1. 概念 2. 作り方 3. 小ネタ レスポンシブ Web デザイン

  5. 1. 概念 2. 作り方 3. 小ネタ レスポンシブ Web デザイン

  6. ひと昔前のモバイル対応 CSS HTML CSS HTML デスクトップとモバイル、それぞれ専用 の HTML と CSS

    を作って完全に分けて いた 大変だなぁ エンジニア z さん
  7. 今はレスポンシブでモバイルファースト CSS HTML レスポンシブ Web デザインでモバイルもデスクトップも同じ HTML / CSS を使うようになった。

    作り方の流れは、まずモバイル用に作ってから、徐々に画面サイ ズが大きい環境用に最適化していくモバイルファーストのやり方 が推奨されている(主に Google に) まずモバイル エンジニア z さん 次にデス クトップ
  8. レスポンシブ Web デザイン?

  9. None
  10. レスポンシブ Web デザイン 3要素 Fluid grid layout 液体のように柔軟なレイアウ ト。px ではなく

    % や em な どの相対的な単位を使う。リ キッドデザインとも言う Flexible image デバイスに応じて適切な画像 とメディアを表示する Media query デバイスの機能を条件にして CSS を出し分けすることがで きる CSS
  11. Fluid grid layout って何? 3要素

  12. Fluid は相対的に計算する % 指定をすると、親要素の幅を元に計算する 100% = 320px はみ出ちゃう… 絶対的 相対的

  13. Fluid は相対的に計算する % 指定にすると画面サイズに応じて伸縮する デスクトップのブラウザ スマホのブラウザ

  14. Flexible な画像って何? 3要素

  15. どんなデバイスであっても、 はみ出さず伸縮してきちんと表示される img { width: 100%; } CSS

  16. Media query って何? 3要素

  17. 画面サイズに応じて CSS を切り替える @media (条件) { 該当した場合の CSS } CSS

    いろいろな条件を設定できる - min-width / max-width (幅) - orientaion (向き) - hover / pointer (マウス・タッチパネル)
  18. 画面サイズに応じて CSS を切り替える スマホ タブレット デスクトップ 横幅が 481px 以上のデバイス 横幅が

    769px 以上のデバイス
  19. レスポンシブは銀の弾丸ではない

  20. レスポンシブで 全てを解決しようとしない CSS HTML レスポンシブだけで全ての環境への最適化をしようとしない。 無理に適用をしてユーザ体験が悪くなるのでは意味がない。 大幅な UI の変更が必要であれば、部分的に専用の HTML

    ・スタ イルと、レスポンシブな構成を組み合わせる。 全て完璧に エンジニア z さん ちょっと 使いにくい
  21. 1. 概念 2. 作り方 3. 小ネタ レスポンシブ Web デザイン

  22. Viewport を使って統一する

  23. モバイルだと文字が小さい… デスクトップ用をモバイルで表示すると…

  24. <meta name="viewport" content="width=device-width, initial-scale=1.0"> デスクトップ・モバイルなどあらゆる環境で表示を統一するには viewport を指定する。基本は↑の指定で良い。 他のオプションは必要ない。 デバイスに依存しない ピクセル密度になる

    ブラウザが自動調整するのを防ぐ ( 昔の iOS Safari 横向きモードなど ) Viewport で密度を統一させる
  25. Flexbox で柔軟なレイアウト

  26. flexbox は子要素を良い感じに並べる flex コンテナ flex アイテム flex コンテナ flex アイテム

    display: flex; flex 指定をした要素の子要素は自動的に flex アイテムになる。 何も指定しなくても flex アイテムを横並びにしてくれる。 子要素の並びは縦や逆順などを flex-direction で指定ができる
  27. 余白は flex-grow で指定 余っているスペース flexbox は何も指定しない場合、flex アイテム分の width を確保す ると、残りの余っているスペースに対しては何もしない。

    アイテムの余白を調整するには、flex-grow を指定して調整する。 (*) 他にもいろんな調整の仕方があるがよく使うパターンのみ
  28. 余っている スペース flex-grow 2 flex-grow 1 flex-grow 2 flex-grow 1

    grow が 2 なので、2個割り当てる grow が 1 なので、1個割り当てる 余っているスペースを 3 分割する (flex アイテム全ての grow 合計値で割る) 余っている スペース 余っている スペース
  29. 余っているスペース flex-grow: 1 width: 100px 片方を固定幅、片方は残り全てパターン 数値はなんでも良い。 grow が指定されていることで余白を全て割り当てられる

  30. Flexbox でページネーション

  31. ページネーションを flexbox で作る

  32. <ul> <li> ul { width: 100%; display: flex; } CSS

    <body> 余っているスペース
  33. <ul> <li> ul { width: 100%; display: flex; justify-content: space-between;

    } CSS <body> 幅いっぱい、均等になるように配置 自動調整 余白 自動調整 余白 自動調整 余白
  34. 均等な幅で割り振れている。 これでも良いけど、できれば最初と最後にだけ余白をつけたい。

  35. <ul> ul { width: 100%; display: flex; justify-content: space-between; }

    CSS <body> li:first-child, li:last-child { flex-grow: 1; } CSS 自動調整 余白 <li> 自動調整 余白 最初と最後だけに余白を作りたい grow で余白調整するので、これは必要ない
  36. Grid で縦横にレイアウト

  37. Grid を最初から完全に 理解するのは難しい! 結 論 配信では最低限、活用できるものを紹介します

  38. 1個だけ 覚えれば (最低限) 使える 結 論

  39. Grid は縦と横の格子を定義する 縦が何行あるか 1行目の高さはいくつか 横が何列あるか 1列目の幅はいくつか

  40. とにかく grid-template を覚える .grid { display: grid; grid-template: "header header

    header " 50px "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } .header { grid-area: header; } .left-menu { grid-area: left-menu; } CSS いろんな定義の方法があるけど…
  41. .grid { display: grid; grid-template: "header header header " 50px

    "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } スペース区切りで エリアに名前をつけられる
  42. .grid { display: grid; grid-template: "header header header " 50px

    "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } エリアをまたぐ場合は同じ名前を指定する
  43. .grid { display: grid; grid-template: "header header header " 50px

    "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } 行の高さを指定
  44. .grid { display: grid; grid-template: "header header header " 50px

    "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } 列の幅を指定
  45. .grid { display: grid; grid-template: "header header header " 50px

    "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } .header { grid-area: header; } .left-menu { grid-area: left-menu; } CSS 表示したいタグに エリア名を指定する 定義したエリア名を、要素で指定する
  46. 簡単にグリッドレイアウトできた

  47. 単位 fr

  48. .grid { display: grid; grid-template: "header header header " 50px

    "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } .header { grid-area: header; } .left-menu { grid-area: left-menu; } CSS grid コンテナで余っているスペースを 指定した fr の数で割って、割り振る。 flexbox の grow に似ている 可変にしたい要素に 1fr 付けるくらいの感じで OK fr は利用可能なスペースの分数
  49. 200px 固定 200px 固定 余ったスペース(相対)

  50. ブラウザを小さくすると 要素も小さくなる

  51. Grid で要素を繰り返し配置する

  52. 1 2 3 4 5 6 7 ・・・・ 同じ大きさの要素が n

    個並ぶ Grid
  53. 1 2 3 4 5 6 7 ・・・・ 画面サイズに応じて、幅と数を調整したい 1

    2 3 4 5 ・・・ 1 2 3
  54. .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } CSS

    子要素の最低限の 維持したい幅を指定する 余っているスペースに 子要素をフィットしてくれる 繰り返しグリッドを設定してくれ る。子要素の数が確定できない場 合に便利
  55. Flexbox と Grid 使い分け

  56. Flexbox は一次元、Grid は二次元 Flexbox Flexbox は縦か横のどちらかに限定される。 折り返したとしても1方向を維持する Grid Grid は縦横を自由に設定可能

  57. Flexbox は一次元、Grid は二次元 Flexbox Flexbox は縦か横のどちらかに限定される。 折り返したとしても1方向を維持する Grid Grid は縦横を自由に設定可能

    横並びなメニューやヘッダーなどの UI 構築に向いている ページ全体のレイアウトや、折り返しが 必要な繰り返しコンテンツに向いている
  58. レスポンシブな画像

  59. 画像をレスポンシブにする目的 画像ファイルサイズの最適化 画像の見え方の最適化

  60. 同じ画像で、それぞれの デバイスに配信する問題 小さく表示する のに、大きい画 像をダウンロー ドして無駄だ… デバイスによって最適なファイルサイズが異なる

  61. 画像をレスポンシブにする目的 画像ファイルサイズの最適化 画像の見え方の最適化 解決方法は、2つ

  62. <img src="x1.png" srcset="x1.png, x2.png 2x, x3.png 3x" width="300" height="200"> HTML

    srcset 属性でピクセル密度ごとに分ける 普通のディスプレイの場合 Mac の Retina ディスプレイ や 4K、スマホなどの場合 高解像度スマホなど 解決 1
  63. <img srcset="./300x300.png 300w, ./600x600.png 600w" sizes="(max-width: 300px) 300px, 600px" src="./300x300.png">

    HTML sizes 属性で画面サイズに応じて分ける 解決 2 ブラウザの画面サイズに応じて、表示する画像を 振り分けられる。シンプルな記法のわりに難しい 挙動をするので最適化するのは厳しい印象。 正直、普段使いする必要はないと思う。
  64. 画像をレスポンシブにする目的 画像ファイルサイズの最適化 画像の見え方の最適化 解決方法は、2つ この手の最適化は手動でやるのは運用上、無理が 出てくるので、画像リサイズサービスや CDN な どを使って自動で最適化するのがオススメ

  65. 画像ファイルサイズの最適化 画像の見え方の最適化 画像をレスポンシブにする目的

  66. モバイルだと横長の画像が縮小され 小さくてイメージが伝わりにくい

  67. <picture> <source media="(max-width: 375px)" srcset="crop.jpg"> <source media="(min-width: 376px)" srcset="normal.jpg"> <img

    src="normal.jpg"> </picture> HTML picture タグで画像を出し分ける 解決 選択肢になる画像を source で定義する。 Media query を使って使用する条件を設定
  68. 拡大クロップしたものを適用した例

  69. Media query のブレイクポイント

  70. ブレイクポイント 何を設定すればいいの問題 <style type="text/css"> p { color: red; } @media

    (min-width: ???px) { p { color: blue; } } </style> さまざまなデバイスが あるし、どんな閾値で 設定するのが良いか決 めにくい…
  71. 定番なオススメ設定 <style type="text/css"> p { color: red; } @media (min-width:

    481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style>
  72. 定番なオススメ設定 <style type="text/css"> p { color: red; } @media (min-width:

    481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> 共通 + スマホ
  73. 定番なオススメ設定 <style type="text/css"> p { color: red; } @media (min-width:

    481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> タブレット + 横向きスマホ
  74. 定番なオススメ設定 <style type="text/css"> p { color: red; } @media (min-width:

    481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> デスクトップ + 大型タブレット
  75. モバイルファーストで作る <style type="text/css"> p { color: red; } @media (min-width:

    481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> モバイルから作り始めて、徐々 に解像度が大きいデバイスに合 わせて作っていく
  76. <style type="text/css"> p { } @media (max-width: 480px) { p

    { color: red; } } @media (min-width: 481px) and (max-width: 768px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> 個人的にはこちらの厳密に指定 するスコープタイプが好き
  77. @media (min-width: 481px) {} @media (min-width: 769px) {} @media (max-width:

    480px) {} @media (min-width: 481px) and (max-width: 768px) {} @media (min-width: 769px) {} スタイルが被ってい るので、打ち消しが 必要になることがあ る スタイルがかぶらな いので考えやすい (冗長になることもある)
  78. 1. 概念 2. 作り方 3. 小ネタ レスポンシブ Web デザイン

  79. フォントサイズは px 指定いいの?

  80. px でも問題ない 結 論 昔はダメだった(文字サイズが固定で拡大できなかった) また、今でも一部のフォントサイズ拡大機能は使えなくな るので、ベストは rem などの相対指定。理解して px を使

    う分には現実的でベターと考えている
  81. IE 対応って…?

  82. autoprefixer 使おう 結 論 勝手に IE や他ブラウザ対応の CSS に書き換えてくれる

  83. スマホだけ改行したい

  84. <style type="text/css"> @media (min-width: 769px) { .sp_br { display: none;

    } } </style> <p>スマホではここで<br class="sp_br">改行したい</p>
  85. ありがとうございました! 次回は... Vim 入門 をやります!木曜21時から30分 質問感想など呟いていただけると嬉しいです! - ハッシュタグ #mu_zaru -

    ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタン お願いします! ムーザルちゃんねる