GitHub Pagesで構築したブログをスマホ対応させてみた / make mobile-compatible with lightweight css framework

Sendai Frontend Meetup #13 での発表資料です。
https://sfeug.connpass.com/event/329167/

スライド中にある、モバイルブラウザのビューポートのデフォルト値について、背景となる情報をしぃるさんが補足してくださっています。
https://x.com/akathea_/status/1837074872977215794

Transcript

1. GitHub Pagesで構築した ブログをスマホ対応させてみた もしくは、レスポンシブ対応入門 2024.9.20 Sendai Frontend Meetup #13 #sfeug 𝕏: @thatblue_plus (as あのぶる+)
2. はじめまして or お久しぶりです 普段はRuby界隈におりまして 四十路を目前にしてとうとう 職業Rubyistになりました あとは競技プログラミングを やったりなんだりしています 業務初日に執行役員(兼部長)と撮ってもらった It’s me!
3. 新年度が始まり 部署業務の一環として 開発ブログの運営チームに参加 そして「おっしゃやったろ！」と無駄に張り切る私
4. 弊社開発ブログはGitHub Pagesで動いています https://tech.carrot.co.jp/2021/03/05-start-develop-blog
5. ところで GitHub PagesってRubyで動いてるんですよ！(謎のドヤ) ソース ブランチからサイトを公開する場合、 GitHub Pages では、既定で Jekyll を 使用してサイトをビルドします。 https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-page s#static-site-generators Rubyで動く静的サイトジェネレータ
6. ……という話は実はあまり 関係なくて そんな弊社開発ブログを スマホ対応した話をしようと 思います
7. 前提条件 • オリジナルのデザインテンプレートを使っている ◦ かつ、作業開始時点では特段CSSフレームワークを使ってはいない • 大きくデザインを変えることは今回はしない ◦ ひとまず現状のデザインを維持する形で、記事の一覧と記事ページを スマホでも読みやすくしたい
8. 前提条件 • オリジナルのデザインテンプレートを使っている ◦ かつ、作業開始時点では特段CSSフレームワークを使ってはいない • 大きくデザインを変えることは今回はしない ◦ ひとまず現状のデザインを維持する形で、記事の一覧と記事ページを スマホでも読みやすくしたい ⇒レスポンシブ対応のグリッドシステムだけ提供しているCSSフレームワークとか ないかな？
9. Pure.cssを 採用してみた 米Yahoo!社が提供する CSSフレームワーク 「超軽量型」という分類で紹介される
10. Pure.cssの何が良さげに見えた？ • フルセット入れても3.5KBという超軽量 ◦ ちなみに手元で確認してみたところ、資料作成時点で Bootstrap(5.3.0/CSSのみ)が31.9KB、Tailwind CSS(3.4.5)が112KB でした • 一部のモジュールだけを組み込むことが出来る ◦ コンポーネントの上書きなど、意図しない影響があったとしても 最小限の心配で済む ◦ 個人的には結構大きな決め手だった
11. Pure.cssの モジュール一覧 https://purecss.io/customize/#individual-modules グリッドシステムだけを組み込むことが 出来そう！
12. 実際にPure.cssを組み込んで スマホ対応させよう！
13. よかったら完成品を 見ながらどうぞ https://tech.carrot.co.jp/
14. 確認: スマートフォン対応って(今回のところは) 何をしたらいい？ • 画面の横幅サイズ(ビューポート)を適切に定義する • 画面の横幅サイズによって、どのコンテンツをどのくらいの幅で (ついでにどのようなレイアウトで)表示するかを調整する
15. 作業1: ビューポートの設定をする
16. ビューポートとは？ • ものすごくざっくり言うと、ブラウザのWebページの表示領域のこと ◦ 「視覚ビューポート」と「レイアウトビューポート」の2種類が存在 するのですが、今回の話においてはあまり重要じゃないので割愛します ビューポートはコンピューターグラフィックの中で現在表示されている領域を表しま す。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユー ザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見 ている文書の部分です。 https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts
17. 「ビューポートの調整」として何をすればよいか？ 結論から言ってしまうと、(だいたいの場合においては)以下の1行を追加すればよい <meta name="viewport" content="width=device-width, initial-scale=1.0">
18. 「ビューポートの調整」として何をすればよいか？ 結論から言ってしまうと、(だいたいの場合においては)以下の1行を追加すればよい <meta name="viewport" content="width=device-width, initial-scale=1.0"> ① ② ①: ビューポート幅を端末の幅に合わせる ②: ページを読み込んだときの表示倍率を 1.0(等倍)にする
19. 私は思いました 「width=device-widthって当たり前 過ぎなのでは、この設定いる？」
20. それをすてるなんて とんでもない！ 多くのモバイル向けブラウザでは ビューポートの横幅がデフォルト 980pxとして扱われる(らしい) この幅が980px扱いで レンダリングされる
21. 横幅980pxを 横幅375pxに 押し込むとどうなるか ※作業前のスクショなので、 完成時の幅980pxのレイアウト とは多少異なります
22. ビューポートの指定 だけするとこうなる ※デスクトップChromeでの シミュレーション
23. ひとまず、文字が読めるようには なった！
24. 作業2: レイアウトの調整をする
25. 作業2-1: 現状のレイアウトを Pure.cssベースに調整する
26. 基本のレイアウト (中略) まずは、元々想定されている PCでの表示(1400px程度)ベースで レイアウトを組む
27. サイド メニュー: 横幅20% 記事一覧: 横幅80% 最新記事: 横幅100% (サムネイル50%: 記事概要50%) 過去の記事: 横幅 33.33..% レイアウトの指定 内容
28. キーワードは「Flexbox」
29. Flexboxとは？ • 並べたアイテムをいい感じに折り返したりしてくれるレイアウト方法 ◦ 画面幅に合わせていい感じに間隔を空けて並べたり、縦方向に 並べたりもできる フレックスボックス (Flexbox) は、アイテムを行または列に並べるための 1 次元のレ イアウト方法です。アイテムがたわんで (伸びて)追加の空間を埋めたり、縮んで小さ い空間に収まったりします。 https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
30. 親要素の幅に合わせて いい感じに 折り返してくれる width: 400px; width: 100px width: 100px width: 150px width : 50px width: 200px; width: 150px width : 50px width: 100px width: 100px display: flex display: inline-block
31. 要するにFlexboxでレイアウトを 組めばいいので CSSを地道に書いていっても いいんだけど… 正直めんどくさい
32. Pure.cssのグリッドシステムを導入する 今回はグリッドシステムだけを導入するので、グリッドシステム用のスタイルシートだけを読み込む <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
33. レイアウトの指定 内容(雑な抜粋) pure-* というクラスを指定して レイアウトを作っていく <div class="pure-g"> <div id="main" class="pure-u-4-5"> <!-- 本文 --> <div class="pure-g"> <div class="pure-u-1"> <!-- 最新記事 --> </div> </div> <div class="pure-g"> <div class="pure-u-1-3"> <!-- 過去の記事 --> </div> </div> </div> <aside id="aside" class="pure-u-1-5"> <!-- サイドバー --> </aside> </div>
34. レイアウトの指定 内容(雑な抜粋) pure-g(gridの略)で グリッドレイアウトの宣言をする 指定するとdisplay:flex 属性が付く <div class="pure-g"> <div id="main" class="pure-u-4-5"> <!-- 本文 --> <div class="pure-g"> <div class="pure-u-1"> <!-- 最新記事 --> </div> </div> <div class="pure-g"> <div class="pure-u-1-3"> <!-- 過去の記事 --> </div> </div> </div> <aside id="aside" class="pure-u-1-5"> <!-- サイドバー --> </aside> </div>
35. レイアウトの指定 内容(雑な抜粋) pure-u-*(unitの略)で 子要素であることの宣言をする 末尾の数字列で横幅を指定する 指定するとdisplay: inline-block 属性が付き、末尾の数字を分数と 捉えた横幅が指定される (pure-u-4-5であれば5分の4なので 80%) <div class="pure-g"> <div id="main" class="pure-u-4-5"> <!-- 本文 --> <div class="pure-g"> <div class="pure-u-1"> <!-- 最新記事 --> </div> </div> <div class="pure-g"> <div class="pure-u-1-3"> <!-- 過去の記事 --> </div> </div> </div> <aside id="aside" class="pure-u-1-5"> <!-- サイドバー --> </aside> </div>
36. 実際のデザインとの対応 <div class="pure-g"> <div id="main" class="pure-u-4-5"> <!-- 本文 --> <div class="pure-g"> <div class="pure-u-1"> <!-- 最新記事 --> </div> </div> <div class="pure-g"> <div class="pure-u-1-3"> <!-- 過去の記事 --> </div> </div> </div> <aside id="aside" class="pure-u-1-5"> <!-- サイドバー --> </aside> </div> pure-u-1 pure-u-4-5 pure-u-1-3 pure-u- 1-5
37. 実験: このままスマホで表示させると どうなる？
38. 幅375pxの中に無事 全要素が収まりました！ ※デスクトップChromeでの シミュレーション
39. 違う、そうじゃない かっこいい曲なので ぜひ聴きましょう🎧 (THE FIRST TAKEへのリンク)
40. 作業2-2: 画面横幅によって レイアウトを調整する
41. キーワードは「メディアクエリ」
42. メディアクエリとは？ • 特定のCSSを適用する条件を指定することができるクエリ ◦ 画面サイズや、画面の向き(というかウィンドウが縦長 or 横長)などが指定 できる • 印刷用のスタイルも指定できて大変便利なんですが今回は割愛します CSS メディアクエリー(CSS Media Query)を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した ルールに一致する場合にのみ CSS を適用できます。 https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries
43. 素のCSSで書くと… mainというIDが付いたdiv要素が画面横幅600px以下だと100%、601px以上だと80%で表示される例 @media screen and (max-width: 600px) { div#main { width: 100%; } } @media screen and (min-width: 601px) { div#main { width: 80%; } }
44. 正直めんどくさいので これもPure.cssに頼ります ぎじゅつの ちからって すげー！
45. Pure.cssではどのように設定されているか タブレット縦持ち スマホ横持ち 下限指定なし(≒スマホ縦持ち) タブレット横持ち/小さめのPC画面 PC画面 サイズ目安
46. Pure.cssではどのように設定されているか タブレット縦持ち スマホ横持ち 下限指定なし(≒スマホ縦持ち) タブレット横持ち/小さめのPC画面 PC画面 サイズ目安 境界となる値を 「ブレークポイント」と呼びます
47. 基本デザインからブレークポイント ごとにどう切り替えていくかで 考えるのがポイント 実際に横幅を切り替えながら調整するのがよいです
48. おさらい・ 基本のレイアウト (中略) lg(横幅1024px)以上の画面幅に 適用させます
49. lg⇒mdでの変更内容 (横幅1024px未満) • 過去の記事を3カラム⇒2カラムに 変更 • サイドバーを画面下部に100%幅で 表示するように変更 (中略)
50. md⇒smでの変更内容 (横幅768px未満) • 最新記事のサムネイルと記事詳細 情報を100%ずつの縦並べに変更
51. sm⇒(最小幅)での変更内容 (横幅568px未満) • 過去の記事を1カラム表示に変更
52. 実際にセットするクラスを考えていく 過去記事が2カラムになる 最新記事の表示が横並びになる (すべてのユニットが横幅100%) 過去記事が3カラム/サイドバーが横並び 一段階狭いサイズとの差分
53. レイアウトの指定 内容(updated) クラスの指定は狭い⇒広いの順で 指定していくと混乱しづらい <div class="pure-g"> <div id="main" class="pure-u-lg-4-5"> <!-- 本文 --> <div class="pure-g"> <div class="pure-u-1"> <div class="pure-g"> <!-- 最新記事 --> <div class="pure-u-md-1-2"> <!-- 最新記事サムネイル --> </div> <div class="pure-u-md-1-2"> <!-- 最新記事詳細情報 --> </div> </div> </div> </div> <div class="pure-g"> <div class="pure-u-sm-1-2 pure-u-lg-1-3"> <!-- 過去の記事 --> </div> </div> </div> <aside id="aside" class="pure-u-lg-1-5"> <!-- サイドバー --> </aside> </div>
54. おまけ: サイドバー が左側にある場合は どうしたら…？ メディアクエリの中でorderを 指定するとよいです @media screen and (max-width: 1023px) { div#main { order: 1; } aside#aside { order: 2; } }
55. まとめ • metaタグでのビューポートの設定を忘れずに行う ◦ 普通にレスポンシブ対応をするなら定型文でよいはず • Flexboxとメディアクエリを使って表示をいい感じに調整する ◦ 自前で頑張って組んでもいいけど、いま出来ているデザインにグリッド システムだけ採用したい場合はPure.cssのことを思い出すとよいかも • 左側に来る要素の表示順を弄りたい場合はorderを使う
56. 多分、会社ブログに「LTしてきまし た」って記事を書いたら完璧なので はと思っている Let’ｓマッチポンプ！