Chapter06. 実際にLPを作成(後半)– category –
-
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#11 footerを作成しよう
footerを作成していきましょう。どんなWebサイトにもfooterは存在します。クライアントからサイト制作の案件を受けたら必ずと言っていいほどfooterを作成することになります。したがってfooterの作り方を抑えておきましょう。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#12 レスポンシブ対応メディアクエリの使い方を学ぼう
メディアクエリを使ってPCとスマホ時の表示の仕方をわけていきましょう。メディアクエリは必ずといっていいほど現場で使います。必ず今回のレクチャーで覚えてください。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#13 レスポンシブ対応(header,keyvisual)
ヘッダーとキービジュアルをレスポンシブ化していきます。display:blockとdisplay:none;を使ってスマホ時とPCの出しわけをしていきましょう。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#14 レスポンシブ対応(メインタイトル1)
メインタイトル1のレスポンシブ化をします。文字の大きさとパディングの幅を修正していきます。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#15 レスポンシブ対応(メインタイトル2)
メインタイトル2をレスポンシブ対応していきます。flexで横並びにしたボックスをflex-direction:columで縦に並べることが今回のポイントです。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#16 レスポンシブ対応(メインタイトル4)
メインタイトル4をレスポンシブ対応していきましょう。paddingに必要以上の幅がついているのでデベロッパーツールで確認しながら修正していきます。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#17 footerのレスポンシブ化
footerがPCに合わせて作成してあるので、レスポンシブ対応していきましょう。footerはどんなサイトにも必ずあるパーツです。必ず習得しましょう。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#18 レスポンシブ(ハンバーガーメニュー①)
ハンバーガーメニューの概要説明とハンバーガーマークとバツマークを作っていく作業について解説しました。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#19 レスポンシブ(ハンバーガーメニュー②)
ハンバーガーメニューのハンバーガー部分を作成していきます。クリックしたら×ボタンに変わるようにJSとCSSで調整していきます。 -
Chapter06. 実際にLPを作成(後半)
【Chapter06】<LP>#20 レスポンシブ(ハンバーガーメニュー③)
レスポンシブ時のハンバーガーメニューです。いよいよ、ラストになります。JSとCSSを組み合わせてハンバーガーのスライドダウンメニューを作成していきましょう。
12









