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

"T3T"掲示板(Twilight(トワイライト) Triath(トライアス)(3) Trim(トリム))

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

   
   

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







<Number>: [0000031C]  <Date>: 2024/02/01 19:12:13
<Title>: 「特定の解像度に依存しない実用的なWebページ」詳解
<Name>: amanojaku@管理人

もしも フロントエンド(プロ)を目指すなら、この記事を理解でき具現化できてフロントエンド(プロ)の"基礎"レベルです、本職のフロントエンド(プロ)になるには更に上のレベルが要求されます。
初心者やフロントエンド(プロ)を目指さない場合は、そんなこともあるんだな~程度に流して読んでおけば良いです。
なお、ここで言っているフロントエンド(プロ)とは、あくまでもコーダーの事です。

この記事は基本的にアマチュアを対象にしています、なので「プロなら~」のような但し書きが有りますし、例えばクロス・ブラウザ対応は必須になるなど、ある程度注意深く読む必要が有ります(下記は一例です)。

>下記は、一般的にネットで推奨されているviewportの例ですが、「initial-scale=1」が指定されていると横幅がハミ出る場合が有るようですので、「initial-scale=1」を削除することを推奨します。

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

↑フロントエンド(プロ)なら推奨では無く「絶対にそうしろ」と言うことです、「initial-scale=1」を書いていたらベンダーに「こいつアマチュアだろ」と低く見られるので。
"推奨"と書いてあっても、それはあくまでもアマチュアに対してであって、プロは違うと言うことです。


【要注意】初心者の勉強用に方便として単位にpxなどを使うのは良いですが、(メディアクエリは除き)pxなどの絶対単位(px以外の絶対単位も同様)を使っていると「特定の解像度に依存する」ので、欠陥Webページになるのでご注意下さい。
(メディアクエリは除き)pxなどの絶対単位(px以外の絶対単位も同様)を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
「特定の解像度に依存するWebページ」だと、他の人のモニター解像度が違う場合や、自分がモニター解像度が違うPCに買い換えたりとかしたら正常に表示できない場合が有ります。
当然 ベンダーも そんなコード(欠陥Webページ)は許さないので、欠陥Webページしか作れないようならフロントエンド(プロ)として失格と言って良いでしょう。

例えば1pxはモニターの1ドッドを表わします。
1k解像度(1024px解像度)モニターの100pxは画面の約9.766%のサイズに見えます。
4k解像度(3840px解像度)モニターの100pxは画面の約2.604%のサイズに見えます。
モニター解像度によって肉眼で見えるサイズ感が違ってきます、フォントなどは読めないぐらいまで小さくなることが有ります。

下記はテレビ画面のHD(ハイビジョン)以降の規格(解像度)です。
(今どきの若い人はHD(ハイビジョン)など知らないかもしれませんが)テレビ画面の「4k画面、8k画面」ぐらいは聞いたことは有るでしょう。
ただしPCモニターの解像度は、テレビ画面のような正式な規格と言う訳では無いですが。

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

PCモニターの場合、現在4k画面(横幅3840px)が普及価格帯で販売されており、「HD画面(横幅1280px)、FHD(Full-HD)画面(横幅1920px)、WQHD(Wide Quad-HD)画面(横幅2560px)」などもあります。
また高解像度モニターは(高価ですが)「5k画面(横幅5120px)、6k画面(横幅6016px)、8k画面(横幅7680px)」も販売されています(そのうち量産効果で安くなるか?)。
逆に低解像度モニターは1K画面(横幅1024px)や(2020年9月現在、価格.com調べ)800px画面(横幅800px)も有るようです。


【重要】実際に欠陥Webページを確認したいなら、下記「ダメダメ・デモ」をChromeモバイル・エミュレーターで約「1000px~3000px」解像度でチェックしてみると良いでしょう(「ダメダメ・デモ」はモバイルに対応して無いので約「1000px~3000px」の範囲でおk)。
プロなら6k解像度ぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう。
なお、自分で作ったページなども、実際にChromeモバイル・エミュレーターでチェックしてみると良いでしょう。

【ダメダメ・デモ】
http://xd305417.html.xdomain.jp/demo/test/005.htm

下記リンクの画像は、自分のPC画面の実際の解像度が約1k解像度の場合で、【ダメダメ・デモ】をChromeモバイル・エミュレーターでチェックした場合です。
上の画像が約1k解像度、下の画像が約3k解像度でChromeモバイル・エミュレーターでチェックした場合で、約3k解像度でチェックした場合に表示が非常に小さくなっている事が確認できます。
下の画像のページが表示されたら、このWebページ作ったヤツはアホだろと思ってブラウザ・バックしますよね?(そもそもベンダーは、そんな欠陥Webページなど許しませんが)

