[CSS]setTimoutカウンターアプリのUIを実装する

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、カウンターアプリのUIを実装します。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

JavaScript版

[JavaScript]setTimoutでカウンター処理を実装する

HTML & JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Increment Counter</title>
  </head>
  <body>
    <div class="counter-container">
      <i class="fab fa-twitter fa-3x"></i>
      <div class="counter" data-target="12000"></div>
      <span>Twitter Followers</span>
    </div>

    <div class="counter-container">
      <i class="fab fa-youtube fa-3x"></i>
      <div class="counter" data-target="5000"></div>
      <span>YouTube Subscribers</span>
    </div>

    <div class="counter-container">
      <i class="fab fa-facebook fa-3x"></i>
      <div class="counter" data-target="7500"></div>
      <span>Facebook Fans</span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Increment Counter</title>

</head>

<body>

<span>Twitter Followers</span>

</div>

<span>YouTube Subscribers</span>

</div>

<span>Facebook Fans</span>

</div>

</body>

</html>

// 要素を取得する
const counters = document.querySelectorAll('.counter')

// 取得した要素分だけループする
counters.forEach(counter => {
  // カウンターの初期値
  counter.innerText = '0'

  // カウンター更新
  const updateCounter = () => {
    // 属性の取得
    const target = +counter.getAttribute('data-target')

    // counter値(0)を格納
    const c = +counter.innerText

    // カウント
    const increment = target / 200
    // targetは最大カウント数
    if(c < target) {
      // 四捨五入する(37.8 -> 38にする)
      counter.innerText = `${Math.ceil(c + increment)}`
      // 1msごとにupdateCouunterをストップ
      setTimeout(updateCounter, 1)
    } else {
      // 最大値を超えた場合は、最大値を設定
      counter.innerText = target
    }
  }

  updateCounter()
})

// 要素を取得する

const counters = document.querySelectorAll('.counter')

// 取得した要素分だけループする

counters.forEach(counter => {

// カウンターの初期値

counter.innerText = '0'

// カウンター更新

const updateCounter = () => {

// 属性の取得

const target = +counter.getAttribute('data-target')

// counter値(0)を格納

const c = +counter.innerText

// カウント

const increment = target / 200

// targetは最大カウント数

if(c < target) {

// 四捨五入する(37.8 -> 38にする)

counter.innerText = `${Math.ceil(c + increment)}`

// 1msごとにupdateCouunterをストップ

setTimeout(updateCounter, 1)

} else {

// 最大値を超えた場合は、最大値を設定

counter.innerText = target

}

updateCounter()

})

スタイリング

スタイリングを実装します。項目に出てくるbodyやcounterは、HTMLの要素です。

全体の設定

全体の設定をします。

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");

* {
  /*
    ボックスサイズの算出
    paddingとborderをwidthとheightに含める
  */
  box-sizing: border-box;
}

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");

* {

ボックスサイズの算出

paddingとborderをwidthとheightに含める

box-sizing: border-box;

}

bodyの設定

bodyの設定をします。

body {
  background-color: #8e44ad;
  color: #fff;
  font-family: "Roboto Mono", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flex重点の真ん中に要素を配置 */
  align-items: center;
  /* flex横軸中央に配置 */
  justify-content: center;
  /* ページビュー縦100% */
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

body {

background-color: #8e44ad;

color: #fff;

font-family: "Roboto Mono", sans-serif;

/* flexアイテムにする */

display: flex;

/* flex重点の真ん中に要素を配置 */

align-items: center;

/* flex横軸中央に配置 */

justify-content: center;

/* ページビュー縦100% */

height: 100vh;

overflow: hidden;

margin: 0;

}

counter-containerの設定

counter-containerのをします。

.counter-container {
  display: flex;
  /* flexアイテムを重なり合うように配置 */
  flex-direction: column;
  justify-content: center;
  /* テキスト中央 */
  text-align: center;
  margin: 30px 50px;
}

.counter-container {

display: flex;

/* flexアイテムを重なり合うように配置 */

flex-direction: column;

justify-content: center;

/* テキスト中央 */

text-align: center;

margin: 30px 50px;

}

counterの設定

counterの設定をします。

.counter {
  font-size: 60px;
  margin-top: 10px;
}

.counter {

font-size: 60px;

margin-top: 10px;

}

メディアクエリの設定

メディアクエリの設定をします。

/* 580px以下の時 */
@media (max-width: 580px) {
  body {
    /* flexアイテムを縦に配置を */
    flex-direction: column;
  }
} ;

/* 580px以下の時 */

@media (max-width: 580px) {

body {

/* flexアイテムを縦に配置を */

flex-direction: column;

}

} ;

これで、完成です。

おわりに

メディアクエリを使うとレスポンシブルウェブサイトが作れて便利ですよね。
まぁ、この辺りはBootstrapを導入すれば割と簡単に実装できたりしますが、仕組みを知る上で自分でも実装できると良いと思います^^

それでは、また！

CSSまとめ

CSS学習記事まとめ

CSSソースコード

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");

* {
  /*
    ボックスサイズの算出
    paddingとborderをwidthとheightに含める
  */
  box-sizing: border-box;
}

body {
  background-color: #8e44ad;
  color: #fff;
  font-family: "Roboto Mono", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flex重点の真ん中に要素を配置 */
  align-items: center;
  /* flex横軸中央に配置 */
  justify-content: center;
  /* ページビュー縦100% */
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.counter-container {
  display: flex;
  /* flexアイテムを縦に配置 */
  flex-direction: column;
  justify-content: center;
  /* テキスト中央 */
  text-align: center;
  margin: 30px 50px;
}

.counter {
  font-size: 60px;
  margin-top: 10px;
}

/* 580px以下の時 */
@media (max-width: 580px) {
  body {
    /* flexアイテムを縦に配置を */
    flex-direction: column;
  }
} ;

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");

* {

ボックスサイズの算出

paddingとborderをwidthとheightに含める

box-sizing: border-box;

}

body {

background-color: #8e44ad;

color: #fff;

font-family: "Roboto Mono", sans-serif;

/* flexアイテムにする */

display: flex;

/* flex重点の真ん中に要素を配置 */

align-items: center;

/* flex横軸中央に配置 */

justify-content: center;

/* ページビュー縦100% */

height: 100vh;

overflow: hidden;

margin: 0;

}

.counter-container {

display: flex;

/* flexアイテムを縦に配置 */

flex-direction: column;

justify-content: center;

/* テキスト中央 */

text-align: center;

margin: 30px 50px;

}

.counter {

font-size: 60px;

margin-top: 10px;

}

/* 580px以下の時 */

@media (max-width: 580px) {

body {

/* flexアイテムを縦に配置を */

flex-direction: column;

}

} ;

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

[CSS]setTimoutカウンターアプリのUIを実装する

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

counter-containerの設定

counterの設定

メディアクエリの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

counter-containerの設定

counterの設定

メディアクエリの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Bootstrap~記事まとめ~

CSSでカスタムレンジスライダーをスタイリングしよう!

[NextJS]~Checkout画面:ソースコードをまとめます!~

JavaScriptでかっこいいスライド画面を作ろう!

Django開発~ブログ構築編4~サイトマップ

[Golang]Factory Methodパターンを学ぼう!~Versio…

[React]~Ambassador画面5:StatsとRankingの実装…

[Golang]アルゴリズムにチャレンジ ~検索エンジンを実装しよう!~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル