Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

「ビューポートの調整」として何をすればよいか？ 結論から言ってしまうと、(だいたいの場合においては)以下の1行を追加すればよい

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

キーワードは「Flexbox」

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

親要素の幅に合わせて いい感じに 折り返してくれる 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Pure.cssのグリッドシステムを導入する 今回はグリッドシステムだけを導入するので、グリッドシステム用のスタイルシートだけを読み込む

Slide 33

Slide 33 text

レイアウトの指定 内容(雑な抜粋) pure-* というクラスを指定して レイアウトを作っていく

Slide 34

Slide 34 text

レイアウトの指定 内容(雑な抜粋) pure-g(gridの略)で グリッドレイアウトの宣言をする 指定するとdisplay:flex 属性が付く

Slide 35

Slide 35 text

レイアウトの指定 内容(雑な抜粋) pure-u-*(unitの略)で 子要素であることの宣言をする 末尾の数字列で横幅を指定する 指定するとdisplay: inline-block 属性が付き、末尾の数字を分数と 捉えた横幅が指定される (pure-u-4-5であれば5分の4なので 80%)

Slide 36

Slide 36 text

実際のデザインとの対応
pure-u-1 pure-u-4-5 pure-u-1-3 pure-u- 1-5

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

レイアウトの指定 内容(updated) クラスの指定は狭い⇒広いの順で 指定していくと混乱しづらい

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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