SinglePage Design
シングルページとは、ひとつのページ(index.html )のみで完結しているWebページのことです。近年よく見かけるようになりましたが、その理由は・・・
- ページ遷移なく、一通りの情報が得られる
- スマートフォンでの流し読みに適している
- 更新頻度の低い短期決戦型キャンペーンサイトに適している
スマートフォンでの閲覧が主流となり、Webページは「情報量が多い」ということよりも、「厳選・シンプルに要点を伝える」ということが重視されるようになりました。Webでの情報発信はすべてのモノ・コトに必須の活動となり、次々に新しいサイトを作り出さなければならない時代になっている・・ということが、シングルページ流行の背景にあります。
基本サンプル
- １ページ内に４つのセクションを作っています。
- 横並びレイアウトに CSS3 の Flexbox を使っています。
- ヘッダーをウインドウトップに固定しているため、そのままだとジャンプ先の位置ズレが生じます。それを解消するため、スムーズスクロールを使って 160ピクセル分オフセットさせています。
- jQuery は CDN を利用して読み込んでいます 。
レスポンシブ
ハンバーガーアイコンをCSSでアニメーションさせています。