レスポンシブ対応ってむずい。。レスポンシブを簡単に確認できるおすすめのchrome拡張機能2選
はじめに
皆さんはレスポンシブの確認どうしていますか。検証ツールから見るという人も多いのではないでしょうか。しかし、検証ツールは少し使いずらかったり、そもそも対応しているデバイスの数も少ないです。そこで普段私が普段使っているおすすめのレスポンシブ確認用のchrome拡張機能を紹介していきます。
chrome拡張機能2選
私が普段使っている拡張機能を2つ紹介します。
モバイルシュミレーター
そのなの通りモバイルに特化したレスポンシブ確認の拡張機能です。iphone14やiphone15などの一部最新のデバイスを除いて、無料でチェックすることができます。シンプルで使いやすく、便利です。
Responsive Viewer
幅広いデバイスをレスポンシブ確認するのに向く拡張機能です。また、モバイルシュミレーターではProプランであった最新のデバイスも無料で使うことができます。シームレスに複数の画面を確認でき、スクリーンのサイズをカスタムすることもできます。Proプランもありますが、無料でも十分な機能を使うことができます。
レスポンシブむずい。。
ここからはレスポンシブむずい話を書きたいと思います。
最近『SOZAI』というフリー素材サイトを開発しました。
レスポンシブも一通りチェックしてリリースしたのですが、昨夜27インチという大画面で見た時にフッターの部分に配置した「X開設バナー」がキーワードに丸かぶりしていることが発覚しましました。
■ 14インチ
■ 27インチ
よくよくコードを確認したら、不要なheightを指定してしまっていました。加えて、大画面だとイラストに対して文字サイズがあまりにも小さくなってしまっていました。
■ 27インチ
ソコストさんのサイトを27インチで見たところ、コンテナの左右空白を大きくとって対処していました。コンテナに最大幅を指定しているのだと思いました。
■ 27インチ
コードを確認したところ、以下のような記述してました。最大幅指定していなかったのでmax-w-[1300px]を加えて修正しました。
<div className="w-[90%] lg:w-[85%] mx-auto py-[40px] lg:py-[70px]"></div>
■ 27インチ
これでも他のデバイスで見たらうまく行っていない可能性もあるので、およなしくTailwind CSSのcontainerを使おうかなとも思っています。
まとめ
読んでいただきありがとうございました。皆さんもぜひレスポンシブ確認のchrome拡張機能使ってみてください。また、記事の後半で書かせていただいたレスポンシブの話に対するアドバイスやレスポンシブ対応させる時のコツなどお持ちの方は教えていただけたら嬉しいです。（共感の声も欲しいです🥺）
Discussion