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

"沙羅"

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

Index Menu
(1)<FirstTitle>:Visual Studio Codeでフロントエンド開発環境を構築 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaの小技 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/単純化している「CUI対戦デモ」 オブジェクト指向プログラミング <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/CUI対戦デモ(8) オブジェクト指向プログラミング <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/グラフィック「Figure」(1) オブジェクト指向プログラミング <FirstUser>:amanojaku@管理人

   
   

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







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

近年 Webページ作成のハードルは上がっています、この記事はプロの話ではなく、アマチュア用の注意点です(プロなら出来て当然のレベル)。

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

現在、キャラクターセット(エンコード)は多数ありますが、「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

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 コンテンツモデル ガイド | HTML5 Content Models Guide
https://webgoto.net/html5/

クロス・ブラウザが推奨されます、PCでは「Firefox、Internet Explorer(Edgeでは無い)」あたりで、スマホでは「Chrome、Firefox、Yahoo!ブラウザ」あたりでチェックすれば良いでしょう。
※プロの場合は、当然 もっと多種のブラウザをチェックします。

クロスブラウザ
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、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。
※ちなみに「多数のアクセス数(質の良いコンテンツ)、ユーザー・フレンドリー」の2本柱が、Googleの検索エンジンAIが好評価する最低限の必須条件になるでしょう(その他、レスポンシブ・デザインも その好評価に多少 貢献するようです)。
※Googleの検索エンジンAIでは、アクセス数が多くてもスパム・コンテンツだとペナリティーが課されます。

PCフレンドリーに関する注意点:PCの場合、現在4k画面が普及価格帯で販売されています、また(高価ですが)「5k画面、8k画面」も販売されています(そのうち量産効果で安くなるか?)。
※注意点としてユーザーは自分が見やすいようにブラウザのフォント・サイズを設定しています(当然、目が悪い人は大きめにしています)のでデフォルトのフォント・サイズ以下にしたり、フォント・サイズを固定にしたりするとユーザビリティが著しく低下する可能性があるので注意が必要です(デフォルトのフォント・サイズより大きくするなら問題ない)。

とりあえずPCにおいては最低限「1K~4k」画面対応が強く推奨されます。
(2020年9月現在、価格.com調べ)横幅が800pxと言う画面もあり、アスペクト比は「4:3、16:9」の2つがあるようです。
1K画面(横幅1024px)だとアスペクト比は大抵は4:3になるでしょう。
「HD画面(横幅1280px)、フルHD画面(横幅1920px)、WQHD 2K画面(横幅2560px)、4K画面(横幅3840px)」だとアスペクト比は16:9になります。

「スマホ、タブレット」フレンドリーに関する注意点:「スマホ、タブレット」の場合、端末の物理的な解像度と、ブラウザ上の解像度は違うようで、ブラウザ上の解像度を「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)クオリティー以上の解像度には見えそうな気はします。
ただし、画像のファイル・サイズが肥大化すると、画像の表示が重くなるので注意が必要です、拡大時の画像の画質を犠牲にしても良いなら、もっと小さくした方が良いでしょう(画像をスマホ・クオリティーで作成しておけば容量も軽くなり、「PC、スマホ」両対応になって非常にラクになります)。
Chromeのデベロッパー・ツールにはスマホをエミュレートできるモバイル・エミュレーターが搭載されていますが、あくまでもエミュレーターなので画像の拡大時に実際に どれだけ画像が劣化してるかをチェックしたい場合は本物の4k画面でチェックして下さい。
(本物の)4kモニターを購入する場合は、当然 PC側も4kモニターに対応している必要があります。
画面はノングレア(非光沢)処理を推奨、また格安モニターだと高さ調整が出来ない場合があるようで、画面の高さが高いと非常に見づらく首が痛くなったりするそうです(格安モニターでも高さが低いなら問題ないかもしれませんが)。
TSUKUMOでは「ドット抜け交換保証(オプション)」を有償で付与可能なようです(料金は下記参照)。

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

