SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

レスポンシブCSS：スマートフォンからPCまで読みやすいサイトにするの解説動画

再生時間 8:49動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、第七回です。
  3. 0:05今回のテーマは、レスポンシブ対応です。
  4. 0:08前回は、フレックスボックスとグリッドで、カードを三列に並べる横並びのレイアウトを作りました。
  5. 0:15でも、そのままだと、スマートフォンのような狭い画面では窮屈で読めません。
  6. 0:21今回は、その横並びを、狭い画面でも読める形に育てます。
  7. 0:25ゴールは、特定のスマートフォンの機種にぴったり合わせることではありません。
  8. 0:31内容が無理なく収まる幅に応じて、配置を変えられるようにすることです。
  9. 0:36元になる記事は、エスイーの部屋の、レスポンシブ シーエスエス、です。
  10. 0:42考え方の出発点は、狭い画面を基準にすることです。
  11. 0:46まず、カードと紹介部分を一列に組み立てます。
  12. 0:50そのうえで、幅が十分にある場合だけ、メディアクエリーで三列や二列へ変更します。
  13. 0:57狭い画面から段階的に広げていく、という考え方です。
  14. 1:01逆に、ピーシー版のレイアウトをそのまま縮めるだけだと、文字や操作する部品まで一緒に小さくなってしまい、
  15. 1:07読みにくく、押しにくくなります。
  16. 1:12画面の幅に合わせて変えるべきは、大きさではなく、内容の配置そのものだ、という発想を持ってください。
  17. 1:21土台になるのが、ビューポートという設定です。
  18. 1:25エイチティーエムエルのヘッドの中に書かれている、メタ要素です。
  19. 1:30内容は、幅イコールデバイス幅、初期スケールは一、と読めます。
  20. 1:35端末の画面幅を基準にして、等倍でページを表示してください、という指示です。
  21. 1:42第一回で一度登場した、あの設定です。
  22. 1:45注意点が二つあります。
  23. 1:47一つ、この指定だけではレイアウトは自動的には整いません。
  24. 1:51幅や列数の調整は、シーエスエス側の仕事です。
  25. 1:55もう一つ、利用者の拡大を禁止するような指定は加えません。
  26. 2:00読みやすくするための拡大は、利用者の大切な操作だからです。
  27. 2:05では、追加するシーエスエス全体を見てみましょう。
  28. 2:11場所は、スタイルズ ドット シーエスエスの末尾です。
  29. 2:17大きく三つの塊があります。
  30. 2:20まず、カードと紹介部分の列を、一列に上書きします。
  31. 2:26前回書いた三列の指定は残したまま、後ろから一列に直す形です。
  32. 2:33次に、見出しエイチワンの文字サイズに、クランプという仕組みを使います。
  33. 2:41最後が、メディアクエリーです。
  34. 2:45画面幅が四十八レム以上のときだけ、カードを三列、紹介部分を二列に戻します。
  35. 2:53この後のスライドで、各部分を一つずつ読み解いていきます。
  36. 3:00メディアクエリーの読み方を確認します。
  37. 3:03アットマーク、メディア、と書き、括弧の中に条件を入れます。
  38. 3:08今回の条件は、ミン ウィドゥス、四十八レム。
  39. 3:12画面の幅が、四十八レム以上であること、という意味です。
  40. 3:17条件が合うときだけ、中括弧の中の指定が効きます。
  41. 3:21合わなければ、その部分は丸ごと無視されます。
  42. 3:25また、なぜこの塊をファイルの末尾に書くのかもポイントです。
  43. 3:30シーエスエスは、同じ詳しさなら、後ろに書いた指定が優先されます。
  44. 3:35末尾に置くことで、狭い画面向けの上書きも、広い画面向けの戻しも、順序通りに効かせることができます。
  45. 3:44切り替えの境目、四十八レムは、どう決めたのでしょうか。
  46. 3:48これは、このサンプルのカードの文章が、読みやすく並ぶ幅として選ばれた数字です。
  47. 3:54一般的な、初期の文字サイズが十六ピクセルの環境では、およそ七百六十八ピクセルにあたります。
  48. 4:01ただし、注意があります。
  49. 4:03メディアクエリーで使う相対単位の基準は、ページの中で変更したルートの文字サイズと、
  50. 4:07単純に同じになるとは限りません。
  51. 4:12ですから、スマートフォンの機種名から固定で決めるのではなく、実際の内容を見ながら調整するのが原則です。
  52. 4:19そして確認は、境目の直前と直後の両方で。
  53. 4:22七百六十七ピクセルと、七百六十八ピクセルで、カードやナビゲーションが突然はみ出さないかを見てください。
  54. 4:30見出しに使った、クランプを読み解きます。
  55. 4:34クランプは、三つの値を順に指定します。
  56. 4:37最小値、画面幅に応じた希望値、最大値です。
  57. 4:41今回の値は、二レム、五 ブイダブリュー、さん点四レム。
  58. 4:46ブイダブリューは、画面幅を基準にした単位で、五ブイダブリューは画面幅の五パーセントです。
  59. 4:53つまり、文字の大きさは画面幅の五パーセントを目安にしながらも、二レムより小さくはならず、
  60. 5:00さん点四レムより大きくもならない、という範囲付けです。
  61. 5:06これで、見出しが際限なく大きくなったり、小さくなりすぎたりするのを防げます。
  62. 5:13ただ、この指定だけで文字拡大への対応が保証されるわけではありません。
  63. 5:19その点は後の確認で扱います。
  64. 5:21狭い画面でよく出るトラブルが、横へのはみ出しです。
  65. 5:25ページを横にスクロールしないと読めない状態ですね。
  66. 5:29はみ出したら、まず原因を探してください。
  67. 5:32候補は、幅を固定した要素、折り返されない長いユーアールエル、白い余白の扱いを指定する、
  68. 5:36ホワイトスペース、ノーラップという折り返し禁止の指定、そして、余白を含めて計算していない幅、
  69. 5:41などです。
  70. 5:46ここで、ページ全体にオーバーフロー エックス、ヒドゥンを付けて、はみ出しを隠してしまうのは早計です。
  71. 5:54隠すだけでは、情報そのものや、キーボードのフォーカスの位置まで見えなくなる場合があります。
  72. 6:00どの要素がはみ出したのかを特定して、その要素を直す。
  73. 6:04これが正しい順序です。
  74. 6:06操作のしやすさも、レスポンシブの一部です。
  75. 6:09まず、ホバーへの依存です。
  76. 6:11ホバーは、マウスのポインターを重ねたときの状態ですが、スマートフォンのタッチ操作には、
  77. 6:16その重ねる、という動作がありません。
  78. 6:21重要な説明や操作を、ホバーのときだけ表示する作りにすると、タッチでは永遠にたどり着けなくなります。
  79. 6:29次に、押しやすさです。
  80. 6:31リンクやボタンには十分な余白を持たせ、隣の操作との距離を確保して、押し間違いを防ぎます。
  81. 6:38この教材の最終シーエスエスでは、操作する部品の高さを、最低四十四ピクセルとしています。
  82. 6:45数字だけでなく、実際に指で押してみた感覚も確認してください。
  83. 6:50見た目の幅だけではなく、拡大とキーボードでも確認します。
  84. 6:55手順です。
  85. 6:56まず、幅三百九十ピクセル程度の狭い画面と、ピーシーの幅の両方で表示を見ます。
  86. 7:04次に、ブラウザーの表示を二百パーセントに拡大します。
  87. 7:09ページが大きくなっても、内容同士が重なったり、フォームのラベルが読めなくなったりしていないかを調べます。
  88. 7:19さらに、タブキーで項目を移動したとき、今どこにフォーカスがあるのかが目で見て分かることも必要です。
  89. 7:28文字を大きくして使う人、キーボードで操作する人にとっても、同じ内容にたどり着けること。
  90. 7:37それがレスポンシブ対応の仕上げの基準です。
  91. 7:41最後に、確認表と練習です。
  92. 7:43確認する幅は四つ。
  93. 7:45三百二十ピクセルでは、本文、画像、フォームが横にはみ出さないこと。
  94. 7:52三百九十ピクセルでは、カードが一列で、無理なく読めること。
  95. 7:57七百六十七と七百六十八ピクセルでは、列が切り替わる前後で重なりがないこと。
  96. 8:04千四百四十ピクセルでは、横幅が広がりすぎず、カードが三列になることです。
  97. 8:12練習として、一番長いカードの説明文を二倍の量にして、隣のカードとの関係が崩れないかも試してください。
  98. 8:21短いダミーの文章だけで設計しないことが大切です。
  99. 8:26まとめです。
  100. 8:27今回は、狭い画面を基準に一列で組み、メディアクエリーで広い画面向けに戻し、
  101. 8:34クランプで文字に範囲を付け、はみ出しと操作性を確認しました。
  102. 8:40次回は、このレイアウトを保ちながら、色と部品の設計を整理します。
  103. 8:47お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

モバイルを基準にメディアクエリーで列数を変更。viewport、clamp、文字拡大、横のはみ出しを確認し、レスポンシブなサイトへ育てます。

解説記事・サンプルコードを読む：レスポンシブCSS：スマートフォンからPCまで読みやすいサイトにする →