Landing Page Ⅱ

下記のページを参考にランディングページを自由に作ってみましょう。

• SPACE TRAVEL
• 下水処理のしくみ

• インドカレーTATHI

01 LPフォルダー

LPフォルダーにはindex.htmlの他に下記ファイルが入っています。（ ダウンロードLP.zip ）
【css】　normalize.css／lp.css／p-top.css
【js】　jquery-2.1.4.min.js／p-top.js
【images】 　※画像（photo）はここへ入れてください

lp.cssには基本的なcssだけが入っていますので、自由に書き換え、追加してください。

他のレイアウトを参考にしたい場合は「ページのレイアウト」よりTemplateをダウンロードしてください。

 

02 ヘッダーのデザインやタイトルの変更

• タイトルの変更
• ヘッダーのデザイン（テキストや画像自由に作成）
• h1やh2など見出しのデザイン

 

03 ナビゲーションメニューを入れる場合

• ランディングページ（前橋の下水処理のしくみ）のメニューを参考
• ボタン・リストデザインを参考
• その他、今までに作ったページを参考

 

04 最初から入れておくと便利なCSS

• 最初から入れておくと便利なCSSのページを参考に必要なものをコピー・ペーストしておきましょう

05 バックグラウンドカラーを部分的に変える場合

lp.cssには「.bg01」　「.bg02」　「.bg03」　が設定してありますが、ここは自由に変更アレンジしてしてください。

• カタチを変更する場合は下記のサイトを参考
  CSS clip-path maker Clippy
  

 

06 レイアウトのデザインなど

• コンテンツのレイアウトはこちらを参考（回り込みなど）
• Flexbox layout（横並びなど）
• マップやYoutubeを入れる

 

07 PAGE TOPを入れる

【css】　p-top.css　、【js】　jquery-2.1.4.min.js／p-top.js を利用できます

• Page Top Linkの方法を参考に設定しましょう

 

08 WEBアイコン・SEO対策

• もっと簡単にしたい場合　png１つで作成を参考
• HEADに入れるTAG「SEO対策」