要素サイズの注意点。
フォント・サイズの単位はremが推奨されています。
デフォルト・フォント・サイズが大きく設定されている場合など、テキストを囲んでいる要素サイズをフォント・サイズに追随させたり、テキストを囲んでいる要素の横幅が固定値の場合は、テキストが その要素の横幅を越えた場合、その要素が縦方向に伸びるようにしておく必要があります。
ただし、どちらの場合でもレイアウトが崩れる可能性があるので、想定の範囲内でレイアウトが崩れるように設計する必要があります。
bodyタグにデフォルトでmarginが指定されているらしく、ほとんどのPC用ブラウザで8pxがデフォルト値らしい(左右で合計16px?)。
このbodyタグのmarginの固定値が問題になる場合は相対値で指定して下さい。
100vwの場合、bodyタグのmarginや、PC用ブラウザではスクロールバーが表示されるなどで はみ出ます、bodyタグのmarginとスクロールバーの幅を考慮すると、現状では固定値なら40px程度 小さくしておけば良いと言う事になるのですが、bodyタグのmarginが相対値で設定されている場合は40pxの固定値ではダメですし、8k画面対応で将来的に「bodyタグのmargin、スクロールバーの幅」が変更される可能性は有るので、将来性を考えるなら40pxの固定値にしないほうが良いでしょう。
(特定の解像度に依存せずに)はみ出ないように拘りたい場合は横に並んでいる各要素(と その隙間も)の合計は100vwより それら(bodyタグの左右margin+クロールバーの幅)のサイズを引く必要があります、つまり 各要素サイズだけでなく「マージン、パディング、ボーダー」などのサイズも相対指定が必要になります(要素が(改行可能で)改行しても良いなら、そこまで拘る必要は無い)。
ただし スマホ画面用に縮小表示された場合に、それら「マージン、パディング、ボーダー」などのサイズが、(ゼロでない場合は)ゼロにならないように注意が必要です。
CSSの単位にvh(vmin、vmaxなども)を使っている場合、スマホでソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる場合があるので注意が必要です。

各ブラウザのデフォルトスクロールバーの幅一覧
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用の)ブラウザの横幅の変更に対し、レイアウトも動的に変化したり、(PC用の)ブラウザの横幅が狭くなりすぎたら、スマホ用の縦画面の配置に変更されたりする、リキッド・デザイン(リキッド・レイアウト)と言う手法も提唱されているようです。
このリキッド・デザイン(リキッド・レイアウト)は少々ハードルが高いと思われるので、そこまで対応しなくても良いと思いますが、スマホの「縦、横」画面、タブレットの「縦、横」画面、PCの画面(アスペクト比「4:3、16:9」)に対応する必要はあります。
また、(リキッド・デザイン(リキッド・レイアウト)は無理としても)ウインドウ・サイズの変更でハミ出た要素が、想定の範囲内でレイアウトが崩れるように設計して下さい(致命的なレイアウトの破綻をしないように心がけて下さい)。
※要素の幅が静的ならgridレイアウトの「grid-template-columns: repeat(auto-fill,~」で自動的にレイアウトが崩れるgridが可能です、「justify-content」でカラム間隔を指定できます(その場合column-gapは最小値になるようです)。

リキッドレイアウトと代替レイアウト | CC、CS6
https://helpx.adobe.com/jp/indesign/using/alternate-layouts-liquid-layouts.html

スマホ用ブラウザによっては(metaタグの)viewportが指定されてないと、Webページのフォント・サイズをブラウザが勝手に忖度(そんたく)して変更される場合があるので、レスポンシブ・デザインにする場合は(metaタグの)viewportの指定が必須になるでしょう(PC版ブラウザではviewportの設定は無視されるようです)。
スマホでも(metaタグの)viewportでdevice-widthが設定されている場合は、機種の個々の解像度に対応しなければなりません(つまり 特定の解像度に依存しないページが推奨されます)。
下記は、一般的にネットで推奨されているviewportの例ですが、「initial-scale=1」が指定されていると横幅が はみ出るようですので、「initial-scale=1」を削除することをオススメします。

> <meta name="viewport" content="width=device-width,initial-scale=1">

PCとスマホを同一のファイルにする手法はレスポンシブ・デザインと言われており、推奨されています。
レスポンシブ・デザインにする場合、スマホでは高度なCSSが効かないので、モバイル・ファーストで作成する事が推奨されます(折角PC用にCSSで高度な装飾を作っても、後で全面的に修正になる可能性があります)。
PC用を先に作る場合は、PC用を少し作ったら、スマホでも こまめにチェックする必要があります(とりあえずチェックするだけなので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などのスマホらしい小さい値が使われるということだ。

プロでは480px(高さは「480/9*16=約853.333px」)に固定している場合もあるようです(下記サイト参照)。
注.ただし、横画面の横幅も(metaタグの)viewportで設定したwidthの値になるようです。
つまり(metaタグの)viewportのwidthで480pxが設定されていれば、横画面での横幅も480px(高さは「480/16*9=270px」)になるようです(そのために縦画面より横画面のほうが「853.333/480=約1.778倍」拡大して表示されます)。

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

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

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

メディアクエリ
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)。
下記はワイヤー・フレームの一例です。

https://images.app.goo.gl/neirrqboPj4L9skA7

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

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

https://images.app.goo.gl/e2JYwBZj9LPZammA6
※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」では「約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なら[F11]で全画面表示のON/OFFが可能です、全画面表示で起動中の他のアプリを表示したい場合は[Alt]+[Tab]でタスクマネージャーが起動できます、[Alt]は放さずに[Tab]を複数回 押すことで表示したいアプリを選択できます。
(ドッド単位での正確さは無理ですが)できるだけ正確にしたい場合は、必ずマウスでビュー・エリアの縁をドラッグしてサイズを調整して下さい。
モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい、Windowsなら[F5]。
※本来なら各解像度ごとにブラウザ側のフォント・サイズを設定し直さなければならないのですが、面倒なので下記に(あくまでも暫定的な)テスト表示用のJavaScriptコードを記載してあります。


【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<688){
    console.log('if(vnScreenMinimum<688)'); 
    console.log('vnScreenMinimum:'+vnScreenMinimum); 
    oCSSViewport.setAttribute('content', 'width=480');
  }
  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 = 1.55*(vnDefaultFontSize/5-1);
  vnHTML_FontSize = Math.ceil(vnScreenMinimum/200*vnFontRatio);
  // ↑ブラウザのフォント設定でフォントを拡大させたい場合。
  // ※当然、ブラウザのフォント設定が必要。
  console.log('vnFontRatio='+vnFontRatio); 
  console.log('vnHTML_FontSize='+vnHTML_FontSize); 
  vnFontRatio = 6;
  vnHTML_FontSize = Math.ceil(vnScreenMinimum/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(vnScreenMinimum/200*vnFontRatio*vnFontScale);
    fwHTMLRoot.style.setProperty('--HTML_FontSize', vnHTML_FontSize+'px');
    console.log('vnHTML_FontSize='+vnHTML_FontSize); 
  }
