【コーディング課題〜上級編〜】解説記事

【コーディング課題〜上級編〜】解説記事

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

この記事では、コーディング課題(上級編)の解説をしていきます!

解説は動画内で行っています!

コードだけ確認したい方はサンプルコードをダウンロードしてください。

コーディング課題(上級編)をご覧になってない方はこちらの記事で確認してください☆

TOPページのコーディング

まずは制作物の確認とファイルの準備をして、TOPページのHTMLを記述していきましょう!

HTMLはまず全体の枠組みを書いてから、個別のセクションの中身を記述していきます。

Aboutページのコーディング

TOPページのコーディングができたら、下層ページのコーディングをしていきましょう。コピペでできる部分も多いので、省ける作業は省いていきましょう!

下層ページのコーディングはトップページのコーディングで記述したものをコピペで使い回せる場合も多々あります。

共通パーツがページをまたいでどのように存在しているかを観察しましょう!

コンタクトページのコーディング

最後にコンタクトページのコーディングをしていきます。フォーム周りのタグは扱いが難しく感じるかもしれませんが、慣れていきましょう。

今回使ったコードは、忘れずにスニペット登録しておきましょうね✨

Youtubeでは動画学習コンテンツを配信しています!

動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

 ぜひチャンネル登録お願いします→クリ★スタYoutubeチャンネル