Chapter06.　実際にLPを作成（後半）– category –

footerを作成していきましょう。どんなWebサイトにもfooterは存在します。クライアントからサイト制作の案件を受けたら必ずと言っていいほどfooterを作成することになります。したがってfooterの作り方を抑えておきましょう。

メディアクエリを使ってPCとスマホ時の表示の仕方をわけていきましょう。メディアクエリは必ずといっていいほど現場で使います。必ず今回のレクチャーで覚えてください。

ヘッダーとキービジュアルをレスポンシブ化していきます。display:blockとdisplay:none;を使ってスマホ時とPCの出しわけをしていきましょう。

メインタイトル１のレスポンシブ化をします。文字の大きさとパディングの幅を修正していきます。

メインタイトル2をレスポンシブ対応していきます。flexで横並びにしたボックスをflex-direction:columで縦に並べることが今回のポイントです。

メインタイトル4をレスポンシブ対応していきましょう。paddingに必要以上の幅がついているのでデベロッパーツールで確認しながら修正していきます。

footerがPCに合わせて作成してあるので、レスポンシブ対応していきましょう。footerはどんなサイトにも必ずあるパーツです。必ず習得しましょう。

ハンバーガーメニューの概要説明とハンバーガーマークとバツマークを作っていく作業について解説しました。

ハンバーガーメニューのハンバーガー部分を作成していきます。クリックしたら×ボタンに変わるようにJSとCSSで調整していきます。

レスポンシブ時のハンバーガーメニューです。いよいよ、ラストになります。JSとCSSを組み合わせてハンバーガーのスライドダウンメニューを作成していきましょう。