トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"沙羅"

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/ を ご利用 下さい。

Index Menu
(1)<FirstTitle>:Visual Studio Codeでフロントエンド開発環境を構築する <FirstUser>:amanojaku@管理人 (2)<FirstTitle>:Webページにおける基本的な注意点 <LastTitle>:Webページにおける基本的な注意点(3) (1)<FirstTitle>:Visual Studio Code開発環境/settings.json <FirstUser>:amanojaku@管理人 (2)<FirstTitle>:Chromeモバイル・エミュレーターの操作法 <LastTitle>:モバイル・エミュレーター用のフォント・サイズ自動調整用「CSS、JavaScript」 (1)<FirstTitle>:Javaデモ/JSPages「session」 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [00000231]  <Date>: 2021/12/07 16:07:27
<Title>: Webページにおける基本的な注意点
<Name>: amanojaku@管理人

近年 Webページ作成のハードルは上がっています、下記はプロの話ではなく、アマチュア用の注意点です(プロなら出来て当然のレベル)。
これはプロの基礎レベルに相当します(ただし、プロとアマチュアでは方向性が違いますが)。
プロではピクセル・パーフェクトを希求しますが、アマチュアはユーザー・フレンドリーを希求します。
(プロとアマチュアでは方向性が違うので)プロを目指すならピクセル・パーフェクトを希求して下さい(アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです)。

ユーザー・フレンドリーは(ビューポートではなく)ディスプレイ画面の解像度を基準とし、テキストはデフォルト・フォント・サイズを基準とします。
現在のピクセル・パーフェクトはビューポートの横幅に比例して伸縮します。
Web系においての静的Webページでは古い(pxなどの)絶対単位のピクセル・パーフェクトは無くなりました(ただし動的Webページでは動的に絶対単位で生成している場合が多い感じです、また基幹系においての静的Webページでも昔ながらの古い(pxなどの)絶対単位のピクセル・パーフェクトを使っているかもしれませんが)。
つまり、(Web系においての静的Webページでは)現在のピクセル・パーフェクトは、別物になったと言うことです、(完全な別物なので)それをピクセル・パーフェクトと呼んで良いのかと言う議論は有るでしょうが。
分かりやすく言うと、肉眼で見たイメージとしてのピクセル・パーフェクトなので、脳内で便宜的に「イメージ・パーフェクト(仮)」とでも読み替えれば良いでしょう。
なお 人がピクセル・パーフェクトと言った時に、古いpx単位のピクセル・パーフェクトを言っているのか、「イメージ・パーフェクト(仮)」を言って居るのか、文脈から判断する必要があります。

本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
無料レンタルWebサーバーは基本的に広告が入るので、広告がウザくない所を探して下さい。

