本講座の進め方と注意点 | SkillhubAI（スキルハブエーアイ）

本講座受講に必要なスキル

SKILLHUBの講座・課題では、下記２つを完了している方が対象となります。

PCデザインは、aiとpng形式でデザインをお渡しします。
SPはpngのみ（lp-sp01.png ～ lp-sp03.pngに分割）となっております。

LPで使用する文章は素材のaiファイル、もしくは下記スプレッドシートからコピーして使ってください。
https://docs.google.com/spreadsheets/d/1DKADR_45lyVJwr7rgR-v3NJjvMEmiGWrN39JVP8lsVo/edit?usp=sharing

共有されたスプレッドシートからはテキストのコピーがしにくいです。
ご自身のアカウントの方に“コピーを作成”してご利用ください。
file

レスポンシブ（PC、スマホ対応）に、一枚のCSSでコーディングしてください。

デザインに準じたコーディングをお願いします。
ただし、デザインと完璧に重なるほど、厳密にコーディングする必要はありません。

下記1～3の条件を守って進めてください。

サニタイズCSS（sanitize.css）を読み込ませてください。

Googleフォントを導入し、Noto Sans JapaneseとGoogle Fonts Icons（Material Icons）を使用してコーディングしてください。

BootstrapなどのCSSフレームワークの使用は不可とします。

本講座は初期設定を除き、実習範囲ページ→解説ページの順で構成されています。
実習の提出は不要です。

【実習範囲】と【解説】パートを活用し、ご自身にあったやり方でコーディングを進めてみてください。
大まかには下記３つのやり方ができます。

ただし、独自制作箇所に関しては、崩れの原因究明・修正用のコードをお送りは出来かねます。
基本的にアドバイスベースでのご回答となりますことを、予めご了承下さい。

他の講座と同様に、解説と一緒にコーディングする方法です。
HTML＆CSS学習を始めてから日が浅い方、何から手を付けて良いか分からない方におすすめです。

使用する画像は素材ファイル（lpcoding_sozai.zip）内にあるimagesフォルダをそのまま使ってください。

実習範囲のページに従って、自分でコーディングしてみる方法です。
うまく行かない箇所は、解説を読んで調整してみてください。

画像の書き出し方によってコーディングも変わってくるので、画像は素材ファイル内のimagesフォルダをそのまま使ってみてください。

Bタイプの方法で進める場合は、自分でコーディングしたファイルと、解説通りのコーディングは分けてください。
上手く行かない部分にだけ解説のコードを取り入れようとすると、レイアウトが崩れてしまう可能性があります。
file

少し大変ですが、自分で考えたコーディング・解説の模写、２つのコーディングを進めてみてください。
最も実力アップ・コーディングのバリエーション力向上に繋がります。
模写をしてから、ご自身のコーディングを調整したほうが整えやすいでしょう。

Web制作経験がある方、一度AもしくはBの方法でコーディングした方向けの方法です。

講座では実習範囲としてセクションごとに区切って作成していますが、ここも無視して構いません。
最初にすべてのdivとclassを決めるなど、ご自身の組みやすい方法でコーディングしてください。

また、PCファーストではなく、モバイルファーストで作ってみたり。
aiファイルから自分で画像を切り出してコーディングしてみたり…などのチャレンジも出来ると思います。

実習では使用したCSSプロパティ等の解説も行っています。
ただしリファレンスのように定義を細かく解説したり、すべてのプロパティ値を紹介はしません。必要箇所のみの解説となります。

気になるものがあれば、自分で調べましょう。
調べることで実力も、現場力も上がります。

レッスン一覧へ