企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。Nexus5サイトでの例)大きな文字や画像を使って、1画面単位でスクロールして見せるページがよくあります。企業の製品紹介サイトなどで、特によく見かけるのではないでしょうか。右図のページでは、右下に常に見える下向き矢印をクリックすることで1画面ずつスクロールし、次々に情報や画像が表示されます。このような感じの「1画面単位でスクロールしていく」ページを作ってみましょう。この種のサイトでは、パララックス(視差)効果を使った複雑なページも見かけますが、ここではただ「1画面分ずつスクロールするだけ」のシンプルなページを作ります。Link」があります。右図は、配布サイトにあるデモページです。メニューバーや画面下部の矢印をクリックすると、1画面単位で滑らかにスクロールして表示内容が切り替わります。このスクリプト(jQueryプラグイン)は、簡単に言えば「リンクをクリックすると、指定のボックスまで滑らかにスクロールする」という単純なものです。シンプルな分、読み込むスクリプトは軽量(約0.7KB)で、記述するHTMLも短いソースで済みます。1画面単位でスクロールして見せるサンプルページ本記事でサンプルとして作成したページは、下図の通りです。閲覧者のウインドウサイズがどれくらいであっても、必ず「1画面分」の高さが確保されるように作成しています。本記事で作成するサンプルページ上図のサンプルページでは、画面上部に固定されたメニュー項目や、各ページ下部にある矢印リンクをクリックすると、大きくスクロールして1画面単位で閲覧ができます。このサンプルページを実際にブラウザで表示してみるには、以下のサンプルページをご覧下さい。Link」の設置方法と使い方、カスタマイズ方法などについてを1ステップずつ解説致します。Link」を使ったページ作成方法を順に見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。