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

GitHub Pagesで構築したブログをスマホ対応させてみたもしくは、レスポンシブ対応入門 2024.9.20 Sendai Frontend Meetup #13 #sfeug
𝕏: @thatblue_plus (as あのぶる+)

はじめまして or お久しぶりです普段はRuby界隈におりまして四十路を目前にしてとうとう職業Rubyistになりましたあとは競技プログラミングをやったりなんだりしています業務初日に執行役員(兼部長)と撮ってもらった It’s
me!

新年度が始まり部署業務の一環として開発ブログの運営チームに参加そして「おっしゃやったろ！」と無駄に張り切る私

弊社開発ブログはGitHub Pagesで動いています https://tech.carrot.co.jp/2021/03/05-start-develop-blog

ところで 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で動く静的サイトジェネレータ

……という話は実はあまり関係なくてそんな弊社開発ブログをスマホ対応した話をしようと思います

前提条件 • オリジナルのデザインテンプレートを使っている ◦ かつ、作業開始時点では特段CSSフレームワークを使ってはいない • 大きくデザインを変えることは今回はしない ◦ ひとまず現状のデザインを維持する形で、記事の一覧と記事ページをスマホでも読みやすくしたい

前提条件 • オリジナルのデザインテンプレートを使っている ◦ かつ、作業開始時点では特段CSSフレームワークを使ってはいない • 大きくデザインを変えることは今回はしない ◦ ひとまず現状のデザインを維持する形で、記事の一覧と記事ページをスマホでも読みやすくしたい
⇒レスポンシブ対応のグリッドシステムだけ提供しているCSSフレームワークとかないかな？

Pure.cssを採用してみた米Yahoo!社が提供する CSSフレームワーク「超軽量型」という分類で紹介される

Pure.cssの何が良さげに見えた？ • フルセット入れても3.5KBという超軽量 ◦ ちなみに手元で確認してみたところ、資料作成時点で Bootstrap(5.3.0/CSSのみ)が31.9KB、Tailwind CSS(3.4.5)が112KB でした • 一部のモジュールだけを組み込むことが出来る
◦ コンポーネントの上書きなど、意図しない影響があったとしても最小限の心配で済む ◦ 個人的には結構大きな決め手だった

Pure.cssのモジュール一覧 https://purecss.io/customize/#individual-modules グリッドシステムだけを組み込むことが出来そう！

実際にPure.cssを組み込んでスマホ対応させよう！

よかったら完成品を見ながらどうぞ https://tech.carrot.co.jp/

確認: スマートフォン対応って(今回のところは) 何をしたらいい？ • 画面の横幅サイズ(ビューポート)を適切に定義する • 画面の横幅サイズによって、どのコンテンツをどのくらいの幅で (ついでにどのようなレイアウトで)表示するかを調整する

作業1: ビューポートの設定をする

ビューポートとは？ • ものすごくざっくり言うと、ブラウザのWebページの表示領域のこと ◦ 「視覚ビューポート」と「レイアウトビューポート」の2種類が存在するのですが、今回の話においてはあまり重要じゃないので割愛しますビューポートはコンピューターグラフィックの中で現在表示されている領域を表します。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユーザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見ている文書の部分です。
https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts

「ビューポートの調整」として何をすればよいか？結論から言ってしまうと、(だいたいの場合においては)以下の1行を追加すればよい <meta name="viewport" content="width=device-width, initial-scale=1.0">

「ビューポートの調整」として何をすればよいか？結論から言ってしまうと、(だいたいの場合においては)以下の1行を追加すればよい <meta name="viewport" content="width=device-width, initial-scale=1.0"> ① ② ①: ビューポート幅を端末の幅に合わせる
②: ページを読み込んだときの表示倍率を 1.0(等倍)にする

私は思いました「width=device-widthって当たり前過ぎなのでは、この設定いる？」

それをすてるなんてとんでもない！多くのモバイル向けブラウザではビューポートの横幅がデフォルト 980pxとして扱われる(らしい) この幅が980px扱いでレンダリングされる

横幅980pxを横幅375pxに押し込むとどうなるか ※作業前のスクショなので、完成時の幅980pxのレイアウトとは多少異なります

ビューポートの指定だけするとこうなる ※デスクトップChromeでのシミュレーション

ひとまず、文字が読めるようにはなった！

作業2: レイアウトの調整をする

作業2-1: 現状のレイアウトを Pure.cssベースに調整する

基本のレイアウト (中略) まずは、元々想定されている PCでの表示(1400px程度)ベースでレイアウトを組む