https://drive.google.com/file/d/1znyw4kX9m4I4enroA931c7tyZ1wq8A91/view?usp=sharing


(Chromeモバイル・エミュレーターでチェックする場合は)かえって1k解像度モニターのほうが分かりやすいでしょう。
現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px~1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。
【重要】ただし「Chrome」の「最小フォント・サイズ」設定は、「HTML、CSS」の設定を無視して強制的にフォント・サイズを変更してしまうので、本当にユーザー・フレンドリーか どうかをチェックしたいなら、「最小フォント・サイズ」設定は最小にしておかなければなりません。
例えば単位に「vw」などを使っている場合に、モバイル・エミュレーターで解像度を小さくしてもフォントの表示サイズが小さくならない時は「最小フォント・サイズ」設定が最小に設定されてないと思われるので ご注意ください(つまり「最小フォント・サイズ」設定が最小に設定されてないと、正しい表示をチェックできない)。
※Chromeモバイル・エミュレーターの操作法だけ分かれば良いので、それ以外は流し読みで良いです。
操作法だけなら、良く読めば難しいことは無いでしょう。

Chromeモバイル・エミュレーターの操作法
http:../utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51&

モバイル・エミュレーターは、当然 モバイル(スマホ、タブレット)用のエミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにし、代わりに下記のviewportを設定て下さい。
そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。

<meta name="viewport" content="width=device-width">

解像度の変更時の注意点
モバイル・エミュレーターで解像度を変更したら、ロードして下さい、Windowsなら[F5]。
単位に「em、ex、ch、rem、lh」を使っている場合、解像度を変更してフォントなどの表示サイズが合わなくなったら、見やすいサイズにブラウザでフォント・サイズを設定して下さい。
(重要)ただし「Chrome」の「最小フォント・サイズ」設定は、「HTML、CSS」の設定を無視して強制的にフォント・サイズを変更してしまうので、本当にユーザー・フレンドリーか どうかをチェックしたいなら、「最小フォント・サイズ」設定は最小にしておかなければなりません。
例えば単位に「vw」などを使っている場合に、モバイル・エミュレーターで解像度を小さくしてもフォントの表示サイズが小さくならない時は「最小フォント・サイズ」設定が最小に設定されてないと思われるので ご注意ください(つまり「最小フォント・サイズ」設定が最小に設定されてないと、正しい表示をチェックできません)。
通常の「フォント・サイズ」設定でフォント・サイズが大きくならない場合は、フォント・サイズがフォント系単位 以外で指定されていると思われます。

【注意】100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます。
なお モバイル(スマホ、タブレット)はブラウザの仕様が違うので、スクロールバーの幅はゼロと考えて良いです。
ちなみにフロントエンド(プロ)の場合はbodyのデフォルトmarginをゼロに設定するようです。

つまり(bodyの子としての)width 100%とViewportの100vwでは微妙に違うと言うことです。
「vw、vh」はViewportが基準ですが、%は親要素を基準とします。
例えばbodyの子として50%の子要素を作って、その中に50%の孫要素を作ったら、孫要素は数学的には25%になります。
フォントの%は例外、親要素で定義されているフォントの設定が基準となります、つまりemのようなイメージ。


下記「PCフレンドリー・デモ、ユーザー・フレンドリー・デモ」のコードをChromeの開発者ツール(デベロッパー・ツール)で見れば概念レベルの理解は出来るでしょう(ただし、それで本職のプロ・レベルを理解できる訳では無いですが)。
ダウンロードすると(ブラウザ?によって)コードが改変されてしまう場合があるので、必ず開発者ツール(デベロッパー・ツール)で参照して下さい。

下記ページ内に書かれている文章にも意味があるのでチャント読んで下さい。
下記デモ・ページでは(メディアクエリは除き)全ての単位にvwが使われていることに注意して下さい(プロを目指さないなら どんな単位を使ってもおk)。
(メディアクエリは除き)フロントエンド(プロ)では単位には基本的にvwを使います(例外的にvhも使いますが)。
ただし、恐らく「border-radius、translate」などは「%」を使って良いと思われます。

下記はモバイルに対応して無いので、とりあえずChromeモバイル・エミュレーターで約「1000px~3000px」解像度ぐらいをチェックしてみると良いでしょう。

【PCフレンドリー・デモ】
http://xd305417.html.xdomain.jp/demo/test/003.htm

