掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
|
|
<Number>: [0000003A]
<Date>: 2024/02/01 20:02:28
<Title>:
<Name>: amanojaku@管理人
|
|
|
PCモニターの場合、現在4k画面(横幅3840px)が普及価格帯で販売されており、「HD(ハイビジョン)画面(横幅1280px)、FHD(Full-HD：Fullハイビジョン)画面(横幅1920px)、WQHD(Wide Quad-HD：Quadハイビジョン)画面(横幅2560px)」などもあります。
また高解像度モニターは(高価ですが)「5k画面(横幅5120px)、6k画面(横幅6016px)、8k画面(横幅7680px)」も販売されています(そのうち量産効果で安くなるか？)。
逆に低解像度モニターは1K画面(横幅1024px)や(2020年9月現在、価格.com調べ)800px画面(横幅800px)も有るようです。
参考：下記はテレビ画面のHD(ハイビジョン)以降の規格(解像度)です。
今どきの若い人はHD(ハイビジョン)など知らないかもしれませんが、テレビ画面の「4k画面、8k画面」ぐらいは聞いたことは有るでしょう。
ただしPCモニターの解像度は、テレビ画面のような正式な規格と言う訳では無いですが。
https://images.app.goo.gl/ZQctd4Rb7AorGsNp6
【要注意】初心者の勉強用に方便として単位にpxなどを使うのは良いですが、(メディアクエリは除き)pxなどの絶対単位(px以外の絶対単位も同様)を使っていると「特定の解像度に依存する」ので、欠陥Webページになるのでご注意下さい。
(メディアクエリは除き)pxなどの絶対単位(px以外の絶対単位も同様)を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization：検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
「特定の解像度に依存するWebページ」だと、他の人のモニター解像度が違う場合や、自分がモニター解像度が違うPCに買い換えたりとかしたら正常に表示できない場合が有ります。
当然 ベンダーも そんなコード(欠陥Webページ)は許さないので、欠陥Webページしか作れないようならフロントエンド(プロ)として失格と言って良いでしょう。
※なお、最近のWindowsは画面の表示倍率を変更できるスケーリング(ズーム)機能が有り、スケーリング(ズーム)の倍率を拡大し仮想的な解像度を下げて1k解像度に近似させる事もできるようです。
例えば1pxはモニターの1ドッドを表わします。
1k解像度(1024px解像度)モニターの100pxは画面の約9.766％のサイズに見えます。
4k解像度(3840px解像度)モニターの100pxは画面の約2.604％のサイズに見えます。
モニター解像度によって肉眼で見えるサイズ感が違ってきます、フォントなどは読めないぐらいまで小さくなることが有ります。
Chromeの開発者ツール(デベロッパー･ツール)にはスマホをエミュレートできるモバイル･エミュレーターが搭載されており、このモバイル･エミュレーターは仮想的に解像度も変更できるようです(なお 「Galaxy、Pixel、iPhone、iPad」などの解像度のプリセットも用意されているようです)。
ただし、そのプリセットは解像度を再現するだけであり、(当然 本質はPC用ブラウザなので)「スマホでは余りCSSが効かないとか、バク的な仕様とか」などを再現するわけではないので注意して下さい。
モバイル･エミュレーターは、当然 モバイル(スマホ、タブレット)用のエミュレーターなので(metaタグの)viewport属性で固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewport属性で固定値が指定されている場合は、その設定をコメントにし、代わりに下記の(metaタグの)viewport属性を設定て下さい。
そうしないとスマホ用(metaタグの)viewport属性の固定値が有効になってしまうのでPC用の表示をチェックできません。
(metaタグの)viewport属性の設定が存在しない場合は、(metaタグの)charset属性の設定の次あたりに それを記述して下さい。
<meta name="viewport" content="width=device-width">
とりあえずChromeモバイル･エミュレーターで一般的には約「300px～3000px」解像度ぐらいをチェックしてみると良いでしょう(プロなら6k解像度ぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px～6000px」解像度ぐらいには対応すると良いでしょう)。
PC 版 Chrome モバイルサイト表示エミュレーターの使い方
https://webllica.com/smart-phone-simulator/
↑漢字入力はOFFにして下さい。
デフォルトではブラウザの右側に開発者ツール(デベロッパー･ツール)が表示されます。
開発者ツール(デベロッパー･ツール)の右上のスリー･ドットをクリックすると、メニューの先頭に開発者ツール(デベロッパー･ツール)･ドックの位置が指定できます(3番目の画像の赤く囲われた所)、左から順番に「別ウインドウ、左側、下側、右側」(個人的には別ウインドウを推します)。
開発者ツール(デベロッパー･ツール)･ドックを別ウインドウにした場合、Windowsなら下のタスク･バーに、その(開発者ツール(デベロッパー･ツール)･ドック用の)タスク･アイコンが表示されるので、それをクリックすることで表示・非表示を簡単に切り替えられます。
開発者ツール(デベロッパー･ツール)の上部のモバイル･エミュレーター･アイコン(1番目の画像の赤く囲われた所)をクリックすればモバイル･エミュレーター・モードになります。
【解像度の変更時の注意点】
モバイル･エミュレーターで解像度を変更したら、必ずリロードして下さい、Windowsなら[F5]。
単位に「em、ex、ch、rem、lh」を使っている場合、解像度を変更してフォントなどの表示サイズが合わなくなったら、見やすいサイズにブラウザでフォント･サイズを設定して下さい。
《重要》ただし「Chrome」の「最小フォント･サイズ」設定は、「HTML、CSS」の設定を無視して強制的にフォント･サイズを変更してしまうので、本当にユーザー･フレンドリーか どうかをチェックしたいなら、「最小フォント･サイズ」設定は最小にしておかなければなりません。
例えば単位に「vw」などを使っている場合に、モバイル･エミュレーターで解像度を小さくしてもフォントの表示サイズが小さくならない時は「最小フォント･サイズ」設定が最小に設定されてないと思われるので ご注意ください(つまり「最小フォント･サイズ」設定が最小に設定されてないと、正しい表示をチェックできない)。
通常の「フォント･サイズ」設定でフォント･サイズが大きくならない場合は、フォント･サイズがフォント系単位 以外で指定されていると思われます。
【PC画面のエミュレイトの場合】
自分のモニター解像度より解像度を小さくする場合は、説明が難しくなるので、(Chromeモバイル･エミュレーターでチェックする場合は)かえって1k解像度モニターのほうが分かりやすいでしょう。
現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px～1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。
自分のモニター解像度より解像度を大きくする場合は、少々コツが要ります。
まず 最初に2番目の画像の赤く囲われたズーム指定(パーセント指定)を一旦 100%に指定、"幅"(左)に自分が指定したい解像度を入力し[Enter]、ビュー･エリアの右下の縁をドラッグし、縦･横を画面幅いっぱいにして下さい(特にビュー･エリアの幅は必ず、画面幅いっぱいにして下さい)。
(自分のモニター解像度より解像度を大きくする場合は)大まかなイメージが確認できれば良いだけなので解像度の値は多少 誤差があっても問題ありません。
※PC画面のエミュレイトの場合は「約1000px、約2000px、約3000px」と言う感じで「約1000px」の間隔でおｋ(なお、モバイル画面の場合は、ビュー･エリアの縁をドラッグして変更してやる)。
【モバイル画面のエミュレイトの場合】
モバイルの場合は2番目の画像の赤く囲われたズーム指定(パーセント指定)を とりあえず100％に設定してみて下さい(明らかにサイズ感が違う場合は変更して下さい)。
ブレイク･ポイントをチェックしたい場合は、ビュー･エリアの縁をドラッグし、ブレイク･ポイントあたりで正常にレイアウトが変化するかを注視して下さい。
ビュー･エリアの縁をドラッグする場合、横幅の最小値は280pxまでで良いです。
「タブレット、スマホ」の解像度のプリセットは(2番目の画像の赤く囲われたプリセット指定の)[サイズ：レスポンシブ]コンボボックスで選択可能です。
プリセットの解像度でチェックする場合はビュー･エリアはマウスで動かさないで下さい。
蛇足
【PC画面のエミュレイトの問題点】
Chromeモバイル･エミュレーターはモバイル･ブラウザをエミュレートしているので、スクロールバーの幅はゼロになります(つまり通常のスクロールバーは表示されない)。
もし 本格的にチェックしたい場合は4k解像度モニター(+グラボ？)を買って、そのデフォルト解像度を「2k～2.5k」解像度とした場合には、「800px」解像度のアカウントも作って、その「デフォルト」解像度と「800px」解像度をチェックしてやれば良いでしょう。
※自分のPC画面の解像度がフルHD画面(横幅1920px)以上なら、とりあえず「4k解像度モニター(+グラボ？)」は必要ないです。
4kモニターを購入する場合の注意点
http:../utf8/smt.cgi?r+twilight/&bid+00000041&tsn+00000258&bts+2021/03/26%2020%3A00%3A27&
|
|
|
|
|
|
SMT Version 8.022(+A) Release M6.
Author : amanojaku.