</script>


【bodyタグの次に挿入】

<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>: [0000027A]  <Date>: 2021/04/24 21:27:26
<Title>: Webページにおける基本的な注意点(2)
<Name>: amanojaku@管理人

ユーザーは自分が見やすいようにブラウザのフォント・サイズを設定しています(当然、目が悪い人は大きめにしています)のでデフォルトのフォント・サイズ以下にしたり、固定にしたりするとユーザビリティが著しく低下する可能性があるので注意が必要です(デフォルトのフォント・サイズより大きくするなら問題ない)。

その注意点として、文字を囲む要素のサイズはユーザーのフォント・サイズの変更に応じて動的に変化させる必要が有ります。
例えばフォント・サイズを大きくした場合、ザックリと言うと文字列の長さに応じて横幅を伸ばすか、横幅を固定するなら文字列を改行させて (その行数が入るように)縦を伸ばすかで対応しなければなりません。

下記・画像は とあるサイトの実例です。

1番目の画像は、横幅は固定しており文字列を改行させて (その行数が入るように)縦を伸ばしています。

2番目の画像は、要素より文字列が大きいために、要素から文字がハミ出てしまっています。

3番目の画像は、要素よりフォント・サイズが大きいために、フォントの下の部分が隠れてしまっています。


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>


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

第一目標:特定の解像度に依存しないページにトライしてみると良いでしょう。
要素に囲まれたテキスト、画像、1行入力、ボタン」などの簡素なパイロット版ページで作ってみると良いでしょう。
フォント・サイズの変更に応じて動的に要素サイズが追随しているか確認するために、その要素にはボーダーの表示は必須です。
Chromeのモバイル・エミュレーターで「1K~4k」の解像度をチェックしてみて下さい。

第二目標:レスポンシブ・デザインにトライしてみると良いでしょう。
メディアクエリで、アマチュアなら「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです。
こっちは簡素なページではダメで、ある程度 カッチリと必要なパターンのレイアウト構成を設計する必要があります。
アマチュアならリキッド・デザイン(リキッド・レイアウト)は対応しなくても良いです(プロを目指すならリキッド・デザイン(リキッド・レイアウト)も必須です)。

Block( Address 00000491 Identity 00000231 )






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

   
   

管理者用 Password:

  




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