下記は(超単純なレスポンシブ・デザインのデモです)レスポンシブ・デザインの場合は、とりあえずChromeモバイル・エミュレーターで一般的には約「300px~3000px」解像度ぐらいをチェックしてみると良いでしょう(プロなら6k解像度ぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう)。

【ユーザー・フレンドリー・デモ】 (「PCフレンドリー、モバイル・フレンドリー」を考慮しています)
http://xd305417.html.xdomain.jp/demo/test/008.htm

その「PCフレンドリー・デモ」のコードと「ユーザー・フレンドリー・デモ」を比較してみると良いでしょう。
なお、自分で作ったページなども、実際にChromeモバイル・エミュレーターでチェックしてみると良いでしょう。

参考

【ユーザー・フレンドリー・デモ】 (ブレイク・ポイントで画像のレイアウト構成が変化する)
http://xd305417.html.xdomain.jp/responsive/001


もしも フロントエンド(プロ)を目指すなら、とりあえず この記事や下記「Webページにおける基本的な留意点」も参考に「特定の解像度に依存しない実用的なWebページ」を実際に作ってみると良いでしょう。
フロントエンド(プロ)を目指すなら、この記事や下記「Webページにおける基本的な留意点」も理解でき具現化できてプロの基礎レベルです、本職のプロになるには更に上のレベルが要求されます。

プロなら6k解像度ぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう、「レスポンシブ・デザイン対応、クロスブラウザ対応」も必須です。
なので、その「特定の解像度に依存しない実用的なWebページ」も、約「280px~6000px」解像度ぐらいには対応させ、「レスポンシブ・デザイン、クロスブラウザ」にも対応させて、ポートフォリオの練習として作成してみると良いでしょう。

Webページにおける基本的な留意点
http:../utf8/smt.cgi?r+sara/&bid+00000231&tsn+00000231&bts+2019/08/12%2011%3A02%3A18&

実用的なWebページ:リキッド・レイアウトWebページ作成の注意点(1)
http:../utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19&
実用的なWebページ:リキッド・レイアウトWebページ作成の注意点(2)
http:../utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000051&bts+2021/03/21%2013%3A55%3A19&

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

Webデザイナーは「Photoshop、Illustrator」などで(pxで)デザインカンプ(データ)を作ります(それがWebデザインです)。
つまりWebデザイナーは「Photoshop、Illustrator」のどちらかが必要と言うことです(業界標準です)。
コーダーはそのデザインカンプ(データ)を元に、(pxをvwに換算して)コーディングします(なので基本的にWebデザイナーはコーディングしませんし、コーダーはWebデザインはしません)。
稀に「Webデザイナー+コーダー」の兼業者も居ますが、Webデザイナーとコーダーは完全に別業種です。
なおコーダーはそのデザインカンプ(データ)を見るために、一般的に「Photoshop、Illustrator」をマニュアルを見ずにバリバリ使えるようにしておけと言われているようです(マニュアルを見ながらチマチマやってたら納期がキツくなるので)、つまりコーダーは「Photoshop、Illustrator」が必須と言うことですが、プロなら「XD」も揃えとけと言われています(XDは「Photoshop、Illustrator」で何か問題が発生した場合の保険と言う意味合いが強いようです)。
稀に「XD、Figma」の案件も有るようですが、これからはFigma案件は増えていくかもしれません。

なお(コーディングの練習に「Photoshop、Illustrator」が必須だと勘違いしている人が稀に居ますが)コーディングの練習には「Photoshop、Illustrator」が必須な訳ではありません。
モチロン最終的にはコーダーも「Photoshop、Illustrator」をバリバリ使えるように練習が必要ですが、それは本当の最終段階に成ってから「Photoshop、Illustrator」をバリバリ練習すれば良いでしょう(先に買ってしまって、途中で挫折したら、お金の無駄なので)。

(デザインカンプはpxで作成されていますので)フロントエンド(プロ)を目指すなら、当然px→vwの換算が必須になります、px→vwの換算は四則演算(+、-、×、÷)とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
分かりやすく言うと消費税の「税抜き価格→税込み価格」、「税込み価格→税抜き価格」の計算ができれば良いだけなので、中学レベルの学力で全然おkです(二次方程式の解法なんぞと比べれば全然 簡単です)。
※フロントエンド(プロ)を目指さないならpx→vwの換算は全く必要ありません。
※ただし、「@media:メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。

