とりあえず下記をどこか(googleドキュメントを推奨)にコピペしておく(笑)。
「https:」が省略されているリンクは「https:」を付加する。
下記は、あくまでも推奨であって絶対では有りません。
HTML5の要素による構成例
//web-svr.com/HTML5%E7%B7%A8/21.php
※↑これは あくまでも基本の例であって絶対ではありません(例えばaside要素を左に配置するとか、aside要素自体を無くす、footer要素自体を無くすなど)。
[PC表示]と[スマートフォン表示]でレイアウト構成が変化している事に注意して下さい、一般的にレスポンシブ･デザインと言う手法が使われます。
※「header要素、footer要素、nav要素、main要素、article要素、section要素、aside要素」などのリンク先のページを参照することを強く推奨します。
それらの意味が分からずに使っても、それでは間違って使ってるだけになるので、それなら(間違って使うよりは)とりあえずdivタグで代替しておけばおｋです(pタグを改行と勘違いしている人も居ますが、
pタグも「Paragraph：段落」であって改行では無い)。
なお、現在はHTML5は廃止され、「HTML Living Standard」に移行しましたが、現状では「HTML Living Standard」はHTML5の ほぼ上位互換です。
なので現状ではHTML5で勉強しても大丈夫です。
ただし、将来的には「HTML Living Standard」とHTML5の仕様は乖離して行くかもしれませんが。
下記は、2016年発売のAndroid端末のdp解像度です。
つまり、px単位で指定したら、レスポンシブ・デザインは無理だと言う事を意味しています(ただし、@mediaはpx単位で指定)。
分かり易く言うと、モバイル(タブレット、スマホ)用ページでpx単位を使ったら、ベンダーに殴られます。
2016年発売Android端末のdp解像度まとめ
//nein37.hatenablog.com/entry/2017/01/03/200142
※↑スマホ縦画面表示の場合では、横サイズの解像度の範囲は「320px～540px」となる。
タブレット縦画面表示の場合では、横サイズの解像度の範囲は「400px～768px」となる。
タブレット横画面表示の場合では、横サイズの解像度の範囲は「768px～1280px」となる。
ただし、それは2016年発売のAndroid端末だけの話しなので、実際には、それよりも多くのバリエーションが存在すると言う事です。
なお、モバイル(タブレット、スマホ)の(dp)解像度の範囲は一般的には「約300px～約800px」と考えて良いです。
タブレットでは800px以上の(dp)解像度も有りますが、それは もうPC画面の領域と考えて良いです(プロの場合は例外も有るかもしれないですが)。
なお、PCでも8k解像度モニターが販売されており、一般的にはPCの場合は「約1000px～約3000px」解像度ぐらいには対応しないとSEO的にマイナスになります。
ただし、ベンダーはコスト削減のために、PC用ページに限りアマチュアを許容する場合も有りますが、それは解像度固定(通常、約1000px)のPC用ページを許容すると言う事を意味しています(当然、ベンダーは、それが高解像度に対応できない欠陥Webページだと分かっているし、SEO的にマイナスだと分かっている)。
レスポンシブ･デザイン。
現在は「PC画面、タブレット画面、スマホ画面」などの画面･解像度ごとにレイアウト構成を変えることが推奨されています(レスポンシブ･デザインと言う手法が推奨されている)。
レスポンシブ･デザインの注意点としては、HTMLタグを冗長化してはならないと言う事。
分かり安く言うと、基本的に、PC用のタグ、タブレット用のタグ、スマホ用のタグのように分けてはダメ(当然、部分的にでも分けてはダメ)。
趣味なら そこまで厳密に考え無くても良いですけど
コーダーとWebデザイナー
https://rara.jp/sphinx1335/page46
※ただし、現在は多くの「ガチのWeb系ベンダー」でも、コスト削減のためにアマチュアでも許容する場合もあるようです(それは欠陥Webページでも許容される場合もあると言う事)。
なお、Web系ベンダーが(レスポンシブ･デザインなどで)ガチのフロントエンドの話しをする可能性も有り得るので、無知だと当然 Web系ベンダーの話しが意味不明になるので、知識としてぐらいはガチのフロントエンドを理解して置く事を推奨します。
クライアントに欠陥Webページがバレて、訴えられたら どうすんねん(当然、コーダーが全責任を取らされる契約になっているのだろうけど)。
下記のようなクソみたいな欠陥Webページだと、当然 SEO的にマイナスになります(当然、フロントエンド(プロ)としても失格です)。
\u0026gt;下の画像のページが表示されたら、このWebページ作ったヤツはアホだろと思ってブラウザ・バックしますよね？
\u0026gt;https://drive.google.com/file/d/1znyw4kX9m4I4enroA931c7tyZ1wq8A91/view?usp=sharing
PCのみ対応のWebページなら一般的には約「1000px～3000px」解像度ぐらい、モバイルも対応のレスポンシブ･デザインなら一般的には約「300px～3000px」解像度ぐらいをChromeモバイル･エミュレーターでチェックしてみて下さい。
フロントエンド(プロ)だと6k解像度モニターぐらいは使ってるかもしれませんから、ポートフォリオを作成するならChromeモバイル･エミュレーターで約「280px～6000px」解像度ぐらいのチェックが必要になるので、Chromeモバイル･エミュレーターぐらい使えないようではフロントエンド(プロ)は無理と思って下さい。
フロントエンド(プロ)を目指さない場合でも「欠陥Webページ、レスポンシブ･デザイン」のチェックにはChromeモバイル･エミュレーターが必要になるので、とりあえずChromeモバイル･エミュレーターぐらい使えるようにしましょう。
テスト的なチェックならEdgeモバイル･エミュレーターでも おｋ。
テレビ画面の「4k画面、8k画面」ぐらいは聞いたことは有りますよね？
下記はテレビ画面のHD(ハイビジョン)以降の規格(解像度)です。
今どきの若い人はHD(ハイビジョン)など知らないかもしれませんが。
ただしPCモニターの解像度は、テレビ画面のような正式な規格と言う訳では無いですが。
https://images.app.goo.gl/ZQctd4Rb7AorGsNp6
【重要】
その『Chromeモバイル・エミュレーターの使い方』は中高生レベルの読解力が有れば、何回か読めば理解できる程度の難易度なのですから、【ダメダメ･デモ】を実際にChromeモバイル･エミュレーターでチェックしてみて下さい。
重要なので、すぐにでもトライしてみて下さい。
何故か、殆どの人は真面目に読もうとしないですよね(その程度の事ぐらい真面目に やってくれよって話しですが)。
CSSデモ集
//sphinx1335.blogspot.com/2024/09/css-css3-csscommentary001-httppleiades.html
※(当然、CSSはプログラミング言語ではないですが)CSS3はプログラムと見紛うばかりの動的な表示が可能になりました。
※ガチでCSSを勉強したいなら、まずは人のコードを読んでみると良いでしょう。
(ググるのも勉強の内なので)コードの意味は ご自分でググって下さい(そんなクソみたいなこと やってらんね～と言うタイプの人は向いてないです)。
※CSS3は非常に難易度が高いのでメンターを雇うのもアリ(雇う前にCSS3の知識があるか確認が必要)。
ただし、「HTML、CSS」のプロ・レベル(コーダー)は非常に難易度が高いので、その辺のメンターでは無理ですが。
JavaScriptデモ集
//sphinx1335.blogspot.com/2024/09/JavaScriptcheckquiz015-httppleiades.html
下記は(超単純なレスポンシブ･デザインのデモです)レスポンシブ・デザインの場合は、とりあえずChromeモバイル･エミュレーターで一般的には約「300px～3000px」解像度ぐらいをチェックしてみると良いでしょう
コードは単純明快なので、コードを参照してみると良いでしょう、なおダウンロードすると(ブラウザ？によって)コードが改変されてしまう場合があるので、必ず開発者ツール(デベロッパー･ツール)で参照して下さい。
添付画像の左からPC画面のレイアウト構成、タブレット縦画面のレイアウト構成、スマホ縦画面のレイアウト構成
//ss1.xrea.com/sphinx1335.s329.xrea.com/responsive/001/index.htm
そのコードを見れば分かるように、概念自体は そんなに難しくは無いです(逆に簡単すぎて拍子抜けするかもしれませんけどね)。
もちろん、本格的なレイアウトだと、CSSの難易度は非常に高くなりますが、それは地道に勉強するしか無いですが。
