ランディングページ制作に夢中の管理人です。

ランディングページは、業界用語としてLP(えるぴー)と読んでいるのですが、グローバルナビゲーションが固定されたものが多いですよね。管理人も自分でソースコードを作れないか、あらゆるサイトを見てチャレンジしてみました。すると、こちらで落ち着きました。

デモページ

HTML部分の記述

a href=”#section1″ というのは、クリックしたらその項目に移動するページ内リンクですよね。h2を移動先にする場合、h2 class=”#section”でパスを投げることができます。

CSS部分の記述

これで800pxの枠内に収容されます。ただし、レスポンシブルにするためには、これだと使えないです。 width: 800px;の部分を100%にして相対的に動かしてやり、スマートフォンサイズになったら折りたたむという記述にしないとですね。今回はそこまでやりませんでした……。

Javascriptの記述

これで自由に動かすことができます。また、グローバルナビゲーションを固定し、クリックしたときの挙動もJavascriptで制御が可能です。

ページ内リンクもふわりと移動できるとかっこいいですし、グローバルナビゲーションの固定で見出しがグローバルナビゲーションと重なってしまっても、100px上部に停止するよう指定しているので、ずれ問題も解決したJavascriptになっております。

あくまで自分用のメモとして残しておきました。