本講座の目的
仕事としてコーディングを行う場合は「渡されたデザイン画を、Webページとして再現する」のスキルが必要です。
完璧にデザイン通りにする、デザインに沿いつつ柔軟性を重視する、など依頼によって求められるコーディングは異なります。しかし、デザイン通りに作ることが可能である、というのは大前提なのです。
そこで、この講座では「デザインの再現」を重視したコーディング方法を紹介しています。
講座の流れ
本講座は、プロとして活躍できるコーディング力を身につけるために、大きく２パートに分かれています。
1.コーディングのための基礎知識 2.Webページのコーディング(解説付き)
1.コーディングのための基礎知識
コーディングを行うために、最低限知っておきたい基礎を紹介しています。
デザインデータからの画像の切り出し、画像化する部分・CSSで再現する部分の考え方についても解説しています。 CSSを丸暗記するのではなく、目的のデザインに仕上げられるよう“検索する”ヒントが中心。ただテキストを読むだけではなく、自分で実際に“検索”を行うことで、コーディングの仕方がわからないデザインと遭遇したときにも対応できる力が身につきます。
実際に手を動かすために実習をご用意しています。 実習の提出は必要ありません。 見本ファイルと見合わせてセルフチェックを行ってください。
2.Webページコーディング
基礎を押さえたら、実際に運用されているサイトデザインを使ったコーディングを行います。
最も作りが複雑なトップページは、パーツごとに区切って課題-解説の1セットとしています。デザイン再現性の確認方法、要所ごとにコーディングの考え方も紹介しておりますので、ご確認ください。
1セットごとの提出は不要です。 課題ページ完成時に、マイ課題よりご提出ください。
提出、質問について
- 基礎編の実習：提出不要
- 実践編の課題：マイ課題より提出
それ以外のタイミングでも、ご質問・ご相談を受け付けております。 ただし独自に設定された部分については、崩れの原因究明・修正用のコードをお送りすることは出来かねます。 基本的にアドバイスベースでのご回答となりますことを、予めご了承下さい。