ここから先のレッスンについて
「画像化する部分・CSSで再現する部分を考える」のレッスンで使用したデザインを元に、実践的なコーディングを行っていきます。
まずはトップページを完成させましょう。
デザインをいくつかのパートに分けて作っていき、1枚のWebページを完成させます。最終的には本格的なLPが完成しますよ。
ここからのレッスンは次ページの準備編を除き、２レッスンを１セットとして進めます。
- 【実習】→パートごとの要点とヒント
- 【解説】→デモコーディング
1ページをセクションごとに切り分けた形で、レッスンは進行します。 ただし、コーディングは順番通りに進めなくても構いません。
- 【実習】ページだけを見て作ってみる
- 【解説】ページを順に見て、自分のコーディングと見比べる
など必要に合わせて読み方を変えてみてください。
コーディング実習の進め方
課題とデモコーディングの確認用に、フォルダを2つ作成していただくと便利です。 こうすることで自作中のコーディングを消すことなく、解説の作り方を試したり、表示を確認することができます。
- 実習で自分で作ってみたファイル
- デモコーディングを写したファイル
２種類を作成してみましょう。 上手く行かない部分だけ解説のコードを取り入れようとすると、レイアウトが崩れてしまう可能性があります。少し大変ですが、模写をしてからご自身のコードの書き方に直したほうが取り入れやすいです。
また、自分で考えて組む、デモコーディングの模写、それぞれを作ってみることで実力アップ・コーディングのバリエーション力アップが期待できますよ。
ただし、独自に設定された部分については、崩れの原因究明・修正用のコードをお送りすることは出来かねます。 基本的にアドバイスベースでのご回答となりますことを、予めご了承下さい。
コーディング要件
今回の案件では、クライアントからの指示やコメントがありました。
内容は以下の９つです。
全体設定
①メタ設定
titleとmeta descriptionを、下記内容で設定してください。
OGPの設定やSNS連携は不要です。
【titleタグ】
Qbase WEB[キューベースウェブ]
【meta description】
Skillhub講座の問題集サイトです。たくさん問題を解いてWeb制作のスキルを上げましょう。
②CSSリセットについて
CNDでsanitize.cssを使用して下さい。
https://unpkg.com/sanitize.css
③コーディング順序とスマホ幅規定
モバイルファーストで設計して下さい。
レスポンシブWebページとし、cssファイルは1つにまとめて下さい。
【スマホ幅について】 スマホ表示は、デザインと同じく幅375px以上の端末で綺麗に見えればよいです。
また、デザインでは6.6ptなど小さいサイズの文字があります。
こうした部分は10pxで表示させて下さい。
―理由：Google Chromeでは10px、Safariでは9pxが最小表示単位のため。
可読性も損なわれるので、無理にtransformで縮小等はしなくて良いです。
④クラス命名規則
命名規則は特に設けません。
今後、他の人が調整する可能性もあるので、わかりやすいものにして下さい。
⑤サイズ単位について
今回のコーディングはデザイン重視です。
デザインが再現でき、どのレイアウトでも崩れなければ、どの単位を使ってサイズ指定を行っても構いません。
⑥ダミーテキスト箇所について
デザインにはダミーテキストが使用されている箇所があります。
これは、まだ決まっていない部分なので、ダミーテキストのままコーディングを進めて下さい。
アニメーション等の設定
⑦ファーストビュー
スマホは上から順に、PCでは下記の順でフェードイン表示させて欲しい。
- STEP1
- STEP2
- STEP3
- 未経験Webデザイナーのための～
- 操作画面の画像
- 今すぐテストを受けるボタン
表示速度は早め、一回のみのアニメーションでOK。
⑧スマホ幅でのナビゲーション
三本線をタップしたら開くようにしてください。
中身はシンプルなデザインで、操作しやすければ良いです。
トップ位置での固定は不要です。
⑨マウスホバー設定
設定しなくて良いです。
デモコーディングについて
レッスンで紹介するコーディング方法は、コーディングの１例です。 「このコード作り方以外は不正解」というものではありません。
デモコーディング以外の作り方であっても、下記３つを満たしていればコーディングに問題はありません。
- 出来るだけシンプルなコードになっている
- ブラウザ幅を変えても崩れない
- ブレイクポイント以外の幅でも崩れない
「崩れない」とは、どの表示幅でも見られるデザインを保っているかです。 例えばノートPCで、ブラウザのサイドにお気に入りを表示させている、なんてパターンもあります。こうした場合、表示領域は950pxくらいになることもあるでしょう。
また、スマホも端末によって画面のサイズが違います。 375pxで綺麗に表示されるだけではなく、414pxでも崩れない必要があるのです。
そこさえ出来ていれば、デモコーディングと全く違う組み方をしていても正解と言えます。プロのコーダ―でも人によって組み方は違います。自分がベストだと思う形でコーディングすれば良いのです。
提出について
実習部分（トップページ）の提出は不要です。 最後に用意されている、課題の一覧ページをご提出ください。
- オリジナルのコーディング
- 見本コードを見ながらコーディングしたもの
- オリジナル+見本の内容を取り入れたコーディング
コーディング要件を満たしたWebページになっていれば、どれでも構いません。
デモコーディング用ファイルについて
デモコーディングで使用している、デザインから切り出した画像を素材タブからDLしてご利用もいただけます。
切り出し方が違う方は、素材の画像を利用して頂いても構いません。