「vw、vh(又はdvh)」の対象となる領域を「Viewport」と言い、その「Viewport」の全体は「100vw、100dvh(又は100vh)」と成りますが、それは「実際の表示領域+スクロールバー」になると言うことに注意が必要です。
※なお モバイル(スマホ、タブレット)はブラウザの仕様が違うので、スクロールバーの幅はゼロと考えて良いです。
なお フロントエンド(プロ)では(メディアクエリは除き)単位には基本的にvwを使います、「(半透明の要素とかで)Viewportの全面を覆う場合」などは「vh(又はdvh)」などを使います。
なお恐らく「border-radius、translate」などは「%」を使って良いと思われます。
ただしdvhは「古いスマホ、Internet Explorer」では使えないので、クロスブラウザに対応する場合は、vhで記述するしかないですが。
なおSafariブラウザと他のブラウザでvhの解釈が微妙に違っているらしく、対応方法としてはSafariブラウザでは「-webkit-fill-available」は「100dvh」と等価になるようなので、それを使って工夫して下さい、ただしネストされた要素では使えないなどの制限が有ります(検索する場合は「CSS fill-available」などでググって下さい)。
プロを目指す場合と目指さない場合で当然 勉強法が変わってきます、プロを目指さないなら「%、rem、その他Viewport系単位」なども自由に使っても良いです。
ただしモバイル(スマホ、タブレット)でソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、Viewport領域が縮小されレイアウトが崩れる場合があるので注意が必用です。
Viewport領域が縮小されもレイアウトが崩れないなら(プロを目指さないなら)単位に「dvh(dvmin、dvmaxなども)、vh(vmin、vmaxなども)、その他Viewport系単位」を自由に使っても良いです。

例えば100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されていません。
つまり(bodyタグのデフォルトmarginが有って、スクロールバーが表示されている場合)要素の横幅の合計が100vwになると実際の表示領域(スクロールバーを含まないBody要素(厳密に言うとHTML要素)のClient領域)からハミ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)、ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう、又はJavaScriptで算出するかですがプロを目指す場合は、こんなことぐらいでJavaScriptは使わないで下さい(こんなことぐらいでJavaScriptを使ってるようでは、基本が出来て無いスキルの低い人だと評価されます)。
逆に言うと、「bodyタグのデフォルトmarginをゼロに設定し、スクロールバーも表示されて無い場合」なら100vwは実際の表示領域の横幅からハミ出ません。

つまり(bodyの子としての)width 100%とViewportの100vwでは微妙に違うと言うことです。
「vw、vh」はViewportが基準ですが、%は親要素を基準とします。
例えばbodyの子として50%の子要素を作って、その中に50%の孫要素を作ったら、孫要素は数学的には25%になります。
フォントの%は例外で、親要素で定義されているフォントの設定が基準となります、つまりemのようなイメージ。

ただしプロの作品を見てみると、稀に右端の(ハンバーガー・メニューなどの)UI(User Interface)の上にスクロールバーが思いっきり被っていたりする場合も有るので、スクロールバーのことは考慮し無くても良い場合も有るのかもしれません。
とは言え現在は右端にピッタリ合わせる場合は、スクロールバーが被らないように配置するのが主流のようですが。
(スクロールバーを考慮しない場合に)右端の「UI(User Interface)、文字」などの上にスクロールバーが被ってしまうような場合は、とりあえずベンダーに それで良いのか確認してみると良いでしょう。


Yahoo!の"知恵袋"でも(高額?)情報商材で勉強している風の人が、大抵の人は(理解できて無いので)pxからvwへの換算をスルーしてしまっているようで、「pxからvwへの換算がWebページ作成の肝なので、その教本のpxからvwへの換算をスルーしてはダメですよ」と言うと、殆ど音信不通になってしまいます(全く理解できないので音信不通になっていると思われる)。
必要だから書いて有るのに、なんでスルーしてしまっているか意味不明なんですけどね。


(既存のWebページを模写せずに)オリジナルのWebページを作成したい場合は、基本のキとしてブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おkです。

下記はワイヤー・フレームの一例です(それはレスポンシブ・デザインのイメージでも有ります)。
※プロなら4パターン、5パターンのレイアウト構成も普通に有るようです。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。
フロントエンド(プロ)を目指す場合は、(ワイヤー・フレーム、又はモックアップの)個々の要素などのサイズはpxで作って下さい(そのpxを自分でvwに換算しないとフロントエンド(プロ)のための勉強にならないので)。

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

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

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

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


参考:フロントエンド(プロ)"入門"用の課題を作ってみたので、興味があるなら挑戦してみると良いでしょう。

HTML5の基礎と課題
http:../utf8/smt.cgi?r+twilight/&bid+0000044D&tsn+0000044D&bts+2023/09/30%2012%3A21%3A15&


なお特定の解像度に依存しないページを作成する場合は、イメージ・パーフェクト(仮)かリキッド・レイアウトのどちらかを具現化する必要が有ります。
プロを目指す場合は当然イメージ・パーフェクト(仮)の一択になります。
ちなみにリキッド・レイアウトのほうが難易度は高いです。