コンテンツの作成時に背景が白のコンテンツを長時間 集中して凝視していると目に良くないので、とりあえず背景は目に優しい色にすることをオススメします。
インターネットでは「ファイル名、フォルダ名」は(半角)英文字の小文字と大文字が区別されるので注意が必要です。
なお、(実際は何の問題もないのですが)インターネット上の慣習で英大文字は推奨されませんが、それは ただの慣習なのでアマチュアなら それほど気にしなくても良いでしょう(プロを目指すなら英大文字は使わないほうが良いでしょうが)。
また、インターネットに公開する場合、「ファイル名、フォルダ名」には使えない文字、使ってはダメな文字があります。
とりあえず、半角「英字(大文字・小文字)、数字、アンダーライン」程度にして下さい。
「ファイル名、フォルダ名」には全角文字も使用しないで下さい、インターネットでは全角文字の「ファイル名、フォルダ名」には対応していません。
自分のサイト内の(リンク可能な)コンテンツは相対アドレスで指定して下さい(当然、ローカルのフル・パス「C:\~」もダメです)。
絶対アドレスで指定すると引越し時に面倒なことになります(基本的に先頭に「 http:// 」が付くのが絶対アドレス、「 http:// 」が付かないのが相対アドレスです)。

現在、キャラクターセット(文字エンコード)は多数ありますが、「UTF-8、Shift_JIS」の2つがインターネットでのデファクトスタンダードです(現在、Shift_JISよりUTF-8の方が推奨されています)。
metaタグのcharset属性で(「UTF-8、Shift_JIS」などの)キャラクターセット(文字エンコード)が設定可能です。
必ず(metaタグの)charset属性に設定されているキャラクターセット(文字エンコード)でセーブして下さい、セーブ時のキャラクターセット(文字エンコード)が違うと全角文字が文字化けするので注意して下さい。

Webページは基本的にローカルで表示して下さい。
ネット上のページをチェックする場合は、ブラウザのキャッシュが効く(古い状態のページが表示される)ので注意が必要です。
とりあえずリロードを試してみて、それで最新の状態が反映されない場合は、ブラウザのキャッシュをクリアして下さい。
普段 使ってるブラウザのキャッシュをクリアすると、ログインが面倒になるので、普段 使わないブラウザでチェックしてみると良いでしょう。

Webページを最新の状態で見る
https://www.benricho.org/Tips/page_reload/

各ブラウザでの強制リロード(スーパーリロード)まとめ
https://ao-system.net/note/69

ブラウザのキャッシュクリア方法
https://nestle.jp/gamebox/info.html

pタグでdivタグは囲えないので注意して下さい。

pタグとは?意味と使い方について
https://sem-journal.com/design/p/#p-5

pタグの中にdivタグは入れられない
http://cly7796.net/wp/css/div-can-not-be-put-in-p/

html5のタグの入れ子ルール(全部 覚えなくても良いです)
https://webaby.site/job/190908/

HTML5 コンテンツモデル ガイド | HTML5 Content Models Guide
https://webgoto.net/html5/

クロス・ブラウザが推奨されます、PCでは「Firefox、Internet Explorer(Edgeでは無い)」あたりで、スマホでは「Chrome、Firefox、Yahoo!ブラウザ」あたりでチェックすれば良いでしょう。
※スマホでは高度なCSSが効かない場合があるので注意が必用です。
ガッツリとスマホ(Android端末)対応したいなら、低いバージョンのスマホ(Android端末)を購入して実際にチェックしてみると良いでしょう、(中古なら1万円前後で買えます)、Androidバージョン4あたりで良いと思います、それ以下だと流石に古すぎます。
中華端末はバックドアが仕込まれている可能性があるので要注意です、表面的に中華端末で無くても新品で格安端末なら ほぼ中華製と考えて良いでしょう。
※プロの場合は、当然 もっと多種のブラウザをチェックします。

クロスブラウザ
https://www.weblio.jp/content/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6

「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。
Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。

なお スマホ用ブラウザによっては(metaタグの)viewportが指定されてないと、Webページのフォント・サイズをブラウザが勝手に忖度(そんたく)して変更される場合があるので、レスポンシブ・デザインにする場合は(metaタグの)viewportの指定が必須になります(PC版ブラウザではviewportの設定は無視されるようです)。
実機でチェックする場合には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">


画面の解像度に関する注意点。
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」解像度をチェックしておけば良いでしょう(なのでポートフォリオを作成するなら6k解像度ぐらいには対応すると良いでしょう)。
具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。

「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。
「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。
タブレット:『「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)』

「スマホ、タブレット」フレンドリーに関する注意点:「スマホ、タブレット」の場合、端末の物理的な解像度と、ブラウザ上の解像度は違うようで、ブラウザ上の解像度を「CSSピクセル、dp解像度」と言うらしいです。

iOS・Android端末のCSSピクセル・dp解像度一覧
https://wemo.tech/1496

