8月, 2023 | メモ帳Webデザイナー

みなさん、こんにちは、こんばんは、AKデザインの円盤です。 本日はよく使う割にはまともに手書きをしたことがない「@media screen」の書き方をまとめておきました。 スクラッチで作るときに「あれ？最小幅ってどうやって書くんだっけ？」という場面が自分には多々ありますので、毎回ググるのもあれなので、そんな時に使うための自分用の記事です。 ご参考にしてください。 メディアクエリの書き方（忙しい人用） では最初に、ページの1スクロールファーストビューですぐコピペで使えるように、本題を書いておきます。 ・画面が480px以下の時に表示させたい場合 ↓ @media screen and (max-width:480px) { この中にCSSを記入 } ・画面が769px以上の時に表示させたい場合 ↓ @media screen and (min-width:769px) { この中にCSSを記入 } ・画面が769px以上、1024px以下の時だけ表示させたい場合 ↓ @media screen and (min-width:769px) and ( max-width:1024px) { この中にCSSを記入 } ・画面が1980px以上で表示させたい場合 ↓ @media screen and (min-width:1980px) { この中にCSSを記入 } レスポンシブ、メディアクエリ、使用上の注意 このメディアクエリですが、よくやってしまうのが閉じかっこの「 { 」や「 } 」を入れ忘れることがあります。 例えばChromeの検証からソースコードを持ってきたときは、始まりの「 { 」が無かったりします。 ↑ こういうコピペをすると「 { 」が抜けています。 ↑ 閉じかっこの「 } 」も抜けています。 このかっこが抜けてると動かない、次のCSSに影響を与えてレイアウトがおかしくなる、というのが起きるので注意しましょう。 またかっこが半角で入力したつもりだったのに全角だった！なんていうのもあります。 この辺はお使いのテキストエディタのスペルチェック機能を使うと良いみたいですよ！ 自分はスペルチェックは公式使ってます。 https://validator.w3.org/ レスポンシブ、メディアクエリ、簡単に解説 これってどういう場面で使うの？という話は、すごく簡単にしますと… パソコンではグローバルメニューを表示！ でもスマホではグローバルメニューが消えてハンバーガーメニューを表示！ という時に使います。 display: block; と display: none; を入れると消えたり出てきたりします。 これを使うことでパソコン用のレイアウトとスマホ用のレイアウトを、CSS内で使い分けて記述することが出来るわけですねー。 その昔、まだガラケーだったころはユーザーが使う端末を判断して、携帯なら/mobile/というフォルダに移動して、パソコンなら普通にindex.htmlへ、というものでした。 まぁページが2つ存在するのってメンテナンス的にどうなの？ｗということがあったのと、スマホが普及したことで2015年頃を境にこの書き方が登場したっていう歴史があります。 またこの亜流の書き方でモバイル優先で書く方法もあります。 それがこちらがわかりやすかったです。 https://allabout.co.jp/gm/gc/451911/2/ モバイルファーストって考え方になります。 要するにパソコンからコーディングするのではなく、最初からスマホ用の画面で作って、後からパソコンタブレットを付け足していくやり方ですね。 しかしいざ現場で仕事してますが、やり取りするお客さんは全部パソコンで確認するので、スマホのページを見てくるのは納品してからかなり後ｗｗｗなので。 まぁ言われる前にスマホ用も一緒に作ってしまうので大して問題にはなりません。 そしてモバイルファーストのHTML文書構造が必要だ！なんて言われることはなかなか無くて、検索結果が伸びない！何とかしてくれください！と言われた時に、この話が社内的に発生となります。 「え？いや、自分すでにモバイルファーストで書いてますけど？」（フッと鼻で笑う と言えるようにしておくとかっこいいです。 しかしそれでも文書構造のやり替えまでに話が発展したことはないので、Googleさんもそこまで気にしてはいないような感じがします。 普通に検索結果で順位変わったことはない感じです。 楽天とかなら内部でSEOを端末で分けてるので差はありそうですけど、あれはまた違うキーワード振ってるかどうかの内容の話になります。 まぁ設計段階でモバイルファーストで作っておくと後ですごい楽だよー！という話になります。 でもね。 CMSカスタマイズ案件はベースが全部パソコンファーストで書いてあるんだ。 ハンバーガーメニューもパソコングローバルメニューとは分けて書いてあるんだ。 （メニュー共有で書いてる人はほとんどいないｗ まぁそれの方が簡単でいいんだけどｗ） bootstrapだったりするんだ。 ソースの中身とか文書構造なんて、お客さんは誰もそんなところ見てねーよっていう自己満足のマニアの世界ですね！ そんなことよりも分かりやすい内容と見やすいデザインを重視した方がお客さんには喜ばれます。 どこまでコーディングするか、納期までの時間とか、時間と自分に余裕があればやっておきましょう！ （そんな時間は多分ないけど！ｗ） 余談レスポンシブ きっと使わない、HTMLのhead内で分ける書き方も備忘録しておきます。 なんでこれを使わないか？と言いますと、理由は下記になります。 ・CSSファイルを複数開いて編集する必要がある（作業環境が狭いとまぁまぁ辛い） ・どのCSSクラス名に何を付けているか、すぐ近くに書いた方がわかりやすい（1ファイルが縦に長くなるけど他人と共有しやすい） ・ファイルをまたいだ一括変換が出来るツールが必要（Dream Weaver） ・新しいファイル作ったら全部のHTMLファイルのheadに追記が必要（ベタ書き案件なら深刻ｗ） 実際ヘッダーで分ける書き方をした他人様が書いたソースに出会ったことが、まだ1回しかありませんｗ CSSファイル単位でレイアウトをボタンなら「button.css」やフレームなら「layout.css」という感じで分けて書いて、その中にメディアクエリを書き分けるのがメンテナンス的に使いやすいようですね。 そしてそれが業界の標準になっているようです。 まとめ 今回はCSSで@mediaで記述する内容をまとめました。 よく使用するのですぐに使えるようにメモ帳などにまとめておくと良いですね！ テンプレートファイル使ってるなら、そのCSSの中にコメントアウトで記述しておくのも良いですよ！ ではまた！