『ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座』にある、ブログデモのCSS写経を進めたら、サイドメニューがいつまでも横に流れない、
という状況になりました。
完成見本はメイン記事が左、サイドメニューが右なのに、自分の画面はずっと縦一列。
どこかで間違えたと思ったのですが、実は最後にPC画面用表示のコードを書くまで、ずっとモバイル画面用の表示だったことがわかりました😅
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
モバイルファーストとは？
閲覧が多数と思われるスマホ向けにCSSを書く、というスタンスです。
CSSの最後に
「閲覧端末の画面表示が広い場合は、サイドメニュー要素をメインコンテンツの横に並べる」といった条件を書いて、PCで閲覧するユーザーも見やすくする仕組みになっています。
サンプルコードのCSSを上から写経しているんだけど、サイドメニューがずっと下にある状態なんだよね。なんでだろう？
確かにサンプルコードをプレビュー表示すると、右にサイドメニューが来ているけど、写経版は下に来ているわね。
なにかスッポ抜けてるんじゃないのか？
書き漏らしはないと思うけどなぁ・・・・
書き漏らしではありませんよ。
サイドメニューを横に並べる指示は、CSSの最後に書かれています。まだそこまで写経していないだけなんです。
最近のCSSは「スマホ向けの見た目を先に書いて、画面が広いときだけ後から上書きする」という順番で書かれることが多いです。これをモバイルファーストと呼びます。
CSSの最後にデスクトップ版の表示内容を記載して上書きする
画面の幅が600px以上のとき
ここから下のCSSが効きます
このようにPC画面用の記述は、CSSの最後にまとまっています。
391行目から下がそうですね。これはメディアクエリというもので、画面の状態に応じて、CSSを出し分けるための仕組みになります。
つまり、390行目までを写経し終えた時点では、スマホ向けの見た目で正しいんです。崩れていたわけではありませんでした。
なるほど。これを書いておかないと、デスクトップで見てもスマホの画面表示になるってことね。
そういうことか〜。何か書き忘れたかと思ったよ😅
ミナ、地図をよく見ないで「道がない」って騒ぐタイプだな。
山小屋の設営かて、まず雨風しのげる形を先に作る。飾りは後や。CSSもそういう順番なんやな。
なるほどね。ちなみに画像にある「@media(min-width: 600px)」なんだけど、数字の前はどういう意味なのかしら？ あとどういう風に書けばいいの？
メディアクエリの書き方について
「＠media（●●●）｛●●●｝」は固定」で、カッコ内の●●●は変わってくるとのことでした。
実際に使われるのは、幅の指定条件が大半ということなので、代表的な例を挙げておきます。
| 条件の主な例 | 意味 |
| min-width: 600px | 600px 以上 のとき |
| max-width: 600px | 600px 以下 のとき |
これで●●●px以上とか以下とか、条件をつけるわけか〜。
minは「minimum（最小）」の略で最小値が600px、つまり「600px以上にせい」ということやな。
逆にmaxは「maximum（最大）」の略で、最大値が600px。「600px以下にせなあかん」ということや。
単語の意味がわかっていると覚えやすそうだね。
ミナは反対に覚えそうだけどな🤣
う、ありそうで反論できないなぁ。
覚え方としては、minは「ここから上」、maxは「ここまで」と考えると迷いにくいですよ。モバイルファーストで書くなら、使うのはほとんどがminのほうです。
仕組みがわかったところで、気になることがあるわ。このブログもスマホで見るときとパソコンで見るときで、見え方が変わるのかしら？
【プログラム初心者のつぶやき】のモバイルファーストはどうなっている？
DevToolsでは、横幅1023pxまではスマホ表示、1024px以上はPC表示でした。
①→②の順番に操作することで、画面横幅を1px単位で変更して、表示の変化を確認できます。
① ここをクリックすると画面幅を変えられます
② この数値を変えると切り替わる幅がわかります
▽スマホ版表示
⬇️
▽PC版表示
画面が狭いときは縦に収め（下部メニューの「サイドバー」に収納）、広いときは横にサイドバーを並べる。置き場所をCSSで切り替えているんですね。
切り替わる幅は、このブログは1024px、本のサンプルは600pxでした。切り替えの数値は、サイトの作りに合わせて決めるものなので、状況によって変わります。
PC用とスマホ用のHTMLファイルが個別にあるわけじゃなく、状況によって1つのファイルで見せ方を変えてるってことね。
切り替えの数値は、なんでそんなに数値が違うんだ？
それ気になるよね。どういう端末でどういう状況のときに、どういう値を設定するものなんだろう？
切り替え幅に明確な基準はなく、以下のような目安で内容に応じて変化させている感じです。
切り替える幅はどう決める？
答え決まりはない
よく使われる目安
- 768pxタブレット付近
- 1024pxPC付近
有名なCSSフレームワークが
使っている値が広まったもの
実際の例
- 600px本のサンプル
- 1024pxこのブログ
本ブログはサイドバーの中身が多いぶん
切り替わる幅も広め
レイアウトが窮屈に見え始めた幅で切り替える
十分なスペースが確保できたら、サイドバーも横に出してあげるのね。
スペースに合わせて荷物の置き方を変えるようなもんや。テント場が狭いなら縦に積む、広い場合は横に並べる。中身は同じやで。
モバイルファーストにする理由は？
スマホで見る人が多いから、モバイルファーストにするのか？
モバイルファーストにする理由がそれくらいしか思いつかなかったので、AI先生に聞いてみました。
モバイルファーストって要はスマホで見る人が多いから、そうしているの？
「スマホの人が多いから」は入口であって、実はもっと実務的な理由があります。
いちばん大きいのは、削るより足すほうが簡単だということです。
PC向けに作ってから狭い画面に押し込めると、「この余白を消す」「この段組みを解除する」と打ち消しのCSSが大量に必要になります。
スマホ向けから始めれば、基本は縦に積むだけ。広い画面では「横に並べる」と足すだけで済みます。
ほかにも、狭い画面から作ると何が本当に必要かを先に考えることになる、スマホでは追加分のCSSを読み込まずに済むので表示が軽い、といった利点もありますよ。
確かにいろいろ作ってから、減らすのも大変そうだものね。
荷造りと同じだな。先に全部詰めてから「やっぱ要らねえ」って抜くより、必要なもんだけ入れてく方が早い。
そうだね。あと大きいザックは、空いてるだけ入れちゃうからなぁ。
PCの画面も同じや。場所があると、あれもこれも置きたくなる。狭いとこから始めりゃ、ほんまに要るもんだけ残るわけや。
まとめ
・モバイルファーストは「閲覧が多数と思われるスマホ向けにCSSを書く」スタンスのこと
・基本はスマホ向けにCSSを書き、最後にPC用の表示条件とPC用のCSSを書く
・最初にスマホ向けの内容を書くことで、サイトに必要な要素を精査できる
昔はWebサイトをPCで見るのが普通でしたが、今はスマホで見るのが多数。
コードを書くときも基本スマホ向けに書き、最後にPCで見る人の情報を足す、ということを学んだ回でした。
写経をしていると、こういう気づきもあるので、引き続き勉強を頑張っていきたいと思います。
ではでは👋
