ページが開いたときに、画面が暗くなって、クルっと回るアニメーションが表示される「ローディング画面」を作る方法をお伝えします。
具体的には、このページを開いたときに表示された「ローディング画面」です。
（もう一度見るには、ここをクリックしてみてください）
もしくは、こちらのページ を見ていただくと、別ウインドウで確認できますよ。
このような、クルっと回るアニメーションの「ローディング画面」を作る方法をお伝えしますね。（コピペのみでできます）
■ クルっと回るアニメーションで「ローディング画面」を作る方法の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：ローディング画面を表示したいページの <body>タグの真下に、下記のソースを入れる。
↑上記の枠内のソースをすべてコピーして、<body>タグの真下に貼り付けてください。
|
手順３：上記のソースを入れたページを開いて、ローディング画面が表示されることを確認する。
上記のソースを入れたページ（たとえば index.htmlのページ）を開いて、こちらのページのような、クルっと回るアニメーションの「ローディング画面」が表示されたら、確認作業は完了です。
■【カスタマイズ方法】背景の色を変える方法
「ローディング画面」の背景の色（現在は黒色）を、別の色に変更したい場合は、
CSSファイル（style.css）に貼り付けたソースの中に、「background:#333333;」という記述があるので、この箇所を変更することで色を変えることができます。
たとえば、背景の色をネイビーブルーにしたい場合は、「background:#2C3E50;」にするという形ですね。
ほかにも、ダークグリーン（#344E41）やディープパープル（#3B3B58）、ダークシアン（#005566）などが、おすすめですよ。
■【注意点】ローディング画面のデメリットについて
この「ローディング画面」は、おしゃれに見えますが、ページがすぐに表示されない（2秒くらい待たないといけない）ので、多少のストレスを感じる人もいるかもしれません。
もちろん、ローディング画面が表示されたあとに、すぐにホームページが表示されていくので、ほとんどの人にとっては問題ありませんが、念のため、デメリット部分も知っておいてくださいね。
なお、この「ローディング画面」を入れるのは、「トップページのみ」にしておいた方が良いと思います。
トップページ以外の個別ページについては、ローディング画面を入れる必要がないので、トップページのみにしましょうね。
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
