レスポンシブのCSSでfloatを使用した場合、高さを指定しないと回り込みがうまくいかずガチャガチャとしてしまう場合があります。
レスポンシブではあまり高さは指定したくありませんが、指定する場合は以下に気を付けます。
まず、必ずビューワーで確認すること
PCのウインドウを縮めただけだとスマホの状況を再現しきれません。
必ずビューワーで確認しましょう。
最低でもビューワーの横幅「300px代」と「400px代」の２種類の画面で確認すること
「300px代」でちょうどよい高さでも「400px代」だと高さが低く重なってしまいます。
iphoneと一部のアンドロイドは幅300px代なのですが、一部アンドロイドは幅400px代の端末があります。その場合は300px代でよくても、400px代では高さが足りず、要素が重なってしまいます。
以下のスマホ・タブレット用の３パターンのCSSを用意しておくと安心です
上から、ざっくりですが、ipad用、400px代用、300px代用、というイメージでCSSを用意しています。これにプラスしてパソコン用のCSSも別途用意が必要です。
@media only screen and (max-width: 990px) {
}/*990px end*/
@media only screen and (max-width: 640px) {
}/*640px end*/
@media only screen and (max-width: 380px) {
}/*380px end*/
まとめ
レスポンシブは様々な機種に対応しなければならず、込み入ったデザインですと大変な工数がかかりますが、スマホ端末については、上記３つのポイントで分岐してCSSを用意するのがおすすめです。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
