コーダーとWebデザイナー
https://z.wikiwiki.jp/bremen/topic/46
※ただし、現在は多くの「ガチのWeb系ベンダー」でも、コスト削減のためにコーダーの場合はアマチュアでも許容する場合もあるようです(それは欠陥Webページでも許容される場合もあると言う事)。
なお、Web系ベンダーが(レスポンシブ･デザインなどで)ガチのフロントエンドの話しをする可能性も有り得るので、(コーダーの場合は)無知だと当然 Web系ベンダーの話しが意味不明になるので、知識としてぐらいはガチのフロントエンドを理解して置く事を推奨します。
Web系ベンダーの場合：
(現在は どうか知らんけど)数年前にググってみたら、ギャラは1ページ「5千円以下」と記載されていた(実際は4千円か、3千円か知らんけど)、Web系ベンダーはアマチュアを人間と思って無いのか？
プロ案件なら、当然ギャラはもっと良いだろうけど、当然プロ・レベルのスキルが要求される。
―
備忘録を作って、ググった内容をメモしておくと良いでしょう、Googleドキュメントなら画像も貼れてクラウドに保存されますので、スマホからでも確認できるメリットが有ります。
図だけなら暗記しやすいので、下記のように分かりやすい図が掲載されているサイトで、(一読ぐらいはして)図だけ暗記して おおよそのイメージを掴んでおき、必要になったらググれば良いです(暗記が勘違いだった場合は、別の方法を模索して下さい)。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
―
最低限「Chromeの開発者ツール(デベロッパー･ツール)、Chromeモバイル･エミュレーター」ぐらいは使えるようにして下さい。
最低限のクロス･ブラウザ対応は必須になるので、ベンダー･プレフィックス用のツール(設定も)は必須になりますが、それとは設定が必要になります。
ただし、iPhone用ブラウザ「Safari」などのバグ対応までは良く分かりません。
CSS3で出来るよるなことをJavaScriptで書いたら、ベンダーに基本が出来て無いスキルの低い人だと評価されます。
なので基本的にポートフォリオではJavaScriptは使わないようにして下さい。
JavaScriptをアピールしたいなら、(通常版のポートフォリオとは別に)JavaScriptをバリバリ使うポートフォリオも作ってみると良いでしょう。
―
「PC画面、タブレット画面、スマホ画面」でのレイアウト構成を変えるレスポンシブ･デザインと言う手法が有ります。
下記はワイヤー･フレームの一例です(それはレスポンシブ･デザインのイメージでも有ります)。
※プロなら4パターン、5パターンのレイアウト構成も普通に有るようです。
https://images.app.goo.gl/c6DPhnTj5Xrw1GcQ7
※3パターンの場合
https://images.app.goo.gl/Wu8gBmoLJiyRK8Qn6
※3パターンの場合
―
もしコーダー(プロ)を目指すなら、(案件で改造して使えるように)下記の当方のCSS3デモ集よりも大量のストックを作っておくのが常識です。
CSS3の勉強法としては、下記のような既存のCSSを気の済むまでバリバリ改造してみると良いでしょう(プロの仕事で既存のCSSコードをコピペすると著作権法･違反になる可能性があるので ご注意ください)。
CSSデモ集
https://z.wikiwiki.jp/bremen/topic/16
※(当然、CSSはプログラミング言語ではないですが)CSS3はプログラムと見紛うばかりの動的な表示が可能になりました。
※ガチでCSSを勉強したいなら、まずは人のコードを読んでみると良いでしょう。
(ググるのも勉強の内なので)コードの意味は ご自分でググって下さい(そんなクソみたいなこと やってらんね～と言うタイプの人は向いてないです)。
※CSS3は非常に難易度が高いのでメンターを雇うのもアリ(雇う前にCSS3の知識があるか確認が必要)。
―
SEO対策
https://zawazawa.jp/bremen/topic/1
※それはプロ・レベルでは無く、あくまでも一般論レベルのSEO対策ですが、コーティング・スキルに関しては、(フロントエンド)セミプロ・レベルのスキルが必要になります。
それはコーティング・スキルに関しては、本気で(フロントエンド)セミプロ・レベルを勉強する気が無いなら無理だと言う事を意味しています。
下記は(超単純なレスポンシブ･デザインのデモです)レスポンシブ・デザインの場合は、とりあえずChromeモバイル･エミュレーターで一般的には約「300px～3000px」解像度ぐらいをチェックしてみると良いでしょう
コードは単純明快なので、コードを参照してみると良いでしょう、なおダウンロードすると(ブラウザ？によって)コードが改変されてしまう場合があるので、必ず開発者ツール(デベロッパー･ツール)で参照して下さい。
下記添付画像の左からPC画面のレイアウト構成、タブレット縦画面のレイアウト構成、スマホ縦画面のレイアウト構成
https://ano1335-chan.github.io/web/responsive.001/index.html
そのコードを見れば分かるように、概念自体は そんなに難しくは無いです(逆に簡単すぎて拍子抜けするかもしれませんが)。
もちろん、本格的なレイアウトだと、CSSの難易度は非常に高くなりますが、それは地道に勉強するしか無いですが。
レスポンシブ･デザインの概念を勉強する場合は、まずは単純なレイアウトでレスポンシブ･デザインを作ってみると良いでしょう。
レスポンシブ･デザインのコーディングの注意点としては、基本的にHTMLコードは冗長化してはダメです。
つまり、分かりやすく言うとHTML側のコードで「PC用のタグ、タブレット用のタグ、スマホ用のタグ」のように分けてはダメで、CSS側のコードで「PC用、タブレット用、スマホ用」の設定をコーディングして下さい。
なお、レスポンシブ・デザインはパーセントの概念の理解が必要になりますが、それは消費税の計算式が理解できれば良いだけなので、(それは"算数"レベルの計算なので)中1レベルで余裕なのにも係わらず、何故か多くの人が挫折していますね。
※中学3年間の数学で、「1次方程式、連立方程式、因数分解、多項式の展開、2次方程式」などを勉強しているにも係わらず、("算数"レベルの)消費税の計算が何故か理解できない人が多い。
―
実在するWebページを内部のコードは見ずに再現することを"模写"と言い、実在するWebページを内部のコードを見てWebページを再現するのは"写経"と言います。
"模写"と言えど「ブレイク･ポイント、フォントの設定」は見て良いです(必須)。
作成したファイルは、ベンダーに圧縮してメールでデータを送れば良いです、サイズがクソでかいとメールでは送れない場合もあるので、その場合はUSBにコピーして送れば良いでしょう(USBにコピーする場合は圧縮しなくても良いです)。
なお、「サーバーを立る、ドメインを取得、アップロード」などの雑務はベンダーがやってくれます。
クライアント直の案件の場合は、(Webデザイナー、イラストレーター、グラフィック・デザイナー、フォト・グラファーなどの)外注などの手配、「ドメイン名の所得、レンタル・サーバーの契約」など、「契約書を正式な法律用語で作成する」などなど、ベンダーがやってくれる事を全て自分で やらなければなりません(つまり、クソ面倒)。
クライアントのPCを公開用サーバーにしてくれだの、Webデザイナーやコーダーの区別も付いて無いので、「(コスト削減のために)あんたがWebデザインをやってくれ」と言っておきながら、デザインが気に喰わないから、やりなおせなど、クライアント自体が(ギャラの)相場が分かってないので もっと安くしろだの、無理難題を言って来る可能性も有ります。
なので一般的にベンダーの案件を受けたほうが良いでしょう。
Web系の資格は実務では全く役に立たないので、(Web系企業では当然そんなことは分かっているので)Web系企業では全く評価されません。
分かりやすく喩えるとWebの仕事をするのにExcelの資格を持ってます！、と言ってるようなモノなので、(本当にそれぐらい無意味なので)そんな全く意味の無い資格を取るために時間を浪費しているのは頭が悪いと評価されると言ってる人も居るぐらいです。
なのでWeb系の資格を取ったとしても、Web系企業の人にはWeb系の資格を持っていると言わない方が良いと言われています。
ただしWeb系以外のIT系企業では実務で役に立つと勘違いしてくれるかもしれませんが。
―
初心者なら、まずは下記のレスポンシブ･デザインを作ってみると良いでしょう。
Chromeモバイル･エミュレーターで一般的には約「300px～3000px」解像度ぐらいをチェックして下さい。
『HTML5の要素による構成例』
https://web-svr.com/HTML5編/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で勉強してもOKです。
とりあえず、レスポンシブ・デザインの勉強として、その『HTML5の要素による構成例』の[PC表示]と[スマートフォン表示]のレイアウト構成でレスポンシブ・デザインを作成してみると良いでしょう。
レイアウト系のCSSとして、「Flexbox、CSS Grid」を勉強する事を推奨します。
ただし、「CSS Grid」をネットでググると、難しい設定法が殆どなのですが、実は もっと簡単な設定法も有るので、その難しい設定法を鵜呑みにする必要は有りません。
