数字がカウントアップされる「ローディング画面」の作り方

ページが開いたときに、画面が暗くなって、数字がカウントアップされる「ローディング画面」の作り方をお伝えします。

具体的には、このページを開いたときに表示された「ローディング画面」です。
（もう一度見るには、ここをクリックしてみてください）

もしくは、こちらのページ を見ていただくと、別ウインドウで確認できますよ。

このような、数字がカウントアップされる「ローディング画面」の作り方をお伝えしますね。（コピペのみでできます）

■ 数字がカウントアップされる「ローディング画面」の作り方の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：ローディング画面を表示したいページの <body>タグの真下に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、<body>タグの真下に貼り付けてください。

手順３：上記のソースを入れたページを開いて、ローディング画面が表示されることを確認する。

上記のソースを入れたページ（たとえば index.htmlのページ）を開いて、こちらのページのような、数字がカウントアップされる「ローディング画面」が表示されたら、確認作業は完了です。

■【カスタマイズ方法】背景の色を変える方法

「ローディング画面」の背景の色（現在は黒色）を、別の色に変更したい場合は、 CSSファイル（style.css）に貼り付けたソースの中に、「background:#323232;」という記述があるので、この箇所を変更することで色を変えることができます。

たとえば、背景の色をネイビーブルーにしたい場合は、「background:#2C3E50;」にするという形ですね。

ほかにも、ダークグリーン（#344E41）やディープパープル（#3B3B58）、ダークシアン（#005566）などが、おすすめですよ。

■【注意点】ローディング画面のデメリットについて

この「ローディング画面」は、おしゃれに見えますが、ページがすぐに表示されない（2秒くらい待たないといけない）ので、多少のストレスを感じる人もいるかもしれません。

もちろん、数字がカウントアップされているため、ほとんどの人にとっては問題ありませんが、念のため、デメリット部分も知っておいてくださいね。

なお、この「ローディング画面」を入れるのは、「トップページのみ」にしておいた方が良いと思います。

トップページ以外の個別ページについては、ローディング画面を入れる必要がないので、トップページのみにしましょうね。