掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
|
|
<Number>: [00000215]
<Date>: 2022/04/16 10:45:21
<Title>:
<Name>: amanojaku@管理人
|
|
|
(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization：検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
もしも フロントエンド(プロ)を目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。
pxなどの絶対単位を使っていると、なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、下記「ダメダメ･デモ」をChromeモバイル･エミュレーターで3000px解像度でチェックしてみれば一目瞭然です(画像や文字などが非常に小さくなる)。
モバイル･エミュレーターで解像度を変更したら、必ずリロードして下さい。
ダメダメ･デモ
http://xd305417.html.xdomain.jp/demo/test/005.htm
自分が作ったページも「1k〜3k」解像度でチェックしてみると良いでしょう。
PCフレンドリー･デモ
http://xd305417.html.xdomain.jp/demo/test/003.htm
Chromeモバイル･エミュレーターの操作法
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51&
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+twilight/&bid+00000295&tsn+00000295&bts+2022/01/05%2018%3A04%3A56&
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
ただし、「@media：メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。
100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ･スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。
(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングしなくても良いので、(Webデザイナーのように)pxでモックアップを作って、それをvwに換算してWebページを作成してみると良いでしょう(WYSIWYGエディタでWebページとしてモックアップを作ると分かりやすいでしょう)。
また、今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。
いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
なお (メディアクエリは除き)プロはvw以外の単位は使いませんが、プロを目指さないなら「%、rem、vh、vmin、vmax」なども使って良いです。
プロを目指す場合と、目指さない場合で、当然 勉強法が変わってきます。
(Webページ作成の基本のキとして)ブレイク･ポイントを念頭に置き、必ずワイヤー･フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おｋです。
下記はワイヤー･フレームの一例です。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。
https://images.app.goo.gl/1yeuxuNJTDNyZE4B7
※後で自分が見て分かりやすく書いてあれば、本当に このような手書きで おｋです。
https://images.app.goo.gl/c6DPhnTj5Xrw1GcQ7
※3パターンの場合
https://images.app.goo.gl/Wu8gBmoLJiyRK8Qn6
※3パターンの場合
もし、フロントエンドを目指すなら、下記のコードを見ずに、CSSで その挙動を再現できるレベルを推奨します。
勉強法としては下記のような既存のCSSを気の済むまでバリバリ改造してみると良いでしょう。
CSSデモ集(-)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000025C&tsn+0000025C.&
クロスブラウザ対応法は下記に記載してあります。
Visual Studio Codeでフロントエンド開発環境を構築する
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59&
|
|
|
|
|
|
|
|
<Number>: [00000214]
<Date>: 2022/04/10 10:20:20
<Title>:
<Name>: amanojaku@管理人
|
|
|
もし フロントエンドをガッツリやりたいなら、とりあえず下記を参考に「特定の解像度に依存しない実用的なWebページ」を実際に作ってみると良いでしょう。
フロントエンド(プロ)を目指すなら、下記を理解でき具現化できてプロの基礎レベルです、本職のプロになるには更に上のレベルが要求されます。
ポートフォリオを作成するなら、PCにおいては「1k〜6k」解像度ぐらいには対応すると良いでしょう、レスポンシブ･デザイン対応も必須です。
なので、その「特定の解像度に依存しない実用的なWebページ」も、PCにおいては「1k〜6k」解像度と、レスポンシブ･デザインにも対応させて、ポートフォリオの練習として作成してみると良いでしょう。
Webページ作成の注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000295&tsn+00000295&bts+2022/01/05%2018%3A04%3A56&
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
ただし、「@media：メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。
100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ･スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。
(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングしなくても良いので、(Webデザイナーのように)pxでモックアップを作って、それをvwに換算してWebページを作成してみると良いでしょう(WYSIWYGエディタでWebページとしてモックアップを作ると分かりやすいでしょう)。
また、今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。
いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
なお (メディアクエリは除き)プロはvw以外の単位は使いませんが、プロを目指さないなら「%、rem、vh、vmin、vmax」なども使って良いです。
プロを目指す場合と、目指さない場合で、当然 勉強法が変わってきます。
(Webページ作成の基本のキとして)ブレイク･ポイントを念頭に置き、必ずワイヤー･フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おｋです。
下記はワイヤー･フレームの一例です。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。
https://images.app.goo.gl/1yeuxuNJTDNyZE4B7
※後で自分が見て分かりやすく書いてあれば、本当に このような手書きで おｋです。
https://images.app.goo.gl/c6DPhnTj5Xrw1GcQ7
※3パターンの場合
https://images.app.goo.gl/Wu8gBmoLJiyRK8Qn6
※3パターンの場合
もし、フロントエンドを目指すなら、下記のコードを見ずに、CSSで その挙動を再現できるレベルを推奨します。
勉強法としては下記のような既存のCSSを気の済むまでバリバリ改造してみると良いでしょう。
CSSデモ集(-)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000025C&tsn+0000025C.&
クロスブラウザ対応法は下記に記載してあります。
Visual Studio Codeでフロントエンド開発環境を構築する
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59&
|
|
|
|
|
|
|
|
<Number>: [00000213]
<Date>: 2022/04/04 02:08:12
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [00000212]
<Date>: 2022/03/25 20:16:01
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [0000020F]
<Date>: 2022/03/24 10:39:45
<Title>:
<Name>: amanojaku@管理人
|
|
|
YouTubeはGoogleに買収されたので、YouTubeの動画削除ルールはGoogleの意思が反映されていると考えて良いでしょう。
なので下記のような内容が掲載されているWebページも影響を受けるでしょう。
一番やりがちなのが著作権の侵害、その記事を消さなくても良いので、オリジナルの記事のURLを記載すればOK。
https://digitaldiy.jp/article/creator/11439/
>特に冒涜的な表現や暴力行為、アダルトコンテンツや危険なコンテンツ、差別的なコンテンツ、ドラッグやタバコ・銃器など
>ポルノや性的なコンテンツ。男性の上半身裸などもNG
↑江頭2:50は乳首をガムテで隠してOKになっているもよう。
>他者、特に子どもに対して大けがにつながる危険性のある行為
>差別や、それを扇動することを目的とした行為
>視聴者に衝撃を与えること、世間を騒がせること、暴力的、残虐的な行為
>個人や企業に対しての嫌がらせを有した行為
>スパム、誤解を招くメタデータ、詐欺 >誤解を招く説明、タグ、タイトル、及びサムネイルの作成
>脅迫 >ストーカー行為、プライバシーの侵害、他ユーザーの個人情報の漏洩など
>著作権侵害 >使用権が認められていないコンテンツの利用など
あとGoogleにとって都合の悪いコンテンツ、反ワクチンだけでなく陰謀論的だけど本当の話とか。
YouTubeが反ワクチン関連コンテンツを禁止に、該当する動画は削除すると発表
https://gigazine.net/news/20210930-youtube-vaccine-misinformation-policy/
反ワクチンでワクチンが売れなくなると困る(ファイザー、モデルナは巨額の資金を投入しているので、ガッポガッポ儲けたい)。
|
|
|
|
|
|
|
|
<Number>: [0000020C]
<Date>: 2022/03/22 01:11:35
<Title>:
<Name>: amanojaku@管理人
|
|
|
とりあえず下記を参考に「特定の解像度に依存しない実用的なWebページ」を実際に作ってみると良いでしょう。
フロントエンド(プロ)を目指すなら、下記を理解でき具現化できてプロの基礎レベルです、本職のプロになるには更に上のレベルが要求されます。
ポートフォリオを作成するなら、PCにおいては「1k〜6k」解像度ぐらいには対応すると良いでしょう、レスポンシブ･デザイン対応も必須です。
なので、その「特定の解像度に依存しない実用的なWebページ」も、PCにおいては「1k〜6k」解像度と、レスポンシブ･デザインにも対応させて、ポートフォリオの練習として作成してみると良いでしょう。
Webページ作成の注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000295&tsn+00000295&bts+2022/01/05%2018%3A04%3A56&
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
ただし、「@media：メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。
100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ･スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。
(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングしなくても良いので、(Webデザイナーのように)pxでモックアップを作って、それをvwに換算してWebページを作成してみると良いでしょう(WYSIWYGエディタでWebページとしてモックアップを作ると分かりやすいでしょう)。
また、今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。
いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
なお (メディアクエリは除き)プロはvw以外の単位は使いませんが、プロを目指さないなら「%、rem、vh、vmin、vmax」なども使って良いです。
プロを目指す場合と、目指さない場合で、当然 勉強法が変わってきます。
(Webページ作成の基本のキとして)ブレイク･ポイントを念頭に置き、必ずワイヤー･フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おｋです。
下記はワイヤー･フレームの一例です。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。
https://images.app.goo.gl/1yeuxuNJTDNyZE4B7
※後で自分が見て分かりやすく書いてあれば、本当に このような手書きで おｋです。
https://images.app.goo.gl/c6DPhnTj5Xrw1GcQ7
※3パターンの場合
https://images.app.goo.gl/Wu8gBmoLJiyRK8Qn6
※3パターンの場合
>いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
本当に下記「PCフレンドリー･デモ」レベルから初めて良いです。
下記「PCフレンドリー･デモ」は超単純なので、デベロッパー･ツールで実際にソース･コード見てみると良いでしょう。
PCフレンドリー･デモ
http://xd305417.html.xdomain.jp/demo/test/003.htm
|
|
|
|
|
|
|
|
<Number>: [0000020B]
<Date>: 2022/03/17 23:44:09
<Title>:
<Name>: amanojaku@管理人
|
|
|
>無料にこだわっているわけじゃないのでPHPじゃなくていいんですが、なぜPHPがおすすめですか？
書いたとおりです、有料でも良いなら好きな言語を選んで下さい。
選ぶ場合の注意点として、日本でメジャーなら、ネット上に大量の情報が有るので勉強しやすいです。
ただしLaravelはバックエンド(プロ)の世界では人気が無いらしいので、ヤメておいたほうが良いでしょう、Laravelを勉強するぐらいなら、CakePHPのほうがオススメ。
(フロントエンド)WordPressを使う場合はPHPの知識が必要になります。
バックエンドにおいて素のPHPの案件は減少傾向にあるらしいですが、なぜかPHP系フレームワークの「CakePHP」は人気があるらしいです。
もし バックエンドを目指すならPHPを勉強しておけば、その知識はCakePHPの勉強にも役立つでしょう。
このようにPHPは非常に汎用性の高い言語です。
|
|
|
|
|
|
|
|
<Number>: [0000020A]
<Date>: 2022/03/17 23:10:58
<Title>:
<Name>: amanojaku@管理人
|
|
|
(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization：検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
プロを目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。
pxなどの絶対単位を使っていると、なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、下記「ダメダメ･デモ」を実際にChromeモバイル･エミュレーターで3000px解像度でチェックしてみれば一目瞭然です(画像や文字などが非常に小さくなります)。
ダメダメ･デモ
http://xd305417.html.xdomain.jp/demo/test/005.htm
自分が作ったページも「1k〜3k」解像度でチェックしてみると良いでしょう。
PCフレンドリー･デモ
http://xd305417.html.xdomain.jp/demo/test/003.htm
Chromeモバイル･エミュレーターの操作法
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51&
できれば1k解像度モニターのほうが分かりやすいです。
現状で1k解像度モニターが無い場合、新規アカウントを作成し解像度を1k解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)。
グラボを挿していてマルチ･ディスプレイ対応なら、1k解像度モニターを買ってしまったほうが分かりやすいです。
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)、アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです。
ただし、「@media：メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれませんが。
100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ･スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。
(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングしなくても良いので、(Webデザイナーのように)pxでモックアップを作って、それをvwに換算してWebページを作成してみると良いでしょう(WYSIWYGエディタでWebページとしてモックアップを作ると分かりやすいでしょう)。
また、今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。
いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
なお (メディアクエリは除き)プロはvw以外の単位は使いませんが、プロを目指さないなら「%、rem、vh、vmin、vmax」なども使って良いです。
プロを目指す場合と、目指さない場合で、当然 勉強法が変わってきます。
(Webページ作成の基本のキとして)ブレイク･ポイントを念頭に置き、必ずワイヤー･フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おｋです。
下記はワイヤー･フレームの一例です。
※絵だけでなく「ほにゃららの画像」、「ほにゃららの文章」などのように注釈を付ければ更に分かりやすくなるでしょう。
https://images.app.goo.gl/1yeuxuNJTDNyZE4B7
※後で自分が見て分かりやすく書いてあれば、本当に このような手書きで おｋです。
https://images.app.goo.gl/c6DPhnTj5Xrw1GcQ7
※3パターンの場合
https://images.app.goo.gl/Wu8gBmoLJiyRK8Qn6
※3パターンの場合
もし、フロントエンドを目指すなら、下記のコードを見ずに、CSSで その挙動を再現できるレベルを推奨します。
勉強法としては下記のような既存のCSSを気の済むまでバリバリ改造してみると良いでしょう。
CSSデモ集(-)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000025C&tsn+0000025C.&
|
|
|
|
|
|
|
|
<Number>: [00000209]
<Date>: 2022/03/13 23:54:14
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [00000208]
<Date>: 2022/02/28 22:37:57
<Title>:
<Name>: amanojaku@管理人
|
|
|
>同じサイトの違うページの関係性を示したりするときにも使いますよね
はい、そうでした。
.
サイトのトップページ
link rel="index"
サイトのヘルプ
link rel="help"
サイトマップの場所
link rel="contents"
検索エンジンに登録して欲しいURL
link rel="canonical"
bookmark ブックマーク
link rel="bookmark"
何ページかにわたって記事がある場合の最初のページ
link rel="start"
次の文書
link rel="next"
前の文書
link rel="prev"
上位の文書
link rel="parent"
>ECサイトとかだとどうなるんでしょうか？
GoogleクローラーのAIは非常に賢いので全く気にする必要は無いです。
もしも SEOの評価を気にしているなら下記を参照して下さい。
SEO(Search Engine Optimization：検索エンジン最適化)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000028B&tsn+0000028B&bts+2022/01/02%2013%3A50%3A08&
(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization：検索エンジン最適化)的には当然 マイナスになるので ご注意ください。
もしも プロを目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。
なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、Chromeのデベロッパー･ツールのモバイル･エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみれば分かるでしょう。
参考
Webページ作成の注意点
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000295&tsn+00000295&bts+2022/01/05%2018%3A04%3A56&
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
|
|
|
|
|
|
SMT Version 8.022(+A) Release M6.
Author : amanojaku.
