デザインカンプからのコーディングで初心者が必ずつまずくポイントとは？作業のコツや解決方法を紹介【Webデザイン】
Вставка
- Опубліковано 28 кві 2023
- Webデザイン＆コーディングを学習中の方は必見！！
デザインカンプからのコーディング手順を解説した動画にコメントいただいた、実際の皆さんのお悩みに答える形で徹底解説します！
↓↓↓前回の動画はこちら↓↓↓
【Webデザイン初心者向け】デザインカンプからどうやってコーディングするの？実際の作業の流れを徹底解説！
• 【Webデザイン初心者向け】デザインカンプか...
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ...
【プランの詳細・お申し込み（MENTA）】
menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#コーディング #プログラミング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-clover.co.jp/ - Навчання та стиль
最も知りたかったことを解説して頂きありがとうございます！レスポンシブの計画、イラレでのテキスト設定などはいつも頭を悩ませていましたが、今回の解説でこれまでになくスッキリしました！これからもWebの神様の配信を楽しみにしています！一番分かりやすいコンテンツです！
ご視聴ありがとうございます！！大変励みになるコメントです🙇♀️🙇♀️
今後もお役に立てるように頑張ります！何かお困りのことなどございましたら、お気軽に動画リクエストいただければ幸いです🙏
安定の分かりやすさ＆プリチーさ。初心者の🐤にとっては・・・
うれこっこー🐔
成長した！😂
こちらこそ、いつもご視聴いただきうれコッコーです🐔
ありがとうございます。
本当にありがとうございます。
こちらこそご視聴ありがとうございます☺️
いつも丁寧で分かりやすい動画をつくってくださいまして、ありがとうございます。
ご質問になりますが、コーディングにおすすめな書籍はありますか？探していてもどれがいいか見つからずご質問をさせて頂きました。お時間のあります時によろしくお願いします。
ご視聴ありがとうございます。一冊だけでは十分では無いので、最低五冊くらいは目を通して行くことをお勧めします。
全ての書籍の内容を全部把握しようとするのではなく、実際にコーディングを進めてみて実現できなかったレイアウト等を書籍で調べていくような学習方法が良いと思います。
学習の一番初めに読む書籍としては、
Manaさんの「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」がわかりやすいと思います。
おつかれですー。
reset.cssで楽してる身分としては、こういう細かいところもチェックせねば…デザイナーさんの変なこだわり（?）についていくのもまぁ大変ですが😂
ご視聴ありがとうございます！
意図をもってデザインされているところはしっかり汲み取りつつ、コーディングとの兼ね合いでデメリットがあるデザイン（コードが煩雑になる、メンテナンス性が下がる、など）はしっかりと相談して、コーダーさんもデザイナーさんも納得できて、最終的にはクライアントさんに満足いただける妥結点を探っていきたいところです🙇♀️
キャンバスサイズのところについて質問です！
デザインカンプ(PCの場合)を作成するときは、まず現在の画面サイズのシェア状況をstatcounterで調べる。
どんなキャンバスサイズで作成するにせよ、画面幅の最小サイズである1280pxを考慮し、コンテンツ幅は1200pxくらいにして作成するのが良いということでしょうか。
ご返信遅くなりすみません💦
はい、ほとんどご認識の通りです！ある程度シェアがある画面サイズのうち、一番大きいものでも、一番小さいものでも表示が崩れないように考慮しないといけません。
そのためには、重要なコンテンツを収める領域を、小さい画面サイズに合わせて設計する、という考え方が無難になります！
最近は横幅1920で設計されていて、コンテンツ幅が1700ぐらいで作られてしまっているデザインデータなどにも巡り合うのですが、横幅がそれより小さい場合のレイアウトを再検討しないといけないので、デザイン自体修正してもらったり、別のブレイクポイントを想定したデザインデータも作ってもらわないと実装が難しそうです…🙇♀️
まだ勉強を始めたばかりですが、いつも動画で勉強させてもらっています。
おすすめのクラス名の付け方やCSS設計について解説の動画をお願いします。
サイトの模写をする時にもCSS設計を取り入れた方が良いのでしょうか？
ご視聴ありがとうございます。また、リクエストもありがとうございます。クラス名の命名規則については、チーム開発であればチーム全体のスキル等を考えてのCSS設計を行っていく必要があります。
模写段階でCSS設計を学習するよりは、別途、複数人でコーディングを進めながら、コーディング規約等を定めて行く方法が良いと思います。メンバーのスキルや性格等も考慮して設計していくことが良いと私は思います。学習の始めにはCSS設計を極めようとするのは難しい為、他の部分で学習を進めていくのが良いと思います。
@@webgodweb 返信ありがとうございます。
クラス名を決めるだけでも悩んでしまうので、CSS設計は後回しにしてクラス名だけでもすぐに決める事ができるように頑張ります。
悩みながら、自分なりのクラス名の命名規則を少しづつ見出していってください。FLOCSSやBEMには初心者のうちは手を出さないことをお勧めします！
いつも動画で勉強させてもらい、スキルアップさせて行こうとあがいている初心者です。
こちらの動画とは関係ありませんが質問があります。
未だに div とul のどちらを使うのか区別がつきません。
どういう時のdivを使うのか？ どうしてdivではなくulを使うのかがわかりません。
解説の動画をアップして頂けると嬉しいです。
よろしくお願いします。
ご質問ありがとうございます！
一般的に、明らかに並列関係であるとわかるものはulタグを使ったほうが良いかと思います。（例えば「参加者一覧」「お買い物リスト」のように、複数個の要素が並んでいて、それぞれの重要性が等しい時、といったイメージでしょうか）
ulタグは限定的な使い道ですが、divタグは汎用的に使えるものなので、「どのタグを使ったらいいかわからない」という時に活用してみてください。
ulタグを使えるところに、divタグを使っても厳密に間違いというわけではないのですが、できる限り文章構造を正しく表すために、HTMLタグは使い分ける必要があります。
（Googleなどの検索エンジンは、HTMLタグの使い分けを頼りにして、見出しはどれか？本文はどれか？このテキストの役割は？などを判断します。）
失礼致します。Javascriptを用いて写真を表示し、そこに一言説明文を加えたいと思っているんのですが、クリックすると説明文が変わるようにするために、どのようなコードを記述するとよいでしょうか？もしよろしければ教えて頂けないでしょうか。
ご視聴ありがとうございます。ここで説明出来るボリュームでは無い為、動画のコンテンツの参考とさせていただきます。
レタースペーシングの単位がemだと親要素の文字サイズに影響うけると思うのですが
フォトショップのカンプから常に文字間隔(VA) / 1000 (単位em)の計算式で計算していいんでしょうか
親要素次第ではないんでしょうか？
ご視聴ありがとうございます。ご質問の件ですが、下記リンクをご参照いただけるとわかりやすいかと思います。
moshashugyo.com/media/letter-spacing
@@webgodweb
よくわかりました
ありがとうございます。
現場経験がないのでお聞きしたいのですが、イラレからアセットへの『イメージ書き出し工程』がコーダー担当と言われていますが、またWebカンプレイアウトのデーター納品の際、見本と一緒にデーター貰うと思うのですけど、納品する側（デザイナー）にレイアウトする側は、Photoshopでの画像補正、【適切な解像度とサイズを決定】してからでないと、そもそもがレイアウトが見本渡しでも納品できないように感じるのですが。。。Webカンプ３サイズ、1440dpi、750dpi、375dpiのwebカンプ納品が決まっていると、相対的指定の予想から大方の画像サイズとdpiをデザイナー側に、画像形式も一緒に事前に伝えることって、社外受注だったら、難しいとか、あるのでしょうか？印刷物工程で考えると、デザイナーの仕事で完結した方がスムースのような気がするので。的を得た質問になっていれば良いですが。。
かわいい
コメントありがとうございます🙇♀️🙇♀️