画像サイズの注意点。
(画像のファイル・サイズが肥大化すると、画像の表示が重くなるので)画像のファイル・サイズは出来るだけ小さくした方が良いのですが、画面の解像度に合わせて拡大することも考慮しなければなりません。
通常、「PC用、スマホ用」の2つを用意します(PC用は大きめに、スマホ用は小さめに)。
YouTubeの個人用チャンネルのバナーの横幅は2560pxが推奨されています(スマホ用の小さい画像(横幅が1060px)は自動的に作られるようです)。
ですので画像の拡大時も画像の画質を綺麗に表示させたい場合は、PC用なら横幅は2560pxクオリティー、スマホ用(縦画面)なら横幅は1060pxクオリティーで作っておけば良いと思われます。
つまり、PC用なら2560pxの解像度で計算し、スマホ用なら1060pxの解像度で計算すれば良いでしょう、(ウインドウの横幅を基準とした場合)ウインドウの50%の画像サイズにしたいなら、PC用なら2560*0.5=1280px、スマホ用なら1060*0.5=530pxになります。
(2560pxクオリティーの1,5倍の)4K画面(横幅3840px)に、2560pxクオリティーで表示しても、(見た目的に)2560pxクオリティーの解像度とまでは言えないでしょうが、(見た目的に)フルHD(1920px)クオリティー以上の解像度には見えそうな気はします。
なお、スマホは必ずしも4G通信している保障はありません、電波状況が悪い場合は3G通信になるので、画像のファイル・サイズが肥大化すると、画像の表示が重くなるので注意が必要です。
また 格安SIMの場合は無駄にパケットが消費されるのは非常に迷惑になります。
拡大時の画像の画質を"犠牲"にしても良いなら、画像をスマホ・クオリティーで作成しておけば容量も軽くなり、「PC、スマホ」両対応になって非常にラクになります。

Chromeのデベロッパー・ツールにはスマホをエミュレートできるモバイル・エミュレーターが搭載されていますが、あくまでもエミュレーターなので画像の拡大時に実際に どれだけ画像が劣化してるかをチェックしたい場合は本物の4k画面でチェックして下さい。
(本物の)4kモニターを購入する場合は、当然 PC側も4kモニターに対応している必要があります。
画面はノングレア(非光沢)処理を推奨、また格安モニターだと高さ調整が出来ない場合があるようで、画面の高さが高いと非常に見づらく首が痛くなったりするそうです(格安モニターでも高さが低いなら問題ないかもしれませんが)。
TSUKUMOでは「ドット抜け交換保証(オプション)」を有償で付与可能なようです(料金は下記参照)。

とっても便利なツクモ パーツ交換保証~モニター編~
https://blog.tsukumo.co.jp/honten/2018/09/post_2155.html

ディスクトップPCならグラフィックボードで対応すると良いでしょう。
※空いてる「PCI Express」スロットが1つ必要になります、モニター用の接続ケーブルが必用です。
ロープロファイル対応で無い場合は、空いてる「PCI Express」スロットが2つ以上 必要になります。
補助電源ありの場合は、グラフィックボード用・電源ケーブル(2本以上 必要な場合もある)や、電源ケーブルに空きが無い場合は電源用・分岐ケーブルが必要になります。

最大解像度:DCI 4K (4096x2160)、ロープロファイル対応、補助電源:なし
https://kakaku.com/pc/videocard/itemlist.aspx?pdf_Spec003=1&pdf_Spec113=5&pdf_Spec115=2

将来性を見据えて、8k解像度まで対応したい場合。

最大解像度:8K (7680x4320)、ロープロファイル対応、補助電源:なし
https://kakaku.com/pc/videocard/itemlist.aspx?pdf_Spec003=1&pdf_Spec113=7&pdf_Spec115=2


要素サイズの注意点。
bodyタグにデフォルトでmarginが指定されているらしく、ほとんどのPC用ブラウザで8pxがデフォルト値らしい(左右で合計16px?)。
このbodyタグのmarginの固定値が問題になる場合は相対値で指定して下さい。
100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
bodyタグのmarginとスクロールバーの幅を考慮すると、現状では40px程度 小さくしておけば良いと言う事になるのですが、bodyタグのmarginが変更されている場合は40pxではダメですし、将来的に「bodyタグのmargin、スクロールバーの幅」が変更される可能性も在り得るので、将来性を考えるなら40pxの固定値で決め打ちしないほうが良いでしょう(ちなみにスマホではスクロールバーの幅は0pxです)。
単位に「vw」を使って(特定の解像度に依存せずに)はみ出ないように拘りたい場合は横に並んでいる各「要素、マージン、パディング、ボーダー」の合計は それら(bodyタグの左右margin+クロールバーの幅)のサイズが考慮された値でなければなりません(なお、要素に「box-sizing:border-box」を指定してやれば、「パディング、ボーダー」の計算は省ける)。
各「要素、マージン、パディング、ボーダー」などのサイズは相対指定が必須になるので、当然 bodyタグのデフォルトmarginも相対指定に変更する(ケースバイケースですがbodyタグの右側のmarginを0pxにしたほうが良い場合も有ります)。
要素がウインドウの横幅(ビューポートの横幅)から はみ出ても良いとか、要素が改行しても良いとかなら、そこまで拘る必要は無いです。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう(又はJavaScriptで算出するか)。
CSSの単位にvh(vmin、vmaxなども)を使っている場合、スマホでソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる場合があるので注意が必用です(viewport領域が縮小されもレイアウトが崩れないなら単位にvh(vmin、vmaxなども)を使っても良いです)。

