【レイアウト構成】中級編：コーポレートサイト／固定サイドメニュー

全体のレイアウト構成

解説!

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

header: ロゴ、グローバルナビを囲みます。
main: コンテンツのメインエリア全体を囲みます。
div（#video）: 動画のエリアを囲みます。
section（#project）: Projectコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#feature）: Featureコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#flow）: Flowコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#contact）: Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer: コンテンツ下のfooter部分を囲みます。

コーディングのヒント!

コーディングのヒント!

背景に動画を全幅で固定します。

コーディングのヒント!

エリア全体をsectionタグとコンテンツ幅を設定するための共通クラス（wrapper）で囲みます。

タイトル: タイトル全体をh2タグで囲みます。
疑似要素を使用して両サイドに線を引きます。
画像: ul、liタグを使用してFlexboxで横並びに配置します。
画像はCSSで枠線を設定し、画像全体をリンクにします。
画像左下のテキストは「position」を使用して画像上に重ねます。また、テキストの下には「box-shadow」を使用して黒い影をつけます。

解説!

コーディングのヒント!

エリア全体をsectionタグとコンテンツ幅を設定するための共通クラス（wrapper）で囲みます。

タイトル: タイトル全体をh2タグで囲みます。
疑似要素を使用して両サイドに線を引きます。
コンテンツ: ul、liタグを使用してFlexboxで横並びに配置します。
円全体をリンクにします。
ホバー時のスライド動作は、疑似要素を使用して「position」と「transition」で要素を移動させて表現します。

コーディングのヒント!

エリア全体をsectionタグとコンテンツ幅を設定するための共通クラス（wrapper）で囲みます。

タイトル: タイトル全体をh2タグで囲みます。
疑似要素を使用して両サイドに線を引きます。
流れ図: 流れ図全体をdivタグで囲み、Flexboxを使用して横並びに配置します。
流れ図の図形は順序性のあるリストになるので、ulタグではなくolタグを使用して記述します。
図形の三角部分はliタグの疑似要素を使って作成し、「position」で四角の下に配置します。
図形下の黄色い棒線はolタグの疑似要素を使って作成し、こちらも「position」で中央に配置します。
流れ図の説明: dl、dt、ddタグを使用して記述します。
丸数字の作り方は色々なやり方がありますが、今回はdtタグの中で数字部分にspanタグを使用して作っています。もちろん疑似要素で使用してもOKです。

コーディングのヒント!

エリア全体をsectionタグとコンテンツ幅を設定するための共通クラス（wrapper）で囲みます。

タイトル: タイトル全体をh2タグで囲みます。
疑似要素を使用して両サイドに線を引きます。
お問い合わせリンク: 全体をdivタグで囲み、Flexboxを使用して横並びに配置します。
右下の黒三角は疑似要素で作成し、「position」で配置します。
ホバー時に枠線を太くするCSSは「border」ではなく「outline」を使います。「border」を使用するとホバー時にレイアウトがずれますが、「outline」はボーダー領域をとらないためレイアウトのずれが発生しません。

コーディングのヒント!

フッター: フッター全体をfooterタグで囲みます。
メニューはul、liタグで記述して、Flexboxで横並びに配置します。
トップへ戻るボタン: CSSで作成し、右下に固定で配置します。
最初画面が表示されたタイミングではボタンが表示されないよう、jQueryの「hide()」で非表示にしておきます。
jQueryのscrollイベントで、スクロール位置が700pxを超えたタイミングで「fadeIn()」を使用してボタンを表示させます。
クリック時にページトップに戻る動作は、「animate」を使用します。