サイドメニュー: 横幅20% 記事一覧: 横幅80% 最新記事: 横幅100% (サムネイル50%: 記事概要50%) 過去の記事:
横幅 33.33..% レイアウトの指定内容

キーワードは「Flexbox」

Flexboxとは？ • 並べたアイテムをいい感じに折り返したりしてくれるレイアウト方法 ◦ 画面幅に合わせていい感じに間隔を空けて並べたり、縦方向に並べたりもできるフレックスボックス (Flexbox) は、アイテムを行または列に並べるための 1
次元のレイアウト方法です。アイテムがたわんで (伸びて)追加の空間を埋めたり、縮んで小さい空間に収まったりします。 https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox

親要素の幅に合わせていい感じに折り返してくれる width: 400px; width: 100px width: 100px width:
150px width : 50px width: 200px; width: 150px width : 50px width: 100px width: 100px display: ﬂex display: inline-block

要するにFlexboxでレイアウトを組めばいいので CSSを地道に書いていってもいいんだけど… 正直めんどくさい

Pure.cssのグリッドシステムを導入する今回はグリッドシステムだけを導入するので、グリッドシステム用のスタイルシートだけを読み込む <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css">

レイアウトの指定内容(雑な抜粋) 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>

レイアウトの指定内容(雑な抜粋) pure-g(gridの略)でグリッドレイアウトの宣言をする指定するとdisplay:ﬂex 属性が付く <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-*(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>

実際のデザインとの対応 <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

実験: このままスマホで表示させるとどうなる？

幅375pxの中に無事全要素が収まりました！ ※デスクトップChromeでのシミュレーション

違う、そうじゃないかっこいい曲なのでぜひ聴きましょう🎧 (THE FIRST TAKEへのリンク)

作業2-2: 画面横幅によってレイアウトを調整する

キーワードは「メディアクエリ」

メディアクエリとは？ • 特定のCSSを適用する条件を指定することができるクエリ ◦ 画面サイズや、画面の向き(というかウィンドウが縦長 or 横長)などが指定できる • 印刷用のスタイルも指定できて大変便利なんですが今回は割愛します
CSS メディアクエリー(CSS Media Query)を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定したルールに一致する場合にのみ CSS を適用できます。 https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries

素の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%; } }

正直めんどくさいのでこれもPure.cssに頼りますぎじゅつのちからってすげー！

Pure.cssではどのように設定されているかタブレット縦持ちスマホ横持ち下限指定なし(≒スマホ縦持ち) タブレット横持ち/小さめのPC画面 PC画面サイズ目安

Pure.cssではどのように設定されているかタブレット縦持ちスマホ横持ち下限指定なし(≒スマホ縦持ち) タブレット横持ち/小さめのPC画面 PC画面サイズ目安境界となる値を「ブレークポイント」と呼びます

基本デザインからブレークポイントごとにどう切り替えていくかで考えるのがポイント実際に横幅を切り替えながら調整するのがよいです

おさらい・基本のレイアウト (中略) lg(横幅1024px)以上の画面幅に適用させます

lg⇒mdでの変更内容 (横幅1024px未満) • 過去の記事を3カラム⇒2カラムに変更 • サイドバーを画面下部に100%幅で表示するように変更 (中略)

md⇒smでの変更内容 (横幅768px未満) • 最新記事のサムネイルと記事詳細情報を100%ずつの縦並べに変更

sm⇒(最小幅)での変更内容 (横幅568px未満) • 過去の記事を1カラム表示に変更

実際にセットするクラスを考えていく過去記事が2カラムになる最新記事の表示が横並びになる (すべてのユニットが横幅100%) 過去記事が3カラム/サイドバーが横並び一段階狭いサイズとの差分

レイアウトの指定内容(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>

おまけ: サイドバーが左側にある場合はどうしたら…？メディアクエリの中でorderを指定するとよいです @media screen and (max-width:
1023px) { div#main { order: 1; } aside#aside { order: 2; } }

まとめ • metaタグでのビューポートの設定を忘れずに行う ◦ 普通にレスポンシブ対応をするなら定型文でよいはず • Flexboxとメディアクエリを使って表示をいい感じに調整する ◦ 自前で頑張って組んでもいいけど、いま出来ているデザインにグリッドシステムだけ採用したい場合はPure.cssのことを思い出すとよいかも
• 左側に来る要素の表示順を弄りたい場合はorderを使う

多分、会社ブログに「LTしてきました」って記事を書いたら完璧なのではと思っている Let’ｓマッチポンプ！

GitHub Pagesで構築したブログをスマホ対応させてみた / make mobile-c...

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

More Decks by thatblue

Other Decks in Programming

Featured

Transcript