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

"Twilight"

Index Menu
(1)<FirstTitle>:Internet Explorer 11バグ集 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:「特定の解像度に依存しない実用的なWebページ」詳解 <FirstUser>:amanojaku@管理人

   
   

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







<Number>: [0000035A]  <Date>: 2022/08/16 15:45:45
<Title>: Internet Explorer 11バグ集
<Name>: amanojaku@管理人



ブラウザやOSごとにCSSを適応させるCSSハックいろいろ
https://blanche-toile.com/web/css-hack

IE11の定番バグとその対応方法
https://kiomiru.co.jp/blog/coding/ie11-bugs/

コニファ:IE11のflexboxに関するバグと対処(1)
https://www.conifer.jp/ie_check793.html

俺を苦しめたIEバグまとめ
https://yashirospace.com/tech_memo/1378/#index_id8

最近あったIEのバグをまとめてみた!
https://blog.maromaro.co.jp/archives/9485

SelectのIE表示バグ解消
https://github.com/qrac/musubii/issues/151

IE11で:hoverの挙動がおかしい件 (色が戻らない)
https://qiita.com/nekijak/items/d0610aa3a693f15566be

なおInternet Explorer 11においてCSS Gridで-ms-grid-rows(grid-template-rows)は必須(省略できない)そうです。

Block( Address 0000035E Identity 0000035A )


<Number>: [0000031C]  <Date>: 2022/08/15 17:29:36
<Title>: 「特定の解像度に依存しない実用的なWebページ」詳解
<Name>: amanojaku@管理人