フロントエンド(プロ)に求められるスキルを超ザックリと言うと
特定の解像度に依存しないWebページ(pxからvwに換算して作成できる)。
※プロの作品を見てみると、稀に右端のUI(User Interface)の上にスクロールバーが思いっきり被っていたりする場合も有るので、スクロールバーのことは考慮せずに100vwで計算しても良いのかもしれません。
レスポンシブ・デザイン対応。
クロスブラウザ対応(最近はInternet Explorer未対応おkの案件も有るらしいので、そう言う案件だけに限定するならInternet Explorerバグ対応は不要)。
高度なCSSをバリバリ書ける。
端末にサポートされてないフォントの対応(ネットでググって下さい)。
つまりそれらが出来ないようではフロントエンド(プロ)は無理と思って下さい。
それは あくまでもフロントエンド(プロ)を目指す場合であって、フロントエンド(プロ)を目指さないなら そこまでガッツリやらなくても良いです。
バックエンド(プロ)を目指す場合も、フロントエンドは そこまでガッツリやらなくて良いです。

なおフロントエンド(プロ)ではBootstrapなんぞ使わないので、フロントエンド(プロ)を目指すなら「CSS Flexbox、CSS Grid」を勉強すると良いでしょう。
例えばポートフォリオにBootstrapなんぞ使ってたら、ベンダーに素人だと思われて評価は非常に下がるでしょう。

クロス・ブラウザに対応する場合は、当然CSSのベンダー・プレフィックスが必要になる場合があります。
ES6コードで記述している場合にクロス・ブラウザさせるには、BabelなどでES5コードでコンパイル(トランスパイル)しなければなりません。
下記「クロス・ブラウザ対応法」を参照して下さ。

備忘録【入門】:VisualStudio Code/フロントエンド開発環境の構築
http:../utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59&

フロントエンド(プロ)を目指すなら、下記のコードを見ずに、CSSで その挙動を再現できるレベルを推奨します。
なおCSSで出来るよるなことをJavaScriptで書いたらベンダーに基本が出来て無いスキルの低い人だと評価されます。
(ベンダーは基本的にJavaScriptよりもCSSを重視するので)「HTML、CSS」のみの案件で、無暗にJavaScriptを使うと、恐らくベンダーにダメ出しされて、CSSで書き直すように言われるでしょう(ただしPolyfillは使って良いです)。

高度なCSSの勉強法としては、下記のような既存のCSSを気の済むまでバリバリ改造してみると良いでしょう(プロの仕事で既存のCSSコードをコピペすると著作権法・違反になる可能性があるので ご注意ください)。
なお 高度なCSSの独学には根性が必要です(当方は全く根性が無いので習得に長期間かかってまってますが)、もしメンターを雇う場合には高度なCSSの知識があるのか確認したほうが良いでしょう(メンターを雇うのも有りですが、それでも理解できないようなら諦めるしか無いでしょうけど)。

CSSデモ集(-)
http:../utf8/smt.cgi?r+twilight/&bid+0000025C&tsn+0000025C.&

もしフロントエンド(プロ)を目指すなら、(案件で改造して使えるように)当方のCSSデモ集よりも遥かに大量のストックを作っておくのが常識です。
フロントエンド(プロ)では、簡単に改造して使えるようにSassで記述する人も居ます、単にSassで記述すれば良いと言う事では無く、如何に改造しやすく記述するかが腕の見せ所になります(Sassで記述しても改造しやすくならなかったら、無駄なだけですので)。


下記は、あくまでもアマチュアの「おすすめのfont-family設定例」なので、プロがそれで良いと言う事では有りません。

https://willcloud.jp/knowhow/font-family/

>ゴシック体の設定例
>font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;

>明朝体の設定例
>font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

クライアントさんがフォントに強い拘りが有る場合は、画像で対応する場合も有るようです。
なお画像が大量にある場合はSEO的にマイナスになるので、遅延ロード(lazy)も考慮してみると良いでしょう、下記が一般的なSEO対策です。

SEO(Search Engine Optimization:検索エンジン最適化)
http:../utf8/smt.cgi?r+sara/&bid+000005C1&tsn+000005C1&bts+2022/03/04%2023%3A56%3A24&


