X
  1. TOP
  2. 超簡単!?たった15分でカウントダウンを作成する方法
2024.06.18

超簡単!?たった15分でカウントダウンを作成する方法

数字はなんとなく奇数が好きなコーダー、オガワです!

最近作ったLPに、お店のオープン日までの日数をカウントダウンで表示させることがあり、どうにかサクッと作れないものか…と思っていたら、すごく簡単に作れる方法を発見しました!

今回はその方法をご紹介します!

超簡単に使えるjQueryプラグイン「Flip counter」

調べてたどり着いた超簡単な方法とは、Flip counterというjQueryのプラグインを使う方法です!

公式サイトからプラグインをDL、または下記CDNをコピペで貼り付けるだけで使うことができます。
表示させるためのコードも公式サイトからコピペができるので、自分で書く部分はほとんどありません!

<!-- CSS -->
<link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
<!-- js -->
<script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>

作り方

公式サイトのDEMOページでざっくり見た目を整えた後、「CODE」ボタンを押します。
ボタンを押すと必要なHTML / CSS / jsのコードが表示されるため、それをコピぺ&サイトに合わせて微調整をするだけでカウントダウンの完成です!!

ね、簡単でしょ?笑

実際に作ってみた

実際に作ってみたものがこちら!

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

DEMOの設定で見た目をアレンジ&表記がデフォルトでは英語なので日本語に変えてみました。
ちゃちゃっと色の指定を触っただけなので、作ったのにかかった時間は15分程度…!

フォントサイズの設定をあまり触らなければ、レスポンシブはそのままでOK!
凝った動きでもこれだけ簡単に作れると、いろんなサイトに入れてみたくなっちゃいますね✨

まとめ

jsを自分で作るのも好きですが、時間がないときはサクッと作れる方法に限りますね!
カスタマイズ性もかなり高いプラグインなので、ぜひ使ってみてください♪

関連記事はこちら

超簡単!?たった15分でカウントダウンを作成する方法
超簡単!?たった15分でカウントダウンを作成する方法
超簡単!?たった15分でカウントダウンを作成する方法
超簡単!?たった15分でカウントダウンを作成する方法
超簡単!?たった15分でカウントダウンを作成する方法
超簡単!?たった15分でカウントダウンを作成する方法

この記事をシェアする

関連記事

おすすめ記事

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

© 2020 spiqa design

×