各ブラウザのデフォルトスクロールバーの幅一覧
http://hisasann.com/housetect/2008/06/post_78.html

(スクロールバーが表示されている場合)CSS/jQueryでのブラウザのスクロールバーの幅を取得する
http://ithat.me/2016/11/28/css-jquery-get-scrollbar-width

>calc(100vw - 100%)

↑この式がwidthに記述されている場合、親要素のmarginの横方向の合計は引かれないので、(親要素がbodyの場合)正確なスクロールバーの幅は算出できません(親要素がbody以外では使わないで下さい)。
とは言え、こんなに単純で全く予想だにしないモノを見るのは勉強になります。
注.スクロールバーが表示されている時しか使えないので、この式を使いたいならスクロールバーを常時表示にしなければなりません。
(JavaScript)スクロールバーを常時 表示しておけば、window.innerWidthからdocument.documentElement(ルート要素)のclientWidthを引けば、スクロールバーの幅を算出できます。

CSSでスクロールバーを常に表示しておく方法
https://uxmilk.jp/15040

PCとスマホを同一のファイルにする手法はレスポンシブ・デザインと言われており、推奨されています。
レスポンシブ・デザインにする場合、スマホでは高度なCSSが効かない場合があるので、一般的にはモバイル・ファーストで作成する事が推奨されます(折角PC用にCSSで高度な装飾を作っても、後で全面的に修正になる可能性があります)。
PC用を先に作る場合は、PC用を少し作ったら、(高度なCSSの場合は)スマホでも こまめにチェックする必要が有ります、その場合は(モバイル・エミュレーターでは無く)スマホの実機でチェックする必要が有ります。
とりあえずチェックするだけなので、必要最小限の修正で良いですし、PC用のコードのままチェックできるなら修正しなくても良いです。
なので、高度なCSSに限っては最初にスマホ用のコードを作っても良いでしょう(そのコードでPCでもチェックできると尚いいですが)、なお CSSで高度な装飾を使わないならPC用が先でも全然 良いです。
また 絶えずレイアウト構成をスマホの「縦、横」画面、タブレットの「縦、横」画面、PCの画面(アスペクト比「4:3、16:9」)で表示可能か考慮しながら作る必要があります、そうしないと後で全面的に修正しなければならなくなります。

レスポンシブとは? Web用語集
https://web.landgarage.co.jp/2018/04/05/responsive/

もう逃げない。HTMLのviewportをちゃんと理解する
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

><meta name="viewport" content="width=device-width">と指定した場合はviewportの幅は端末やブラウザアプリ毎によって異なる。重要なのはここでも実際の液晶の解像度ではなく360とか580などのスマホらしい小さい値が使われるということだ。

注意点として、(metaタグの)viewportのwidthを固定値にすると横画面の横幅も(metaタグの)viewportで設定したwidthの値になるようです。
つまり、例えば(metaタグの)viewportのwidthが480pxと設定されていると、横画面での横幅も480px(高さは「480/16*9=270px」)になるようです(そのために縦画面より横画面のほうが「853.333/480=約1.778倍」拡大して表示されます)。

CSSメディアクエリ(@media)の設定方法。

[CSS]iPad、iPhone 5 向けレスポンシブWEBデザインに必要な Media Queries のまとめ
https://www.webantena.net/css/css3-media-queries/

レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ
https://www.seojuku.com/blog/responsive-mediaquery.html

メディアクエリ
http://www.isolaboratory.com/webstudies/css/media_queries.html

例えばプロにおけるメディアクエリのブレイク・ポイントは、一般的には「1280px以上」、「1280px未満~992px以上」、「992px未満~768px以上」、「768px未満~576px以上」、「576px未満」に分割する5パターンのレイアウト構成が推奨されているようです。
また、もうチョイ細かく分けたい場合はBootstrapのブレイク・ポイントを踏襲し、「1280px以上」、「1280x未満~992px以上」のレンジを更に「1400px以上」、「1400px未満~1200px以上」、「1200px未満~992px以上」に分割する(全部で)6パターンのレイアウト構成が推奨されているようです。
(当然、アマチュアが そこまで細かく分ける必要があるのかと言う事はあるので)アマチュアにおけるメディアクエリのブレイク・ポイントは、「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです。
※もちろん、ページのレイアウト構成によっては、それ以下のパターン数でも作成可能な場合もあります。
※注意点としては、ユーザーが意地悪くPC用ブラウザの横幅を小さくすると、PC用ブラウザで(レスポンシブ用などの)メディアクエリが効いてしまいます(プロの場合はピクセル・パーフェクトか希求されるので、その挙動が正解になりますが)。
メディアクエリを効かせたく無い部分はJavaScriptで記述する必要があります。
※「スマホ、タブレット、PC」の画面の解像度は多少かさなっているので、メディアクエリでは、それらを完全に分けることはできません。

参考

2020年版 見直すサイトコーディング 第1回 環境とブレークポイントを見直す
https://sys-guard.com/post-18463/

完全に「PC、タブレット、スマホ」を分けたい場合はJavaScriptで判定する必要があります。

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';
  }
}


(Webページ作成の基本のキとして)ブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おkです。
※基本的に横サイズの「%、vw」を注釈として書いておけば良いです(プロの場合は縦サイズも必要でしょうが)。
初心者の場合はワード系のアプリでカッチリ作ったほうが、そのままサイズを測れば良いので分かりやすいでしょう(それを「%、vw」などに換算する)。

下記はワイヤー・フレームの一例です。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。

https://images.app.goo.gl/1yeuxuNJTDNyZE4B7
※後で自分が見て分かりやすく書いてあれば、本当に このような手書きで おkです。

https://images.app.goo.gl/9vcdKBoEycMYLzBR9
※3パターンの場合

https://images.app.goo.gl/c6DPhnTj5Xrw1GcQ7
※3パターンの場合

https://images.app.goo.gl/Wu8gBmoLJiyRK8Qn6
※3パターンの場合


Chromeのデベロッパー・ツールにはスマホをエミュレートできるモバイル・エミュレーターが搭載されており、このモバイル・エミュレーターは仮想的に解像度も変更できるようです(なお 「Galaxy、Pixel、iPhone、iPad」などの解像度のプリセットも用意されているようです)。
ただし、そのプリセットは解像度を再現するだけであり、(当然 本質はPC用ブラウザなので)「スマホでは余りCSSが効かないとか、バク的な仕様とか」などを再現するわけではないので注意して下さい。
モバイル・エミュレーターは、当然 スマホ用エミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにするか削除して下さい。
「<!-- 」、「 -->」で囲うとコメントにできます(例.「<!-- コメント -->」)。
そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。

漢字入力はOFFにして下さい。
Windowsなら[F12]でデベロッパーツールを起動できます(起動に少々時間が かかるかもしれません)。
デフォルトではブラウザの右側に開発ツールが表示されます。
開発ツールの右上のスリー・ドットをクリックすると、メニューの先頭に開発ツール・ドックの位置が指定できます(3番目の画像の赤く囲われた所)、左から順番に「別ウインドウ、左側、下側、右側」。
開発ツールの上部のモバイル・エミュレーター・アイコン(1番目の画像の赤く囲われた所)をクリック。
ビュー・エリアの上部の横幅のサイズ(2番目の画像の赤く囲われた所)をクリックして横幅のサイズを設定して下さい。

PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。
具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。

