Updateリッチなコンテンツを求められるウェブサイトの場合はクライアント側で動きのある機能が効果的です。その中でも比較的よく見かけるのがページローディング機能です。ページの読み込み次第ではどうしても表示順序がバラバラになってしまうのでちょっと不恰好な印象を与えてしまう可能性もあります。そこでページの読み込みの間にローディング画像を加えることで、すべて読み込みが終わってページコンテンツが揃った状態で表示できるのと、動きのある機能を加えることで洗練された印象を与えることができます。コードを見ていきたいと思います。HTMLから、ページローディングの要素は最初に持ってきます。その後にメインのコンテンツが続きます。ページローディングの構成ですが、全体を覆うラッパー要素とその中にローディング中を示すアイコンを入れています。こちらについてはデザインによって適宜アレンジするのもいいかと思います。--></div>ちなみに今回使用したローディングアイコンですが「Loaders.css」というのを採用しました。すべてCSSで作られており、実装やカスタマイズも簡単でいろんなパターンが用意されているのでオススメです!【Loaders.css】https://connoratherton.com/loadersこのLoaders.cssを使用するには専用のCSSファイルを次のようにインクルードする必要があります。詳しくは上記の公式サイトをご覧ください。type="text/css">今回はこのようなCSSのローディングアイコンを使用しましたが、gifアニメの画像アイコンなどデザインに合わせて用意するのもOKです。次にCSSですが、ページローディングのラッパー要素を画面を含むページ全体に表示されるようにします。こちらのサンプルではアイコンが常に中央に配置されているようにしていますが、デザインに合わせて適宜調整します。middle;}最後にjQureyで表示の動きをつけていきます。こちらはとてもシンプルで、ページのロードが完了したタイミングでページローディング画面をフェードアウトさせるという動きです。念のため、読み込みがなかなか終わらないケースを想定して、一定時間で強制的にフェードアウトさせるようにしておくのもいいかと思います。setTimeout(loaderClose,10000);});いかがでしょうか、結構簡単に実装できますのでオススメです。ページローディングが消えるエフェクトですが、今回はフェードアウトを採用していますがこの辺りをこだわってみるのも面白いかと思います。今回のサンプルはこちらに用意していますのでまたご覧ください。ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちらデザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。コメントをキャンセル記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。メールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。javascriptで配列を扱う時によく使うメソッド#10【配列を文字列にする・多次元配列をフラットにする。