|
|
<Number>: [0000052B]
<Date>: 2022/05/12 14:04:01
<Title>:
<Name>: amanojaku@管理人
|
|
|
「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー･フレンドリー(PCフレンドリー、タブレット･フレンドリー、スマホ･フレンドリー)なページが推奨されます。
Chromeのモバイル･エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー･フレンドリーが如何に重要か解るでしょう。
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー･ツールのモバイル･エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
Chromeのデベロッパー･ツールにはスマホをエミュレートできるモバイル･エミュレーターが搭載されており、このモバイル･エミュレーターは仮想的に解像度も変更できるようです(なお 「Galaxy、Pixel、iPhone、iPad」などの解像度のプリセットも用意されているようです)。
ただし、そのプリセットは解像度を再現するだけであり、(当然 本質はPC用ブラウザなので)「スマホでは余りCSSが効かないとか、バク的な仕様とか」などを再現するわけではないので注意して下さい。
実機でチェックする場合にはmetaタグのcharset属性の設定の次あたりに下記を記述して下さい(必須)。
<meta name="viewport" content="width=device-width">
なお 下記は、一般的にネットで推奨されているviewportの例ですが、「initial-scale=1」が指定されていると横幅が はみ出る場合が有るようですので、「initial-scale=1」を削除することをオススメします。
> <meta name="viewport" content="width=device-width,initial-scale=1">
モバイル･エミュレーターは、当然 スマホ用エミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにするか削除して下さい。
「<!-- 」、「 -->」で囲うとコメントにできます(例．「<!-- コメント -->」)。
そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。
なお Chromeモバイル･エミュレーターはモバイル･ブラウザをエミュレートしているので、スクロールバーの幅はゼロになります(通常のスクロールバーは表示されない)。
もし 本格的にチェックしたい場合は4k解像度モニター(+グラボ？)を買って、「1k、2k、3k」解像度の各アカウントを作って下さい。
4kモニターを購入する場合の注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000041&tsn+00000258&bts+2021/03/26%2020%3A00%3A27&
【画面の解像度に関して】
PCの場合、現在4k画面が普及価格帯で販売されており、また高解像度モニターは(高価ですが)「5k画面、6k画面、8k画面」も販売されています(そのうち量産効果で安くなるか？)。
逆に低解像度モニターは(2020年9月現在、価格.com調べ)横幅が800pxと言う画面もあり、アスペクト比は「4:3、16:9」の2つがあるようです。
なお 1K画面(横幅1024px)だとアスペクト比は大抵は4:3になるでしょう。
「HD画面(横幅1280px)、フルHD画面(横幅1920px)、WQHD 2K画面(横幅2560px)、4K画面(横幅3840px)」だとアスペクト比は16:9になります。
(プロなら6k解像度ぐらいは使ってるかもしれませんが)一般的にはPCにおいては「1k～4k」解像度をチェックしておけば良いでしょう(なのでポートフォリオを作成するならPCにおいては「1k～6k」解像度ぐらいには対応すると良いでしょう、レスポンシブ･デザイン対応も必須です)。
【実質的な解像度に関する注意点】
Windowsでは表示を拡大するスケーリング機能が有ります。
Windowsの4Kスケーリング環境を検証する
https://pc.watch.impress.co.jp/docs/column/4kshugyousou/732083.html
>視力に基づく見えやすさによって変わってくるが、4Kの場合150%で2,560×1,440ドット相当、200%で1,980×1,020ドット相当になり、この辺りが目安かと思われる。ディスプレイサイズも踏まえるなら、27型なら150%、15.6型なら200%にしておけば、ほとんどの人が見やすい文字サイズになるだろう。
つまり、スケーリングを考慮すると、PCにおいては最低限「約1000px～約2500px」解像度の範囲は対応する必要が有ると言うことになります。
(ここは流して読んでおけば良いです)それとは別に当方もザックリとした試算をしてみる。
PCでは視距離はモニターの横サイズに比例すると考えるようです(テレビでは視距離は画面の縦サイズに比例すると考えるようですが)。
(当方の環境で算出)視距離とモニターの横サイズに比例する(便宜的な)「視距離率」は1.45とする。
1m先の仮想的なドットピッチを(便宜的に)仮想ドットピッチとする。
「15インチ･モニター(アスペクト比 3：4)、解像度 1024x768、横サイズ 約305mm、ドットピッチ 約0.29785mm」⇒「視距離 1.45*305=約442mm、仮想ドットピッチ 0.29785*1000/442=約0.674mm」。
27インチ･モニターはスケーリングを150%と想定する、スケーリングしたドットピッチを(便宜的に)スケーリング･ドットピッチとする。
「27インチ･モニター(アスペクト比 9：16)、解像度 3840x2160、横サイズ 約598mm、ドットピッチ 約0.15573mm」⇒「視距離 1.45*598=約867mm、スケーリング･ドットピッチ 0.15573*1.5=約0.2336mm、仮想ドットピッチ 0.2336*1000/867=約0.269mm」。
15インチ･モニターと比べ27インチ･モニターの仮想ドットピッチは約40%のサイズになる。
つまり、15インチ･モニター「解像度 1024x768」でチェックする場合、「1024px～2560px」をチェックすれば良いと言うことになる。
【実際の操作法】
自分のモニター解像度･以上か未満かで、モバイル･エミュレーターの操作法が変わるので注意して下さい。
なので まず自分のモニター解像度を把握して下さい。
漢字入力はOFFにして下さい。
Windowsなら[F12]でデベロッパーツールを起動できます(起動に少々時間が かかるかもしれません)。
デフォルトではブラウザの右側に開発ツールが表示されます。
開発ツールの右上のスリー･ドットをクリックすると、メニューの先頭に開発ツール･ドックの位置が指定できます(3番目の画像の赤く囲われた所)、左から順番に「別ウインドウ、左側、下側、右側」(個人的には別ウインドウを推します)。
開発ツールの上部のモバイル･エミュレーター･アイコン(1番目の画像の赤く囲われた所)をクリック。
【PCの場合】
上記は1k解像度でのチェックを想定しているので、1k解像度で無い場合は、計算が変わってきますが、とりあえず、「1k～3k」程度を目安にしてみて下さい。
PCにおいては大まかなイメージが確認できれば良いだけなので、解像度の値は多少 誤差があっても問題ありません。
自分のモニター解像度より解像度を大きくする場合は、少々コツが要ります。
まず 最初に2番目の画像の赤く囲われたズーム指定(パーセント指定)を一旦 100%に指定、"幅"(左)に自分が指定したい解像度を入力し[Enter]、ビュー･エリアの右下の縁をドラッグし、縦･横を画面幅いっぱいにして下さい(特にビュー･エリアの幅は必ず、画面幅いっぱいにして下さい)。
(自分のモニター解像度より解像度を大きくする場合は)大まかなイメージが確認できれば良いだけなので解像度の値は多少 誤差があっても問題ありません。
逆に自分のモニター解像度より解像度を小さくする場合は、PCにおいては2000px解像度の場合は2番目の画像の赤く囲われたズーム指定(パーセント指定)を125%に拡大して約1600px解像度、150%に拡大して約1300px解像度しかチェックできません、2500px解像度の場合は2番目の画像の赤く囲われたズーム指定(パーセント指定)を125%に拡大して約2000px解像度、150%に拡大して約1600px解像度しかチェックできません。
そう言う意味では、かえって1k解像度のほうが分かりやすいでしょう。
現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px～1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。
グラボを挿していてマルチ･ディスプレイ対応なら、1k解像度モニターを買ってしまったほうが分かりやすいでしょう。
【モバイルの場合】
モバイルの場合は2番目の画像の赤く囲われたズーム指定(パーセント指定)を とりあえず100％に設定してみて下さい(明らかにサイズ感が違う場合は変更して下さい)。
また ビュー･エリアはマウスで動かさないで下さい。
「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。
「タブレット、スマホ」の解像度のプリセットは(2番目の画像の赤く囲われたプリセット指定の)[サイズ：レスポンシブ]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。
タブレット：『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。
スマホ：『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』
【解像度の変更時の注意点】
モバイル･エミュレーターで解像度を変更したら、必ずリロードして下さい、Windowsなら[F5]。
解像度を変更してフォント･サイズが合わなくなったら、見やすいサイズにブラウザでフォント･サイズを設定して下さい。
ただし「Chrome」の「最小フォント･サイズ」設定は、「HTML、CSS」の設定を無視して強制的にフォント･サイズを変更してしまうので、本当にユーザー･フレンドリーか どうかをチェックしたいなら、「最小フォント･サイズ」設定は小さいままにしておかなければなりません。
通常の「フォント･サイズ」設定でフォント･サイズが大きくならない場合は、フォント･サイズがフォント系単位 以外で指定されていると思われます。
【全画面表示でのチェックに関する注意点】
もし モバイル･エミュレーターを全画面表示でチェックしたい場合には、Windowsなら[F11]で全画面表示のON/OFFが可能です、全画面表示で起動中の他のアプリを表示したい場合は[Alt]+[Tab]でタスクマネージャーが起動できます、[Alt]は放さずに[Tab]を複数回 押すことで表示したいアプリを選択できます。
蛇足ですが
(メディアクエリは除き)Web系においての静的Webページでは古いpxなどの絶対単位を使うピクセル･パーフェクトは無くなりました(ただし動的Webページでは動的に絶対単位で生成している場合が多い感じです、また基幹系においての静的Webページでも昔ながらの古いpxなどの絶対単位のピクセル･パーフェクトを使っているかもしれませんが)。
つまり、(Web系においての静的Webページでは)現在のピクセル・パーフェクトは、別物になったと言うことです、(完全な別物なので)それをピクセル・パーフェクトと呼んで良いのかと言う議論は有るでしょうが。
分かりやすく言うと、肉眼で見たイメージとしてのピクセル・パーフェクトなので、脳内で便宜的に「イメージ・パーフェクト(仮)」とでも読み替えれば良いでしょう。
なお 人がピクセル・パーフェクトと言った時に、古いpx単位のピクセル・パーフェクトを言っているのか、「イメージ・パーフェクト(仮)」を言って居るのか、文脈から判断する必要があります。
なお (メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization：検索エンジン最適化)的には当然 マイナスになります。
ユーザー･フレンドリー(所謂 リキッド･レイアウト)はレイアウトが想定の範囲内で崩れるように設計しなければならないので、初心者には難しいです。
ピクセル・パーフェクトなら、px→vwの換算は単なる四則演算なので特に難しいことはありません(アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです)。
いずれにしろ、「@media：メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれません。
プロとアマチュアでは方向性が違います、もし プロを目指すならピクセル･パーフェクトを希求して下さい。
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
無料レンタルWebサーバーは基本的に広告が入るので、広告がウザくない所を探して下さい。
いきなり難しいことから始めずに、初めは簡単なレイアウトから挑戦してみると良いでしょう。
|
|
|
|
<Number>: [0000052E]
<Date>: 2022/03/27 14:13:45
<Title>:
<Name>: amanojaku@管理人
|
|
|
下記コードは あくまでもユーザー･フレンドリー用なので、(プロなど)ピクセル･パーフェクトを希求する場合は不要です。
Webページ作成時に何度も解像度をチェックするとなると、ユーザー･フレンドリーの場合は、各解像度で複数のフォント･サイズを検証しなけらばならないので、ブラウザによるフォント･サイズの調整(複数のフォント･サイズを検証)も、かなり面倒になります。
下記にフォント･サイズ自動調整用の「CSS、JavaScript」を記載してあるので、それを使うと便利でしょう、あくまでもモバイル･エミュレーター用の(暫定的なテスト表示用)コードなので、本番用Webページではコメントにするなど無効にして下さい。
※Edgeでは正常に動作しないので、必ずChromeを使って下さい。
モバイル･エミュレーターで解像度を変更したら、必ずリロードして下さい。
フォント･サイズ自動調整用の「CSS、JavaScript」により、下記「チンチロリン」ようにセレクトボックスが表示されます。
チンチロリン
http://xd305417.html.xdomain.jp/responsive/dice000/dice000.htm
【CSS定義(styleタグ内)の先頭に挿入】
※charset定義用metaタグの次にstyleタグを記述。
html {font-size: var(--HTML_FontSize);}
:root {
/* 0.217 0.18 */
--HTML_SelectOption_MNumber: 1;
--HTML_SelectOption_FontSize: calc(1rem * var(--HTML_SelectOption_MNumber));
}
* {font-size: 1rem;}
select > option {font-size: var(--HTML_SelectOption_FontSize);}
【JavaScript】
※styleタグの次に下記のJavaScriptを記述。
※フォントの大きさを変更したい場合は「vnFontRatio = 6;」の値を変更して下さい。
<script>
fwHTMLRoot = document.documentElement;
vnScreenWidth = screen.width;
vnScreenHeight = screen.height;
fwHTMLRoot.style.setProperty('--ScreenWidth', vnScreenWidth+'px');
fwHTMLRoot.style.setProperty('--ScreenHeight', vnScreenHeight+'px');
console.log('vnScreenWidth:'+vnScreenWidth);
console.log('vnScreenHeight:'+vnScreenHeight);
oCSSViewport = document.getElementById('idCSSViewport');
console.log('get_device():'+get_device());
if('sp'==get_device()){
console.log("if('sp'==get_device())");
// oCSSViewport.setAttribute('content', 'width=480, user-scalable=yes');
}
vnDevicePixelRatio = window.devicePixelRatio;
console.log('vnDevicePixelRatio='+vnDevicePixelRatio);
vnDScreenWidth = vnScreenWidth*vnDevicePixelRatio;
vnDScreenHeight = vnScreenHeight*vnDevicePixelRatio;
fwHTMLRoot.style.setProperty('--DScreenWidth', vnDScreenWidth+'px');
fwHTMLRoot.style.setProperty('--DScreenHeight', vnDScreenHeight+'px');
console.log('vnDScreenWidth='+vnDScreenWidth);
console.log('vnDScreenHeight='+vnDScreenHeight);
fwHTMLHead = document.head;
voComputedStyle = window.getComputedStyle(fwHTMLHead, null);
vnWindow_InnerWidth = window.innerWidth;
vnWindow_InnerHeight = window.innerHeight;
vnWindow_InnerMinimum = Math.min(vnWindow_InnerWidth, vnWindow_InnerHeight);
vnWindow_InnerMaximum = Math.max(vnWindow_InnerWidth, vnWindow_InnerHeight);
fwHTMLRoot.style.setProperty('--Window_InnerWidth', vnWindow_InnerWidth+'px');
fwHTMLRoot.style.setProperty('--Window_InnerHeight', vnWindow_InnerHeight+'px');
fwHTMLRoot.style.setProperty('--Window_InnerMinimum', vnWindow_InnerMinimum+'px');
fwHTMLRoot.style.setProperty('--Window_InnerMaximum', vnWindow_InnerMaximum+'px');
console.log('vnWindow_InnerWidth:'+vnWindow_InnerWidth);
console.log('vnWindow_InnerHeight:'+vnWindow_InnerHeight);
vsDefaultFontSize = voComputedStyle.fontSize;
console.log('vsDefaultFontSize='+vsDefaultFontSize);
vnDefaultFontSize = parseFloat(vsDefaultFontSize);
console.log('vnDefaultFontSize='+vnDefaultFontSize);
// JavaScript - モバイル判定（スマホ・タブレット・PC）
// https://infoteck-life.com/a0368-js-mobile-judge/
function get_device() {
var ua = navigator.userAgent;
if (ua.match(/(iPhone|iPod|Android.*Mobile)/i)) {
return 'sp';
} else if (ua.match(/iPad|Android|Silk|Kindle/i)) {
return 'tab';
} else {
return 'pc';
}
}
vnHTMLRoot_ClientWidth = fwHTMLRoot.clientWidth;
vnHTMLRoot_ClientHeight = fwHTMLRoot.clientHeight;
console.log('vnHTMLRoot_ClientWidth:'+vnHTMLRoot_ClientWidth);
console.log('vnHTMLRoot_ClientHeight:'+vnHTMLRoot_ClientHeight);
vnWindow_ScrollbarWidth = vnWindow_InnerWidth-vnHTMLRoot_ClientWidth;
console.log('vnWindow_ScrollbarWidth:'+vnWindow_ScrollbarWidth);
fwHTMLRoot.style.setProperty('--Window_ScrollbarWidth', vnWindow_ScrollbarWidth+'px');
CSSValue_Window_ScrollbarWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--Window_ScrollbarWidth');
console.log('CSSValue_Window_ScrollbarWidth:'+CSSValue_Window_ScrollbarWidth);
//
vnFontRatio = 1.55*(vnDefaultFontSize/5-1);
vnHTML_FontSize = Math.ceil(vnWindow_InnerMinimum/200*vnFontRatio);
// ↑ブラウザのフォント設定でフォントを拡大させたい場合。
// ※当然、ブラウザのフォント設定が必要。
console.log('vnFontRatio='+vnFontRatio);
console.log('vnHTML_FontSize='+vnHTML_FontSize);
vnFontRatio = 6;
vnHTML_FontSize = Math.ceil(vnWindow_InnerMinimum/200*vnFontRatio);
// ↑※テスト用(ブラウザのフォント設定の手間が無い)。
console.log('vnFontRatio='+vnFontRatio);
console.log('vnHTML_FontSize='+vnHTML_FontSize);
fwHTMLRoot.style.setProperty('--HTML_FontSize', vnHTML_FontSize+'px');
SetFontScale('1');
function SetFontScale(sFScale){
vnFontScale = Number(sFScale);
vnHTML_FontSize = Math.ceil(vnWindow_InnerMinimum/200*vnFontRatio*vnFontScale);
fwHTMLRoot.style.setProperty('--HTML_FontSize', vnHTML_FontSize+'px');
console.log('vnHTML_FontSize='+vnHTML_FontSize);
}
</script>
【bodyタグの次に挿入】
<br>
<form>
<select name='nmFontScaleSelect' style='' onchange='FSS=this.form.nmFontScaleSelect; SetFontScale(FSS.options[FSS.selectedIndex].value);'>
<option value='0.85'>Font：0.85倍</option>
<option value='1' selected>Font：1倍</option>
<option value='1.25'>Font：1.25倍</option>
<option value='1.65'>Font：1.65倍</option>
</select>
</form>
<script>
CSSValue_ScreenWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenWidth');
CSSValue_ScreenHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenHeight');
CSSValue_VDScreenWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--VDScreenWidth');
CSSValue_VDScreenHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--VDScreenHeight');
CSSValue_Window_InnerWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--Window_InnerWidth');
CSSValue_Window_InnerHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--Window_InnerHeight');
document.write(
"oCSSViewport.getAttribute('content'):"+oCSSViewport.getAttribute('content')+';<br>'+
'get_device():'+get_device()+';<br>'+
'CSSValue_ScreenWidth:'+CSSValue_ScreenWidth+';<br>'+
'CSSValue_VDScreenWidth:'+CSSValue_VDScreenWidth+';<br>'+
'CSSValue_Window_InnerWidth:'+CSSValue_Window_InnerWidth+';<br>'+
'<br>');
</script>
|
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/ を ご利用 下さい。