ポートフォリオの注意点(コーダーのポートフォリオの場合)
ポートフォリオは、1つ程度では「こいつ根性ないな」と思われるので、「こいつ根性あるな」と思われるぐらいに多数(コーダーのポートフォリオの場合なら10個ぐらい)作ってみると良いでしょう。
プロなら6k解像度モニターぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう。
当然Chromeモバイル・エミュレーターでチェックが必要になるので、Chromeモバイル・エミュレーターぐらい使えないようではプロは無理と思って下さい。
"模写"する場合はオリジナルのブレイク・ポイントを使って下さい(ここに記載されているブレイク・ポイントには拘らなくて良いです)。
単位をvwで見たら換算の勉強にはならないので、必ずpxで参照し、それをvwに換算してWebページを再現して下さい(メディアクエリはpxから換算する必要は有りません)。
Chromeの検証モードの[Computed]タブで既存のWebページをpxで参照できます(下記ページ参照)。
検証モードにして、チェックしたい要素をクリックして、デベロッパーツールの右側のパネルの[Computed]タブを選択すると、その要素の全てのプロパティーと その値をpxで参照できます。

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

通常(自分がデザインしたダサイWebページより)既存のイケてるデザインのWebページを"模写"したほうが全然心証が良いらしいです(逆に言うと自分がデザインしたダサイWebページだと心証が悪くなると言うこと)、ベンダーがオリジナルとポートフォリオを比較して、オリジナルどおりに再現できているかチェックが出来ると言うメリットも有りますしね。
"模写"ポートフォリオを作ったら、必ずオリジナルのコードと比較検討して下さい。
なおクロスブラウザ対応は必須ですし、ちゃんとレスポンシブ・デザインになっているWebページを模写して下さい。
コーポレート・サイトでは動的Webページになっている場合も有り、クライアントのモニター解像度を取得し、(サーバー側で計算して)動的に絶対単位(px)で生成している場合も有るようです、その場合はレスポンシブ・デザインになって無いと思われるので注意して下さい。
ベンダーはJavaScriptを使わないで、チャント ページが作れるか確認したいので、「HTML、CSS」(Polyfillは可)のみのポートフォリオを いくつか作ってみると良いでしょう。
JavaScriptをアピールしたいなら、それとは別にJavaScriptをバリバリ使うポートフォリオを作ると良いでしょう。
(ちなみに、実在するWebページを内部のコードは見ずに再現することを"模写"と言いますが)"模写"と言えど「ブレイク・ポイント、font-family」は見て良いです(必須)。
なお、font-familyにおいて、総称フォント名は引用符で囲わない、フォントファミリー名は引用符で囲うと言う規則があるようです、そうしないと設定が効かない場合があるようです。
ちなみに、実在するWebページを内部のコードを見てWebページを再現するのは"写経"と言います。

参考(とりあえずJavaScriptを使ってないページを探して下さい。)

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
https://responsive-jp.com/

レスポンシブ | SANKOU! | Webデザインギャラリー・参考サイト集
https://sankoudesign.com/category/responsive

トップページは必ず「index.html」にして下さい。
既存のページを"模写"した場合、オリジナルの「企業名(又は団体名)、URL」を記載するのがエチケットだそうです。
なお、既存のページを「模写、写経」して公開した場合や、フリーでない画像を使って公開した場合も、著作権法違反になるので注意して下さい。
フリー画像でも著作権表示が必須と言う場合もあるので、必ず使用する場合の要件を確認して下さい。
なのでポートフォリオは公開しない事を推奨します。

一般的にはzipで圧縮してメールに添付して送れば良いです、サイズがクソデカイとメールでは送れないので、その場合はUSBメモリーにすると良いでしょう、USBメモリーなら圧縮しなくても良いです。
送る前に試しに自分のPCの任意のフォルダーに解凍して、ローカルで全てのページが正常に表示できるか確認してみると良いでしょう、絶対アドレスを使ってると正常に表示できませんので。


ちなみにWeb系はフリーランスが基本で、奇跡でも起こらない限り就職は無理と思って下さい。

スクールは生徒のことなど、カモネギぐらいにしか思って無いので推奨しません。
本気で勉強したいなら「職業訓練校、大学」のWeb系がオススメです(職業訓練校は厚生労働省の管轄、大学は文部科学省の管轄なので、いい加減なことをしたら処分されてしまうでしょうから)、もしガッツリやりたい場合は「大学」のWeb系がオススメです。
WebデザイナーならWebデザイン系、コーダーならWebクリエイター系になると思います。

勉強のために「訓練校、大学」などに行っても良いですが、「訓練校、大学」などに行く前に授業に付いていけるレべルまで独学が必要です(教科書を全て消化できないと先生の評価は下がるので、生徒が理解できるかよりも教科書を全て消化することが優先されますから、授業に付いて行けない人は普通に居ますのでね)。