(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
もしも フロントエンド(プロ)を目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。

pxなどの絶対単位を使っていると、なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、下記「ダメダメ・デモ」をChromeモバイル・エミュレーターで約「1000px~3000px」解像度でチェックしてみれば一目瞭然です(表示の大きさが変わる)。
モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい。
自分が作ったページも「1k~3k」解像度でチェックしてみると良いでしょう。

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

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

その PCフレンドリー・デモのコードは超単純なのでデベロッパー・ツール(開発者ツール)で参照してみると良いでしょう。
ダウンロードすると(ブラウザ?によって)コードが改変されてしまう場合があるので、必ずデベロッパー・ツール(開発者ツール)で参照して下さい。

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

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

Chromeモバイル・エミュレーターでチェックする場合、モニターは かえって1k解像度のほうが分かりやすいでしょう。
現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px~1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。

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

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

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

実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19&

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

ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
ただし、「@media:メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。

100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう、又はJavaScriptで算出するかですがプロを目指す場合は、こんなことぐらいでJavaScriptは使わないで下さい(こんなことぐらいでJavaScriptを使ってるようでは、基本が出来て無いスキルの低い人だと評価されます)。
なお モバイル(スマホ、タブレット)はブラウザの仕様が違うので、スクロールバーの幅はゼロと考えて良いです。

スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ・スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。

(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングせずに、WYSIWYGエディタでモックアップを作ると良いでしょう(ただし基礎ができて無い場合は、(せっかくコーディングの練習ができるのですから)モックアップの作成にはWYSIWYGエディタは使わないで下さい)、そのモックアップのpxをvwに換算してWebページを作成して下さい。
また今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。
既存のページならChromeの検証モードでpxサイズを確認できます。

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

検証モードにして、チェックしたい要素をクリックして、デベロッパーツールの右側のパネルの[Computed]タブを選択すると、その要素の全てのプロパティーと その値をpxで参照できます。

いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
なお (メディアクエリは除き)プロは基本的にvw以外の単位は使いませんが、(半透明の要素とかで)viewportの全面を覆う場合には縦サイズの単位に例外的にvhを使います。
プロを目指さないなら「%、rem、vh、vmin、vmax」などを使って良いです。
プロを目指す場合と、目指さない場合で、当然 勉強法が変わってきます。

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

下記はワイヤー・フレームの一例です。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。
なお プロを目指す場合は、ワイヤー・フレームはpxで作って下さい(そのpxを自分でvwに換算しないとプロのための勉強にならないので)。
なおモックアップを作る場合は、ワイヤー・フレームは個々のpx値まで考えなくても良いです。

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パターンの場合

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

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

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

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

クロスブラウザ対応法は下記に記載してあります。

Visual Studio Codeでフロントエンド開発環境を構築する
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59


コロナの影響でWebページ作成の案件数が減少し、コーダーなどが余っている状況で、(出来ない可能性の有る)未経験者に案件を出す必然性は全く無いので、この状況で「未経験者OK」と言う案件が有ったら違約金狙いのサギの可能性があります。
(違約金 狙いのサギで無くても)仕様に準拠してない、納期に間に合わないなどで、違約金のようなモノが請求される可能性はありますが。

Block( Address 0000035C Identity 0000031C )


<Number>: [00000210]  <Date>: 2022/08/01 19:59:11
<Title>: 「HTML5、CSS3」仕様
<Name>: amanojaku@管理人



Doctypeスイッチ
http://webnote.motq.net/html/sum/doctype-switch.htm

HTML5の要素による構成例
https://web-svr.com/HTML5%E7%B7%A8/21.php
※↑これは あくまでも基本の例であって、絶対ではありません。

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

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

HTML5【 省略タグ 】~省略可能なタグ
https://programmercollege.jp/column/1993/

HTMLで省略可能なタグの「仕様」
https://www.pandanoir.info/entry/2018/02/09/190000

HTMLでhtmlタグやheadタグを省略してもいい場合がある、必須ではないHTMLのタグ・属性値のまとめ
https://coliss.com/articles/build-websites/operation/work/option-html-tags-and-quotes.html

HTML5で追加/変更/廃止(削除)された要素
https://johobase.com/html5-add-change-remove-elements/

HTML Living Standardとは?廃止されたHTML5との違いなど徹底解説!|SEOラボ
https://seolaboratory.jp/49735/#:~:text=HTML%20Living%20Standard%E3%81%A8HTML5%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%E3%80%81%20%E3%81%BB%E3%81%BC%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93,%E6%89%B1%E3%81%84%E3%81%AF%E5%A4%89%E3%82%8F%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82

HTML5 Event Attributes(イベント属性)
http://memopad.bitter.jp/w3c/html5/html5_ref_eventattributes.html

HTML5・HTML4.01 タグ一覧
https://uguisu.skr.jp/html/html5_list.html

HTML5 における HTML4 からの変更点
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
新しい要素
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements
新しい属性
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-attributes
変更された要素
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changed-elements
変更された属性
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changed-attributes
不在の要素
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-elements
不在の属性
https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-attributes


CSSセレクタ(選択子)一覧。
https://www.marguerite.jp/Nihongo/WWW/RefCSS/Selectors/index.html

CSS2とCSS3の違い
https://ja.eyewated.com/css2%E3%81%A8css3%E3%81%AE%E9%81%95%E3%81%84/

CSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。
https://wemo.tech/807

CSS3とは? 機能が増えて便利になったスタイルシート
https://allabout.co.jp/gm/gc/376450/
https://allabout.co.jp/gm/gc/376450/2/

>CSS3は、まったく新しい言語というわけではなく、従来のCSSと互換性があります。これまでのCSSに、新しく便利な仕様を加えた規格がCSS3です。基本的な文法(記述方法)に変化はほぼありませんから、従来のCSSで使えた記述方法はそのままCSS3としても使えると考えて問題ありません。

>従来の記述と混在が可能 (=書き直す必要がない)
>1つのCSSソースの中で新旧のCSSが混在していても問題ありません。例えば「CSS3の記述」と「CSS2.1の記述」を一緒に書いても大丈夫です。従来の記述もそのまま通用しますから、CSS3で新しく追加されたプロパティを使いたい場合でも、既存のソースを書き直す必要はありません。今あるCSSソースの中に、CSS3の記述を加えるだけで使えます。


<Number>: [00000230]  <Date>: 2021/11/06 17:28:53
<Title>: CSS「擬似クラス、擬似要素」
<Name>: amanojaku@管理人



擬似クラス・擬似要素。
https://www.marguerite.jp/Nihongo/WWW/RefCSS/Selectors/Pseudo/index.html

CSS1 / CSS 1.0 Pseudo-classes / 擬似クラス
https://www.webzoit.net/hp/it/internet/homepage/css/version/css1/pseudo_classes/
CSS2(CSS 2.0 / CSS 2.1) Pseudo-classes / 擬似クラス
https://www.webzoit.net/hp/it/internet/homepage/css/version/css2/css21/pseudo_classes/
CSS3 Pseudo-classes / 擬似クラス
https://www.webzoit.net/hp/it/internet/homepage/css/version/css3/pseudo_classes/

CSS1 / CSS 1.0 Pseudo-elements / 擬似要素
https://www.webzoit.net/hp/it/internet/homepage/css/version/css1/pseudo_elements/
CSS2 (CSS 2.0 / CSS 2.1) Pseudo-elements / 擬似要素
https://www.webzoit.net/hp/it/internet/homepage/css/version/css2/css21/pseudo_elements/
CSS3 Pseudo-elements / 擬似要素
https://www.webzoit.net/hp/it/internet/homepage/css/version/css3/pseudo_elements/

擬似クラス
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

擬似要素 (Pseudo-elements)
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

Block( Address 0000034F Identity 00000210 )


<Number>: [00000041]  <Date>: 2022/03/19 02:25:45
<Title>: Windows 10 PCの推奨スペック
<Name>: amanojaku@管理人



Windows 10ならProを強く推奨

メモリーは16GByteを強く推奨
※学習用なら それで良いですが、メモリーをガバガバ喰うアプリはキツイと思われます。

ストレージ(又はHDD)は(最低でも)256GByteを推奨
※学習用なら それで良いですが、「動画のダウンロード、バックアップ」は考慮していません。
「動画のダウンロード、バックアップ」をしたいなら、「1TByte~2TByte」のHDDを別途購入も検討してみると良いでしょう(外部HDDなら増設は簡単です)。
なお、SSD(USBメモリーなど)にも寿命(書き込みによる劣化)が有るので注意して下さい(安物は当然 書き込み可能回数が少ないです)。

注意点

(現状では)Windows 11の評判はイマイチ良くない感じです。
通常 モニター解像度は1k解像度(1024px)ぐらいしかサポートしてないので、1k解像度(1024px)を超えるモニターにしたい場合は、別途 グラフィックボードが必要になる場合があります(購入前にスペックを確認して下さい)。

Windows 10は強制アップデートで調子が悪くなる場合があるので、アップデートの延期が強く推奨されます。
Windows 10 Homeではアップデートの延期は出来ないので、Windows 10 Proを強く推奨、設定が必要です(下記参照)。

[Windows10] 大型のシステム更新を遅らせる方法
https://faq.mypage.otsuka-shokai.co.jp/app/answers/detail/a_id/288242/~/%5BWindows10%5D-%E5%A4%A7%E5%9E%8B%E3%81%AE%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%9B%B4%E6%96%B0%E3%82%92%E9%81%85%E3%82%89%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95

中華製PCはバックドアが仕込まれている可能性があるので注意して下さい、「Lenovo、ThinkPad」などが有名どころです。
蛇足ですが、中華製スマホもバックドアが仕込まれている可能性があるので注意して下さい。


<Number>: [00000258]  <Date>: 2022/07/28 21:36:58
<Title>: 4kモニターを購入する場合の注意点
<Name>: amanojaku@管理人



4kモニターを購入する場合は、当然 PC側も4kモニターに対応している必要があります。
画面は「ノングレア(非光沢)」処理を推奨。
「IPS」パネルは(TNパネルよりも)黒がクッキリ(小さい文字も読みやすい)していて、視野角が広い。
「VA」パネルは(IPSパネルよりも)更に黒がクッキリしているが、本来は視野角が狭かったが、「マルチドメイン」技術で改善している製品が殆どらしい。
また格安モニターだと高さ調整が出来ない場合があるようで、画面の高さが高いと非常に見づらく首が痛くなったりするそうです(格安モニターでも高さが低いなら問題ないかもしれませんが)。
TSUKUMOでは「ドット抜け交換保証(オプション)」を有償で付与可能なようです(料金は下記参照)。

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

ディスクトップPCならグラフィックボードで対応すると良いでしょう。
※ただし グラフィックボードのサイズによっては、PCケースのサイズがフルタワーでないと入らない場合もあるので、「グラフィックボードのサイズ、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&pdf_Spec203=2-

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

最大解像度:8K (7680x4320)、ロープロファイル対応、補助電源:なし、マルチ・ディスプレイ対応(最大接続台数はスペックを参照)
https://kakaku.com/pc/videocard/itemlist.aspx?pdf_Spec003=1&pdf_Spec113=7&pdf_Spec115=2&pdf_Spec203=2-

Block( Address 0000034E Identity 00000041 )


<Number>: [00000191]  <Date>: 2022/07/26 23:04:02
<Title>: p5.js(Processing風JavaScriptフレームワーク)デモ集
<Name>: amanojaku@管理人



p5.jsデモ:下記プログラムは(グラフィック系に特化した)p5.jsフレームワーク(Processing風JavaScriptフレームワーク)で作成されています(p5.jsは(グラフィック系に特化しているため)グラフィック系 以外にはオススメできません)。

p5.js(Processing風JavaScriptフレームワーク)デモ/snow(3)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000689&tsn+00000689&bts+2022/07/26%2023%3A01%3A40&

p5.js(Processing風JavaScriptフレームワーク)デモ/OrbitDsp(1)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000688&tsn+00000688&bts+2022/07/26%2022%3A46%3A44&

p5.js processingデモ/アナログ時計
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002E6&tsn+000002E6&bts+2020/01/09%2023%3A27%3A16&

p5.js processingデモ/splash
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002E8&tsn+000002E8&bts+2020/01/13%2012%3A51%3A56&

p5.js processingデモ/ブロック崩し
http://xd305417.html.xdomain.jp/demo/block000/

Block( Address 0000034D Identity 00000191 )


<Number>: [00000295]  <Date>: 2022/07/22 06:32:06
<Title>: Webページ作成の注意点
<Name>: amanojaku@管理人



(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
もしも プロを目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。
なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、Chromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみれば分かるでしょう。

(プロなら6k解像度ぐらいは使ってるかもしれませんが)一般的にはPCにおいては「1k~4k」解像度をチェックしておけば良いでしょう(なのでポートフォリオを作成するならPCにおいては「1k~6k」解像度ぐらいには対応すると良いでしょう、レスポンシブ・デザイン対応も必須です)。

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

ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
ただし、「@media:メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。

100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう(又はJavaScriptで算出するか)。
なお モバイル(スマホ、タブレット)はブラウザの仕様が違うので、スクロールバーの幅はゼロと考えて良いです。

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

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

実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19&

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

スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ・スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。

(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングしなくても良いので、(Webデザイナーのように)pxでモックアップを作って、それをvwに換算してWebページを作成してみると良いでしょう(WYSIWYGエディタでWebページとしてモックアップを作ると分かりやすいでしょう)。
また、今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。


既存のページならChromeの検証モードでサイズを確認できます。

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

検証モードにして、チェックしたい要素をクリックして、デベロッパーツールの右側のパネルの[Computed]タブを選択すると、その要素の全てのプロパティーと その値をpxで参照できます。


もし、フロントエンドを目指すなら、下記のコードを見ずに、CSSで その挙動を再現できるレベルを推奨します。

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

コロナの影響でWebページ作成の案件数が減少し、コーダーなどが余っている状況で、(出来ない可能性の有る)未経験者に案件を出す必然性は全く無いので、この状況で「未経験者OK」と言う案件が有ったら違約金狙いのサギの可能性があります。
(違約金 狙いのサギで無くても)仕様に準拠してない、納期に間に合わないなどで、違約金のようなモノが請求される可能性はありますが。

Block( Address 0000034B Identity 00000295 )


<Number>: [000001B1]  <Date>: 2022/07/16 13:40:11
<Title>: プログラミング言語 栄枯盛衰?
<Name>: amanojaku@管理人



JavaよりもKotlin(コトリン)言語の方が高機能なので、JavaはKotlin(コトリン)言語に駆逐され、Javaは消滅するだろうと予想している人もいますが、(世界的な趨勢は そうだとしても、ガラパゴスの日本ではKotlin(コトリン)は殆ど人気が無いので)日本で本当に そうなるかは分かりません。
(メモリーアンセーフな)「C、C++」に代わる(メモリーセーフな)Rust(ラスト)言語は将来性が非常に有ると思われ、「C、C++」を駆逐するだろうと予想されます。
Rust(ラスト)言語に「Java、Kotlin(コトリン)言語」や他の言語「C#、Python、Ruby」なども浸食されるかもしれません。
ただし、Rust(ラスト)言語は日本では まだマイナーで、何年後にメジャーになるのか予想できませんが。
Googleによると、「C、C++」によるAndroid OSのシステム開発では、重要度の高い脆弱性のうち70%が、「C、C++」のメモリーアンセーフな言語仕様が要因のメモリ関連のバグだそうです(下記)。

参考

プログラミング言語RustにGoogle、Microsoft、AWSなどが開発とメンテの拠点を提供
https://jp.techcrunch.com/2021/02/09/2021-02-08-the-rust-programming-language-finds-a-new-home-in-a-non-profit-foundation/

2021年8月第4週 Android OSの開発にRustが使われる
https://gihyo.jp/lifestyle/clip/01/awt/202108/26

>公開されたエントリでは,Android OSのシステムプログラミングに使われている,CとC++は言語仕様が要因でメモリ関連のバグが引き起こされており,これは重要度の高い脆弱性のうち70%を占めるとしています。また,この類のバグ検出や修正,軽減のために多大な労力とリソースを割いているともしています。
>
>これを解決するために,メモリセーフなプログラミング言語を使うのが最も効率の高い手段と考えて,OSを開発するためのサポート開発言語としてRustをサポートするとアナウンスしました。

天下のGoogleがボンクラ・プログラマーを雇っている訳ではではありません。
天才プログラマーで その体たらくと言うことです。

Block( Address 00000349 Identity 000001B1 )


<Number>: [00000348]  <Date>: 2022/07/07 17:23:01
<Title>: Javaデモ/JSPages「checkbox、submit」
<Name>: amanojaku@管理人



<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ page import="java.util.HashMap"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
  <%
  request.setCharacterEncoding("UTF-8");
  // ↑ここで文字エンコードを設定しないと、
  // request.getParameter()で全角文字が文字化けします。

  String[] a1sCheck_Group001 = request.getParameterValues("Check_Group001");
  String sHTML_Check_Group001 = "";
  HashMap<String, Boolean> dsCheck_Group001 = new HashMap<String, Boolean>();
  //↑「Boolean」は「boolean(プリミティブ型)」のラッパー・クラス

  String sSubmit_LIST = request.getParameter("LIST");
  String sHTML_Submit_LIST = "";

  String sSubmit_Test = request.getParameter("Submit_Test");
  String sHTML_Submit_Test = "";

  if (null != a1sCheck_Group001) {
  sHTML_Check_Group001 = "Check_Group001: ";
    for (String s : a1sCheck_Group001) {
      dsCheck_Group001.put(s, Boolean.TRUE);
      sHTML_Check_Group001 += s + " ";
    }
    sHTML_Check_Group001 += "<br>";
  }
  if (null != sSubmit_LIST) {
    sHTML_Submit_LIST = "Button: (Submit)" + sSubmit_LIST + "<br>";
  }
  if (null != sSubmit_Test) {
    sHTML_Submit_Test = "Button: " + sSubmit_Test + "<br>";
  }
  %>

  <%
  if (null != dsCheck_Group001.get("Hoge") && null != sSubmit_LIST) {
    //↑if (チェックボックス[Hoge]がチェック && (Submit)LISTボタン)
  %>

  if (チェックボックス[Hoge]がチェック && (Submit)LISTボタン)<br>

  <% } else { %>

  <form method="post" action="">
    <label> <input type="checkbox" name="Check_Group001" value="Hoge">
      Group001 Hoge
    </label>
    <label> <input type="checkbox" name="Check_Group001" value="Huga">
      Group001 Huga
    </label>
    <br>
    <input type="submit" name="LIST" value="LIST送信"><br>
    <input type="submit" name="Submit_Test" value="Test送信"><br>
  </form>
  <br>

  <% } %>

  <%=sHTML_Check_Group001%>
  <%=sHTML_Submit_LIST%>
  <%=sHTML_Submit_Test%>

</body>
</html>

Block( Address 00000348 Identity 00000348 )






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

   
   

管理者用 Password:

  




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