レスポンシブデザインについて 独学でHTML、CSSをひととおり勉強し制作練習しています。 レスポンシブ対応するときのメディアクエリーの指定としては スマホサイトは

HTML、CSS | ホームページ作成48閲覧xmlns="http://www.w3.org/2000/svg">25

ベストアンサー

0

その他の回答(1件)

0

>レスポンシブデザインについて > >独学でHTML、CSSをひととおり勉強し制作練習しています。 > >レスポンシブ対応するときのメディアクエリーの指定としては >スマホサイトは >max-width > >PCサイトは >min-width > >ざっくりですが上記の指定でいいのでしょうか? 違います。 例えばプロにおけるメディアクエリのブレイク・ポイントは、一般的には「1280px以上」、「1280px未満~992px以上」、「992px未満~768px以上」、「768px未満~576px以上」、「576px未満」に分割する5パターンのレイアウト構成が推奨されているようです。 また、もうチョイ細かく分けたい場合はBootstrapのブレイク・ポイントを踏襲し、「1280px以上」、「1280x未満~992px以上」のレンジを更に「1400px以上」、「1400px未満~1200px以上」、「1200px未満~992px以上」に分割する(全部で)6パターンのレイアウト構成が推奨されているようです。 (当然、アマチュアが そこまで細かく分ける必要があるのかと言う事はあるので)アマチュアにおけるメディアクエリのブレイク・ポイントは、「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです。 ※もちろん、ページのレイアウト構成によっては、それ以下のパターン数でも作成可能な場合もあります。 蛇足ですが、モバイル・フレンドリーも良いですが、ちゃんとPCフレンドリーに対応できてますか? (メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになるので ご注意ください。 もしも プロを目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。 なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、Chromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみれば分かるでしょう。 Webページ作成の注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000295&tsn+00000295&bts+2022/01/05%2018%3A04%3A56&