恐らく『「特定の解像度に依存しない実用的なWebページ」詳解』レベルの記事を無料で公開している所は他に無いと思います(笑)。
つまりそこに書いて有ることが理解できれば、無料でフロントエンド(プロ)の"基礎"レベルが勉強できると言うことです(本職のフロントエンド(プロ)になるには更に上のレベルが要求されますが)。
せっかく無料でフロントエンド(プロ)の"基礎"レベルが勉強できるのですから、これで勉強したら良いと思うのですが、それでもほぼ誰も勉強しないですね。
もちろん『「特定の解像度に依存しない実用的なWebページ」詳解』を勉強するも勉強しないも本人次第ですが。

当然(有償のコンテンツ)「職業訓練校、大学」などの方がもっと詳しく解説してくれているでしょうが、(有償のコンテンツ)「職業訓練校、大学」などで勉強しても理解できない人は当然います。
とりあえず、その『「特定の解像度に依存しない実用的なWebページ」詳解』で勉強してみて理解できない場合は(有償のコンテンツ)「職業訓練校、大学」などで勉強しても厳しい気はしますが、理解できる可能性もゼロでは無いので(ダメ元で)トライしてみるのも良いかもしれません。


<Number>: [000003BC]  <Date>: 2024/01/09 21:27:31
<Title>: pxからvwへの換算のトライ
<Name>: amanojaku@管理人

いきなり難しいことから始めずに、初めは簡単なレイアウトからトライしてみると良いでしょう。

もしも実際にpxからvwへの換算をトライしてみたい場合は、(レスポンシブ・デザインは置いといて)とりあえず下記でpxからvwへの換算をトライしてみると良いでしょう。
下記は1k解像度用に作ったページなので、とりあえずアートボードの幅は(左端から)1024pxと仮定して下さい。
なおフロントエンド(プロ)を目指さない場合は、こんな事はしなくても良いです。

【ダメダメ・デモ】
http://xd305417.html.xdomain.jp/demo/test/005.htm

下記の2つの画像は恐らく中学生の課題だと思われますが、それもトライしてみると良いでしょう。

下記の注意点としては、その程度のレイアウトでpositionを使ってるようでは、いくらなんでもスキルが低すぎますので、positionは使わないようにして下さい。
フレックスボックスと、CSS Gridの2パターンを作成してみて下さい。
なおアートボードの幅は(左端から)465pxと仮定してpxをvwに換算して下さい。

https://drive.google.com/file/d/1fUHVK3iy2w3Vtmo2CiMGkSTANFXJTst5/view?usp=sharing

下記の注意点としては、positionもバリバリ使って良いです。
濃い緑の枠はtableにすると良いでしょう。
黄色で囲われいる部分は中央配置です。
赤で囲われいる部分はギャップは明記されてませんが等間隔と考えて下さい。
等間隔ならフレックスボックスを使いますが、フレックスボックスは幅は100%に広げずに、赤で囲っているように内部の要素にピッタリ合わせるようにして下さい。
なおアートボードの幅は(左端から)1030pxと仮定してpxをvwに換算して下さい。

https://drive.google.com/file/d/17nqdLovxu8k5wJZumYsE6TgVIrW7tk9z/view?usp=sharing


<Number>: [00000430]  <Date>: 2024/01/09 21:21:36
<Title>: 超単純なレスポンシブ・デザインと「CSS Grid」の基本とorderの学習
<Name>: amanojaku@管理人

このサンプルでは超単純なレスポンシブ・デザインと「CSS Grid」の基本とorderで表示の順番の変更などの学習を目標とする。
それが簡単すぎたなら「Flexbox」でも作成してみると良いでしょう。

左側の図がPC用レイアウトで1セルの縦横サイズは155vwとする。
右側の図がスマホ用レイアウトで1セルの縦横サイズは385vwとする。
背景が白い部分は無視する。
要素の左上の番号はHTMLコードとして記述されている要素の順番を表している。
要素の中央の#が付いた番号はカラーを表している。
メディアクエリのブレイク・ポイントは、576px以上の解像度はPC用ページ、576px未満(575px以下)の解像度はモバイル用ページとする。

PCモニターの場合、現在4k画面(横幅3840px)が普及価格帯で販売されており、また高解像度モニターは(高価ですが)「5k画面(横幅5120px)、6k画面(横幅6016px)、8k画面(横幅7680px)」も販売されています(そのうち量産効果で安くなるか?)。
とりあえずChromeモバイル・エミュレーターで一般的には約「300px~3000px」解像度ぐらいをチェックしてみると良いでしょう(プロなら6k解像度ぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう)。

https://drive.google.com/file/d/1o6OM_DZO0T7klGU4I_aYrozGNEvGk0yP/view?usp=sharing


