スマホのhtml、cssで質問があります。 PC画面では問題ないのですが、 スマホ画面でこのようになぜか半分に寄ってしまいます。 col-2をhtmlで使用しているのですが、

ベストアンサー

0

ThanksImg質問者からのお礼コメント

ご回答いただいきありがとうございます。 ご指摘いただいた点を実際に確認してみると、すぐに修正できました。 具体的にご指摘いただきましたので、 ベストアンサーとさせていただきます。 すぐにご回答をいただいた方、ありがとうございました。

お礼日時:7/4 1:10

その他の回答(1件)

0

>PC画面では問題ないのですが、 まず、imgでpx単位を使っている時点で、PCフレンドリーに対応できて無いです。 PCの場合、現在4k画面が普及価格帯で販売されており、また高解像度モニターは(高価ですが)「5k画面、6k画面、8k画面」も販売されています(そのうち量産効果で安くなるか?)。 (メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになるので ご注意ください。 もしも フロントエンド(プロ)を目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。 なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、下記「ダメダメ・デモ」をChromeモバイル・エミュレーターで3000px解像度でチェックしてみれば一目瞭然です(表示が非常に小さくなる)。 下記「ダメダメ・デモ」をChromeモバイル・エミュレーターで約「1000px~3000px」解像度でチェックしてみれば一目瞭然です(表示の大きさが変わる)。 モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい。 ダメダメ・デモ http://xd305417.html.xdomain.jp/demo/test/005.htm 自分が作ったページも「1k~3k」解像度でチェックしてみると良いでしょう。 PCフレンドリー・デモ http://xd305417.html.xdomain.jp/demo/test/003.htm Chromeモバイル・エミュレーターの操作法 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51& モバイル・エミュレーターは、当然 スマホ用エミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにするか削除して下さい。 そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。 Chromeモバイル・エミュレーターでチェックする場合、モニターは かえって1k解像度のほうが分かりやすいでしょう。 現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px~1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。

プロは、「border、margin、padding、font、要素」などを基本的にvw単位で指定します(もちろん、プロを目指さないなら、そこまでvwに拘る必要は無いですが)。 もしも フロントエンド(プロ)を目指すなら、下記を理解でき具現化できてフロントエンド(プロ)の基礎レベルです、本職のフロントエンド(プロ)になるには更に上のレベルが要求されます。 もちろん、プロを目指さないなら、下記を そんなこともあるんだな程度に流して読んでおけば良いでしょう。 「特定の解像度に依存しない実用的なWebページ」詳解 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000031C&tsn+0000031C&bts+2022/04/27%2016%3A47%3A37&