【レイアウト構成】応用編：ランディングページ／CSSアニメーション

このまま学習を続けて、本当に実務で通用するのか不安な方へ。

そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。

さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

全体のレイアウト構成

解説!

レイアウト構成は下記の通りです。

header: ロゴ、ハンバーガーメニューを囲みます。
main: コンテンツのメインエリア全体を囲みます。
div（#mainvisual）: メインビジュアルのエリアを囲みます。
section（#reason）: Reasonコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#voice）: Voiceコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#summary）: Summaryコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
div（#entry）: 申し込みボタンのエリアを囲みます。
footer: コンテンツ下のfooter部分を囲みます。

コーディングのヒント!

ロゴ: h1タグで記述します。
ハンバーガ―メニュー: ハンバーガ―メニューの3本線を表現するクラスを作成します。
クリック時に表示するメニューはnav、ul、liタグで記述し、初期状態は非表示に設定しておきます。
ハンバーガ―メニューがクリックされた際に、jQueryでメニューのオープン、クローズを切り替えます。

コーディングのヒント!

画像: CSSアニメーションを使用して3枚の画像をフェードイン、フェードアウトで切り替えます。
フェードイン、フェードアウトは keyframes で opacity を0から1に変化させることで表現し、2枚目以降のアニメーション開始タイミングをずらすことで3枚の画像が時間差で切り替わるように設定します。
テキストとボタン: positionを使用して、画像の上に重なるように配置します。
ボタンをホバー時に、少し大きくするのは transform の scale を使用します。

コーディングのヒント!

エリア全体をsectionタグで囲みます。

タイトル: タイトル全体をh2タグで囲みます。
下線は、疑似要素（after）を使用します。
その他のセクションでも使いまわせるように、共通のCSSとして定義しておくと便利です。
スライド表示: コンテンツをそれぞれ左と右から keyframes の translateX を使用してスライドさせます。
スライドは、要素が画面下に表示されたタイミングでjQueryのプラグイン「inview.js」を使用して実行します。

コーディングのヒント!

エリア全体をsectionタグで囲みます。

タイトル: タイトルは、「#reason」と同様です。
ふきだし: ふきだしの矢印は、疑似要素の border と transparent を使用して作ります。
ふきだしの拡大表示は、keyframes で scale と opacity を変化させることで表現します。
アニメーションの実行タイミングについては、上のスライドと同じく「inview.js」で行います。