CSSグリッドは書いて字のごとくグリッドがレイアウトの根本なので、セルの結合により様々なレイアウトを形成します。
下記もセルの結合によりレイアウトを形成していると言うことに注目して下さい。

参考

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

ネットで紹介されているCSSグリッドの記法は難易度が高いですが、実際は下記のように簡単な記法もあるので、その簡単な記法で記述することを推奨します。
その簡単な記法で記述したほうが楽ですし、ネットで紹介されている難しい記法で書いでも何のメリットも無いですので。
なおCSSグリッドのrepeat()関数などの難易度も高いですが、repeat()関数などは必須なので手抜きせずにガッツリ勉強して下さい。

下記の見えてるレイアウトと実際のグリッド(セル)を比較してみると分かり安いでしょう。
とりあえずCSSの動的な処理はスルーして良いです。

CSSデモ/サムネイル・ビュアー001
http:../utf8/smt.cgi?r+twilight/&bid+000002E6&tsn+000002E6&bts+2022/02/21%2000%3A05%3A35&

参考

下記はFlexboxによる超単純なレスポンシブ・デザインで、とりあえずChromeモバイル・エミュレーターで一般的には約「300px~3000px」解像度ぐらいをチェックしてみると良いでしょう(プロなら6k解像度ぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう)。

下記ページ内に書かれている文章にも意味があるのでチャント読んで下さい。
その「PCフレンドリー・デモ、ユーザー・フレンドリー・デモ」のコードをChromeの開発者ツール(デベロッパー・ツール)で見れば概念レベルの理解は出来るでしょう(ただし、それで本職のプロ・レベルを理解できる訳では無いですが)。
ダウンロードすると(ブラウザ?によって)コードが改変されてしまう場合があるようなので、ページ内のコードは必ず開発者ツール(デベロッパー・ツール)で参照して下さい。
全ての単位にvwが使われていることに注意して下さい(プロを目指さないならvw以外の単位を使ってもおk)。
本職のプロ・レベルは更に難易度が上がります(別次元と言ったら言いすぎかもしれませんが)。

【ユーザー・フレンドリー・デモ】 (「PCフレンドリー、モバイル・フレンドリー」を考慮しています)
http://xd305417.html.xdomain.jp/demo/test/008.htm

【ユーザー・フレンドリー・デモ】 (ブレイク・ポイントで画像のレイアウト構成が変化する)
http://xd305417.html.xdomain.jp/responsive/001


下記はFlexboxの解説ですが、100%完璧に暗記する必要は有りません。
図だけなら暗記しやすいので(当然、一読ぐらいはして)掲載されている図を暗記して、おおよそのイメージを掴んでおき、必要になったら詳細はググれば良いです(勘違いしていた場合は別の手法を模索して下さい)。
(「伸びる比率、縮む比率」など)概念が難解すぎる場合はスルーしても良いです。

日本語対応!CSS Flexboxのチートシートを作ったので配布します
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet


<Number>: [00000444]  <Date>: 2024/01/09 21:32:47
<Title>: pxからvwへの換算とレスポンシブ・デザインのトライ
<Name>: amanojaku@管理人

下記で「pxからvwへの換算」、「レスポンシブ・デザイン」をトライしてみると良いでしょう。
ページのコードは見ずに、ページを再現して下さい(それは"模写"と言う)。
"模写"でも「要素、フォント」のサイズ、フォントの定義は見て良いです(必須)。
メディアクエリのブレイク・ポイントは、576px以上の解像度はPC用ページ、576px未満(575px以下)の解像度はモバイル用ページとする。

この程度のレイアウトでも正解は無いと思って下さい、なので自分の好きなようにコーディングするしか無いです。
見えない要素を考察する、どれをどうグループ化するかを考察する。
クラス名は分かりやすい名前を付ける(共通な設定は分離した方が良かったですね)。
position:absoluteを使う、「position: static(デフォルト)」、
「position: relative」、「position:absolute」の違いを理解する。
要素の重なりの順番を変更したい場合はz-indexを使う(「position: static(デフォルト)」だと効かない)。

下記のPC用ページは、とりあえずアートボードの幅は(左端から)1024pxと仮定して下さい。

PC用ページ
http://xd305417.html.xdomain.jp/demo/Example/Page051.htm

下記のモバイル用ページは、とりあえずアートボードの幅は(左端から)575pxと仮定して下さい。

モバイル用ページ
http://xd305417.html.xdomain.jp/demo/Example/Page052.htm

Block( Address 0000048E Identity 0000031C )






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

   
   

管理者用 Password:

  




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