数分でスクロールスナップのウェブサイトを作成 - fullPage.js（超簡単！）

![fullPage](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/videos/demos/divi-overview.gif "fullPage.js")

もし、モダンで美しいウェブサイトを超速で作りたいなら、fullPage.jsをチェックしてみてください。

fullPage.jsはJavaScriptライブラリで、React、Vue、Angular用のバージョンもあり、わずか数分で全画面のスクロールスナップサイトを作成できます。

[こちらが例です](https://alvarotrigo.com/fullPage/ja/)。でも、それだけじゃありません。すべての機能を知りたいなら、[もっと多くの例](https://alvarotrigo.com/fullPage/examples)もチェックしてみてください。

では、fullPage.jsの使い方を簡単に説明しましょう。

## **何を創るのでしょうか？**

このチュートリアルでは、4つのセクションがあるページを作成します。

3つは全画面で表示され、最後のセクションはフッターで、画面全体の高さを占めないようにします。

やることは以下の通りです：

-   右側にバレットナビゲーションを追加
-   各セクションに異なるURLハッシュを追加（#home、#about-usなど）
-   ページのヘッダーに固定ボタンを追加し、クリックするとコンタクトページまでスクロールできるようにする
-   小画面デバイスではスナップスクロール効果と全画面表示を無効化
-   大量のコンテンツがあるスクロール可能なセクションを作成

## **ページの基本構造を作成**

まずは、[必要なHTML構造](https://alvarotrigo.com/fullPage/docs/ja/#required-html-structure)を作成します。

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div id="fullpage">
       <div class="section">Section 1</div>
       <div class="section">Section 2</div>
       <div class="section">Section 3</div>
       <div class="section">Section 4</div>
   </div>
</body>
</html> 
```

基本的に、IDが「fullpage」の“div”を追加し、これを後ほどfullPage.jsの初期化で使用します。

内部には4つの空のセクションを追加しました。

各セクションは「section」クラスを使用しています。これは、fullPage.jsがセクションとして定義するために使用する[デフォルトのセレクター](https://alvarotrigo.com/fullPage/docs/ja/#sectionselector)です。

**注意**: 'DOCTYPE'を追加しないと、[問題が発生すること](https://github.com/alvarotrigo/fullPage.js/issues/507)があるので忘れずに追加してください。

## **必要なファイルを含める**

必要なファイルを2つ追加します：

-   Fullpage CSSファイル (fullpage.min.css)
-   Fullpage JSファイル (fullpage.min.js)

今回は、[https://www.jsdelivr.com/package/npm/fullpage.js](https://www.jsdelivr.com/package/npm/fullpage.js)のようなCDNからこれらを読み込みます。

ページの'<head>'タグ内にCSSファイルを、閉じる'</body>'タグの直前にJSファイルを含めます：

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link href="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.css" rel="stylesheet">
</head>
<body>
   <div id="fullpage">
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.js"></script>
</body>
</html>
``` 

## **初期化**

必要なものがすべて揃ったので、fullPage.jsを初期化して魔法を起こしましょう。

そのためには、インポートしたfullpage.min.jsファイルの後に`<script>`タグを追加する必要があります。

```html
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.js"></script>
<script> new fullpage('#fullpage', {
       //options here
       sectionsColor: ['red', 'orange', 'blue', 'yellow']
   });
</script>
``` 

最もシンプルな初期化方法を使用しましたが、プラグインには多くのオプションがあり、[公式ドキュメント](https://alvarotrigo.com/fullPage/docs/ja/#options)で確認できます。

今回はテストのために、セクションに背景色を追加しました。

これで、全画面のスクロールスナップページが完成しました！

結果はこちら：  
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNXWBGj" data-pen-title="Tutorial 1" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/rNXWBGj">
  Tutorial 1</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

そして、こちらがHTML全体のコードです：

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link href="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.css" rel="stylesheet">
</head>
<body>
   <div id="fullpage">
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.js"></script>
   <script> new fullpage('#fullpage', {
           //options here
           sectionsColor: ['red', 'orange', 'blue', 'yellow']
       }); </script>
</body>
</html>
``` 

すごいですね！ たった2分で、基本的なスクロールスナップサイトが作れました！

では、他の詳細について見ていきましょう。

## **準備完了**

テキストが水平に中央揃えされていないことや、少し小さいことに気づいたかもしれませんが、これはCSSで解決できます。

```css
.section{
    font-size: 6em;
    text-align: center;
    font-weight: bold;
}
```

## **全画面でないセクションの定義**

前のセクションでフッターを追加したかったことを覚えていますか?

これは非常に簡単です。「fp-auto-height」というクラス属性を追加して、fullPage.jsにそのセクションが全画面にならないことを伝えるだけです。

今回は、最後のセクションにこの属性を追加します：

```html
<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  <div class="section fp-auto-height">Section 4</div>
</div>
``` 

これで全画面でないフッターが完成しました！ チェックしてみてください：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRVNKQz" data-pen-title="Tutorial 2" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/GRVNKQz">
  Tutorial 2</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## **ナビゲーションバレットの追加**

ナビゲーションを簡単にするために、ナビゲーションバレットやメニューを追加するのは良いアイデアです。

今回は、fullPage.jsが提供するナビゲーションバレットを使用します。

初期化時に「navigation」オプションを使用するだけです：

```js
new fullpage('#fullpage', {
   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
   navigation: true
});
```

これで完了です！

次に、ナビゲーションを白くするために、デフォルトのスタイルを上書きします：

```css
/* ナビゲーションドットのスタイルを上書き */
#fp-nav ul li a span{
    background: white;
}
```

素晴らしいですね！ 結果を確認してみましょう：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWeGLxb" data-pen-title="Tutorial 3" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/QWeGLxb">
  Tutorial 3</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## **スクロール可能なセクションの作成**

「長いテキストを持つセクションがある場合、スクロールスナップサイトはどうなるの？」と思うかもしれません。

心配無用です。fullPage.jsはこうした問題にも対応しているので、何も心配する必要はありません。

次に、2番目のセクションに非常に長いテキストを追加してみましょう：

```html
<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
  </div>
  <div class="section">Section 3</div>
  <div class="section fp-auto-height">Section 4</div>
</div>
```

セクションに大きなフォントを使用しているため、このテキストはビューポートの高さを超えるはずです。

さて、どうなるか見てみましょう：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYwbPJm" data-pen-title="Tutorial 4" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/LYwbPJm">
  Tutorial 4</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

驚きですね！何もしなくても、ページは期待通りに動作します。

2番目のセクションに到達すると、内容がスクロール可能になり、テキストの最後までスクロールした後に次のセクションに進みます。

## **URLハッシュの追加**

各セクションに異なるURLを持たせるために「ハッシュ」（#）を使用すると、ページのナビゲーション時にコンテキストを提供するだけでなく、特定のセクションをリンクで共有することも可能です。

URLハッシュ（アンカー）を追加するのは、初期化時にそのアンカーを含む配列を追加するだけで非常に簡単です。

```js
new fullpage('#fullpage', {
   anchors: ['home', 'about-us', 'page3', 'footer'],
   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
   navigation: true,
   continuousVertical: true
});
``` 

または、各セクションに「data-anchor」属性を使用してもOKです。

ページにアクセスすると、上下にナビゲートするたびにURLが変わるのがわかるでしょう。すごいですね！

**注意**：data-anchorタグの値は、サイト上の任意のIDや（IEではNAME）要素と同じにしてはいけません。

## **セクションへのリンクの作成**

次に、クリックするとフッターセクションまでスクロールする固定ボタンをページに追加しましょう。

fullPage.jsの要素の前にボタン要素を追加します：

```html
<div class="button">Footer</div>  
<div id="fullpage">  
  ....
``` 

しかし、<div>ではなく、最後のアンカー（「footer」の値を使用）にリンクする要素を追加しましょう。

```html
<a href="#footer" class="button">Footer</a>  
<div id="fullpage">  
  ....
``` 

これで、最後のセクションへのリンクが作成されました。あとは固定ボタンのスタイルを追加するだけです。

CSSに追加しましょう：

```css
.button{
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 999;
  background: white;
  border-radius: 10px;
  padding: 10px;
}
``` 

これで、最後のセクションまでスクロールするリンクが完成しました。美しいですね！

デモはこちら：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJKbLBK" data-pen-title="Tutorial 5" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/OJKbLBK">
  Tutorial 5</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## **レスポンシブモードを有効にする**

最後に、レスポンシブ対応を行います。

小画面デバイスではスクロールスナップ効果を無効にしてみましょう。コンテンツがビューポートに収まらない場合、複数のスクロール可能なセクションがあるのは避けたいでしょう。

['responsiveWidth'](https://alvarotrigo.com/fullPage/docs/ja/#responsivewidth)オプションを使用します。今回は、幅が900px未満のデバイスでfullPageのスナップ効果を無効にします。

初期化時に「responsiveWidth: 900」を追加します：

```js
new fullpage('#fullpage', {
   anchors: ['home', 'about-us', 'page3', 'footer'],
   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
   navigation: true,
   responsiveWidth: 900
});
```

そして、これで完了です！これで、ページはスナップ効果を無効にし、必要に応じて各セクションを大きくして内部スクロールを回避します。

以下のリンクで、ビューポートの幅を900px未満にリサイズしてテストすることができます：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGXBNVa" data-pen-title="Tutorial 6" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/bGXBNVa">
  Tutorial 6</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## **結論**

数分で、このような美しいスナップ効果を持つページを作成できました。ナビゲーションのドット、URLのハッシュ、レスポンシブ対応、内部リンクなど、ページをよりナビゲートしやすくする細かいディテールも追加されています。

そして、これは始まりに過ぎません！fullPage.jsを使えば、サイトをさらにカスタマイズすることができます。

-   セクションの出入り時にCSSアニメーションを追加できます（[例](https://alvarotrigo.com/fullPage/examples/#animations)）。
-   スクロールに応じてビデオアニメーションをトリガーできます（[例](https://alvarotrigo.com/fullPage/examples/#play-video-on-scroll)）。
-   視聴者に強い印象を与えるビデオ背景を追加できます（[例](https://alvarotrigo.com/fullPage/examples/#video-backgrounds)）。
-   パララックス効果を追加できます（[例](https://alvarotrigo.com/fullPage/examples/#parallax-effect)）。

その他、さまざまな機能があります！

fullPage.jsの例のリストを確認して、さらにアイデアを得てください：[fullPage.jsの例一覧](https://alvarotrigo.com/fullPage/examples/)。

質問があれば、[Github Issuesフォーラム](https://github.com/alvarotrigo/fullPage.js)で尋ねるか、[お問い合わせフォーム](https://alvarotrigo.com/contact/)を通じて直接連絡してください。その前に、[fullPage.jsのドキュメント](https://alvarotrigo.com/fullPage/docs/ja/)で検索することをお勧めします。