「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。
「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。
タブレット:『「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]。
ユーザー・フレンドリーの場合、解像度を変更してフォント・サイズが合わなくなったら、見やすいサイズにブラウザでフォント・サイズを設定して下さい。
ただし「Edge、Chrome」などの「最小フォント・サイズ」設定は、「HTML、CSS」の設定を無視して強制的にフォント・サイズを変更してしまうので、本当にユーザー・フレンドリーか どうかをチェックしたいなら、「最小フォント・サイズ」設定は小さいままにしておかなければなりません。
通常の「フォント・サイズ」設定でフォント・サイズが大きくならない場合は、フォント・サイズが絶対単位で指定されていると思われます。
※Webページ作成時に何度も何度も解像度をチェックするとなると、ユーザー・フレンドリーの場合は、各解像度で複数のフォント・サイズを検証しなけらばならないので、ブラウザによるフォント・サイズの調整も、かなり面倒になります。
下記にフォント・サイズ自動調整用の「CSS、JavaScript」を記載してあるので、それを使うと便利でしょう、あくまでもモバイル・エミュレーター用の(暫定的なテスト表示用)コードなので、本番用Webページではコメントにするなど無効にして下さい。
下記コードは あくまでもユーザー・フレンドリー用なので、(プロなど)ピクセル・パーフェクトを希求する場合は不要です。

モバイル・エミュレーターは全画面表示でチェックしてみると良いでしょう。
Windowsなら[F11]で全画面表示のON/OFFが可能です、全画面表示で起動中の他のアプリを表示したい場合は[Alt]+[Tab]でタスクマネージャーが起動できます、[Alt]は放さずに[Tab]を複数回 押すことで表示したいアプリを選択できます。
(ドッド単位での正確さは無理ですが)できるだけ正確にしたい場合は、必ずマウスでビュー・エリアの縁をドラッグしてサイズを調整して下さい。


【CSS定義(styleタグ内)の先頭に挿入】
※charset定義用metaタグの次にstyleタグを記述。

