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

この記事の監修者

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

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

この記事では、コーディング課題（中級編）の解説をしていきます！

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

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

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

TOPページのHTML

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

HTMLを記述するときはまず全体の大枠を記述します。その後、headerやfooter、各sectionの中身を書いていきましょう！

HTMLを書いたら、CSSを書いていきます。カンプのデザインを見ながら、コードに反映していきましょう！

CSSの記述をスムーズに行なうためには、事前にデザインカンプをよく観察しておくことです。どこにどんなスタイルを当てれば良いのかを事前に考えてから手を動かすようにしましょう！

PC版のCSSを記述したら、メディアクエリを書いてレスポンシブの記述をしていきます。検証ツールを使用しながら画面幅を変えてやっていきましょう。

どの画面幅でも表示が崩れないように確認しながら作業をしていきます。

jQueryを使用して、スティッキーヘッダー、スライドショー、ハンバーガーメニューを実装します。

スティッキーヘッダーは画面をスクロールすると背景の色が変わるようにします。スライドショーはslickというjQueryのプラグインを使用します。

ハンバーガーメニューがよくわからない方はこちらの記事で復習しましょう！

コンタクトフォームのコーディングは難しいですが、数をこなしてなれていきましょう！

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

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