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

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

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

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

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

TOPページのHTML

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

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

TOPページのCSS

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

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

TOPページのレスポンシブ

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

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

TOPページのjQuery

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

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

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

コンタクトページのCSS

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

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

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

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