html {font-size: var(--HTML_FontSize);}
:root {
--HTML_SelectOption_MNumber: 0.18;
--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;
  vnScreenMinimum = Math.min(vnScreenWidth, vnScreenHeight);
  vnScreenMaximum = Math.max(vnScreenWidth, vnScreenHeight);
  console.log('vnScreenWidth:'+vnScreenWidth); 
  console.log('vnScreenHeight:'+vnScreenHeight); 
  fwHTMLRoot.style.setProperty('--ScreenWidth', vnScreenWidth+'px');
  fwHTMLRoot.style.setProperty('--ScreenHeight', vnScreenHeight+'px');
  fwHTMLRoot.style.setProperty('--ScreenMinimum', vnScreenMinimum+'px');
  fwHTMLRoot.style.setProperty('--ScreenMaximum', vnScreenMaximum+'px');
  oCSSViewport = document.getElementById('idCSSViewport');
  if(vnScreenMinimum<320){
    console.log('if(vnScreenMinimum<320)'); 
    console.log('vnScreenMinimum:'+vnScreenMinimum); 
    oCSSViewport.setAttribute('content', 'width=320');
  }
  vnDevicePixelRatio = window.devicePixelRatio;
  console.log('vnDevicePixelRatio='+vnDevicePixelRatio);
  vnDeviceWidth = vnScreenWidth*vnDevicePixelRatio;
  vnDeviceHeight = vnScreenHeight*vnDevicePixelRatio;
  console.log('vnDeviceWidth='+vnDeviceWidth);
  console.log('vnDeviceHeight='+vnDeviceHeight);
  fwHTMLHead = document.head;
  voComputedStyle = window.getComputedStyle(fwHTMLHead, null);
  vsDefaultFontSize = voComputedStyle.fontSize;
  console.log('vsDefaultFontSize='+vsDefaultFontSize);
  vnDefaultFontSize = parseFloat(vsDefaultFontSize); 
  console.log('vnDefaultFontSize='+vnDefaultFontSize);
  vnWindow_InnerWidth = window.innerWidth;
  vnWindow_InnerHeight = window.innerHeight;
  console.log('vnWindow_InnerWidth:'+vnWindow_InnerWidth); 
  console.log('vnWindow_InnerHeight:'+vnWindow_InnerHeight); 
  // vnHTMLBody_ClientWidth = document.body.clientWidth;
  // vnHTMLBody_ClientHeight = document.body.clientHeight;
  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 = 0.775/100*(vnDefaultFontSize/5-1);
  vnHTML_FontSize = Math.ceil(vnScreenMinimum*vnFontRatio);
  // ↑ブラウザのフォント設定でフォントを拡大させたい場合。
  // ※当然、ブラウザのフォント設定が必要。
  console.log('vnFontRatio='+vnFontRatio); 
  console.log('vnHTML_FontSize='+vnHTML_FontSize); 
  vnFontRatio = 3/100;
  vnHTML_FontSize = Math.ceil(vnScreenMinimum*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(vnScreenMinimum*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');
document.write('CSSValue_ScreenWidth='+CSSValue_ScreenWidth+'<br>');
CSSValue_ScreenHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenHeight');
document.write('CSSValue_ScreenHeight='+CSSValue_ScreenHeight+'<br>');
CSSValue_ScreenMinimum = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenMinimum');
document.write('CSSValue_ScreenMinimum='+CSSValue_ScreenMinimum+'<br>');
CSSValue_ScreenMaximum = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenMaximum');
document.write('CSSValue_ScreenMaximum='+CSSValue_ScreenMaximum+'<br>');
</script>


<Number>: [0000040B]  <Date>: 2021/11/14 13:20:14
<Title>: Webページにおける基本的な注意点(3)
<Name>: amanojaku@管理人

インターネットでは「ファイル名、フォルダ名」は(半角)英文字の小文字と大文字が区別されるので注意が必要です。
なお、(実際は何の問題もないのですが)インターネット上の慣習で英大文字は推奨されませんが、それは ただの慣習なのでアマチュアなら それほど気にしなくても良いでしょう(プロを目指すなら英大文字は使わないほうが良いでしょうが)。
また、インターネットに公開する場合、「ファイル名、フォルダ名」には使えない文字、使ってはダメな文字があります。
とりあえず、半角「英字(大文字・小文字)、数字、アンダーライン」程度にして下さい。
「ファイル名、フォルダ名」には全角文字も使用しないで下さい、インターネットでは全角文字の「ファイル名、フォルダ名」には対応していません。
自分のサイト内の(リンク可能な)コンテンツは相対アドレスで指定して下さい(当然、ローカルのフル・パス「C:\~」もダメです)。
絶対アドレスで指定すると引越し時に面倒なことになります(基本的に先頭に「 http:// 」が付くのが絶対アドレス、「 http:// 」が付かないのが相対アドレスです)。

ブラウザのフォント・サイズの初期値は16pxのようです、スマホなどではフォント・サイズは初期値(16px)が推奨されているようです。
現在、キャラクターセット(文字エンコード)は多数ありますが、「UTF-8、Shift_JIS」の2つがインターネットでのデファクトスタンダードです(現在、Shift_JISよりUTF-8の方が推奨されています)。
metaタグのcharset属性で(「UTF-8、Shift_JIS」などの)キャラクターセット(文字エンコード)が設定可能です。
必ず(metaタグの)charset属性に設定されているキャラクターセット(文字エンコード)でセーブして下さい、セーブ時のキャラクターセット(文字エンコード)が違うと全角文字が文字化けするので注意して下さい。
UTF-8にはBOMを付与できますが、本来 BOM(Byte Order Mark)はエンディアン(ビッグエンディアン、リトルエンディアン)を指定するためのモノなのですが、UTF-8にはエンディアン(ビッグエンディアン、リトルエンディアン)は存在しないので、本来のBOM(Byte Order Mark)と意味で使われている訳ではなく、単にUTF-8エンコードである事を表わしているにすぎません。

BOM(Byte Order Mark)
http://exlight.net/devel/unicode/bom.html

SEO(Search Engine Optimization:検索エンジン最適化)
まず、SEOの基本のキ(常識レベル)として「description、keywords」の設定をして下さい(下記参照)。

検索結果に表示!HTMLでmetaタグを使う方法【初心者向け】
https://techacademy.jp/magazine/12701

必須レベル(最重要ファクター):「記事の質(端的に言うとアクセス数)、特定の解像度に依存しないユーザー・フレンドリーなページ」の2本柱。
※この"必須レベル(最重要ファクター)"が最高の優先順位だと言うことに注意して下さい(SEOは王道で勝負が基本です)。
つまり いくら他を頑張っても、この"必須レベル(最重要ファクター)"がグダグダだったらダメダメと言う事になりかねないです。

強く推奨レベル:「(ペライチでない場合)パン屑リスト(nav要素)、レスポンシブ・デザイン、ロボッツ・テキスト(robots.txt)の設置、サイトマップ(sitemap.xml)の設置」。
※パン屑リストもハンバーガー・メニュー内に入れておいたほうがユーザー・フレンドリーかもしれません。

推奨レベル:「description、keywords」。

注意点としては「記事の質(端的に言うとアクセス数)」は当然として、「特定の解像度に依存しないユーザー・フレンドリーなページ」に対応できてないと、Googleクローラーでペナルティーが課されるかもしれません。
また、画像などのファイル・サイズが大きくて表示が重くなると予想される場合は、Googleクローラーでペナルティーが課されるかもしれません。
注.スマホは必ずしも4G通信している保障はありません、電波状況が悪い場合は3G通信になるので、画像のファイル・サイズが肥大化すると、画像の表示が非常に重くなる場合も有り得るので注意が必要です。
また 格安SIMの場合は無駄にパケットが消費されるのは非常に迷惑になります。

サイトのタイトルは「ユニーク」で「覚えやすい」タイトルが強く推奨されます。
下記でチェックしてみると良いでしょう。

Free Keyword Generator Tool: Find 100+ Keyword Ideas in Seconds
https://ahrefs.com/ja/keyword-generator

「検索エンジン:Google、国:日本」に設定、「キーワードを探す」をクリック、ロボットでないをチェックする。
「ボリューム」はキーワードの月間平均検索数(推定値)です。
「ボリューム」値が1000前後なら充分にユニークですが、あくまでも推定値なので あまり厳密に考えなくても良いです(「ボリューム」値が2000前後だとダメとか、3000前後だとダメとか、そう言うことではありません、あくまでも参考程度に考えて下さい)。


HTML内では特殊文字は「文字実体参照」か「数値文字参照」に変換しなければなりません(クォーテーション、ダブル・クォーテーション」はバッティングする場合だけ変換すれば良い)。
※HTML内とJavaScript内では そのルールが違うので注意が必要です。

HTMLの記号・特殊文字の文字コード表(文字実体参照、数値文字参照)
https://gray-code.com/html_css/list-of-symbols-and-special-characters/

例えばHTML内では「<'&"&"&'>」と言うテキスト・データを表したいなら最低限「<」、「>」、「&」を変換する必要がありますが、「クォーテーション、ダブル・クォーテーション」がバッティングする場合は、それらも変換する必要があります。
下記は、その具体例です。
テキストは勿論、URLまで変換していることに注意して下さい(HTML内のテキスト・データは徹底的に変換しなければならないと認識する必要があります)。
リンク・テキストは「<'&"&"&'>」と表示されているハズです、またリンクをマウスの右ボタンで、「リンクのURLをコピー」をすると「 http://<'&"&"&'> 」となるハズです。
※URLは「href="http://~ "」とダブル・クォーテーションで囲まれており、ダブル・クォーテーションはバッティングするので、ダブル・クォーテーションも変換していることに注意して下さい(クォーテーションを変換したい場合は「&#39;」)。


<html>
    <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
        <meta charset="UTF-8">
        <title>test</title>
    </head>
<body>
    <a href="http://&lt;'&amp;&#34;&amp;&#34;&amp;'&gt; " >&lt;'&amp;"&amp;"&amp;'&gt;</a><br>
</body>
</html>


第一目標:特定の解像度に依存しないページにトライしてみると良いでしょう。
手始めとして、簡素なパイロット版ページで作ってみると良いでしょう(要素に囲まれたテキスト、画像、1行入力、ボタン」など)。

pxから相対単位への換算で割り切れない場合は、あまり細かい値は意味ないような感じです。
%系では小数点以下1桁(小数点以下2桁目を四捨五入)、倍率系はでは小数点以下3桁(小数点以下4桁目を四捨五入)、程度で良いようです。
実際の表示に誤差が出たら、当然 微調整が必用になります。

Chromeの検証モードでサイズを確認できます。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool


第二目標:レスポンシブ・デザインにトライしてみると良いでしょう。
メディアクエリで、アマチュアなら「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです。

参考

フロントエンド・スキル
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000036D&tsn+0000036D&bts+2020/09/15%2000%3A31%3A53&

Block( Address 0000053E Identity 00000231 )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.