超簡単!?たった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を自分で作るのも好きですが、時間がないときはサクッと作れる方法に限りますね!
カスタマイズ性もかなり高いプラグインなので、ぜひ使ってみてください♪

関連記事はこちら

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

×