CSSでDrinkWaterアプリのスタイリングをしよう!

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

1

2

3

4

5

6

$ tree

.

├── index.html

├── script.js

└── style.css

<!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="style.css" />
    <title>Drink Water</title>
  </head>
  <body>
    <h1>Drink Water</h1>
    <h3>Goal: 2 Liters</h3>

    <div class="cup">
      <div class="remained" id="remained">
        <span id="liters"></span>
        <small>Remained</small>
      </div>

      <div class="percentage" id="percentage"></div>
    </div>

    <p class="text">Select how many glasses of water that you have drank</p>

    <div class="cups">
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
      <div class="cup cup-small">250 ml</div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

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

32

33

34

35

36

37

<!DOCTYPE html>

<head>

<title>Drink Water</title>

</head>

<body>

<h1>Drink Water</h1>

<h3>Goal: 2 Liters</h3>

<small>Remained</small>

</div>

</div>

<p class="text">Select how many glasses of water that you have drank</p>

</div>

</body>

</html>

// 要素を取得する
const smallCups = document.querySelectorAll('.cup-small')
const liters = document.getElementById('liters')
const percentage = document.getElementById('percentage')
const remained = document.getElementById('remained')

// ループ処理
smallCups.forEach((cup, idx) => {
  // クリックイベントを登録
  cup.addEventListener('click', () => highlightCups(idx))
})

// smallCupをハイライトする
function highlightCups(idx) {
  // ハイライトを解除
  if (idx===7 && smallCups[idx].classList.contains("full")) idx--
  if(smallCups[idx].classList.contains('full') &&
    !smallCups[idx].nextElementSibling.classList.contains('full')) {
    idx--
  }
  smallCups.forEach((cup, idx2) => {
    if(idx2 <= idx) {
      // 指定したidxより前の全てのsmallCupにfullクラスをつける
      cup.classList.add('full')
    } else {
      // 指定したidxより後の全てのsmallCupからfullクラスを除去する
      cup.classList.remove('full')
    }
  })

  // BigCupをアップデート
  updateBigCup()
}

// BigCup要素のアップデート
function updateBigCup(){
  // fullクラスがついた要素数を取得
  const fullCups = document.querySelectorAll('.cup-small.full').length
  // smallCupsの要素数を取得(8)
  const totalCups = smallCups.length

  if(fullCups === 0) {
    // パーセンテージ要素を消す
    percentage.style.visibility = 'hidden'
    // パーセンテージ要素の高さを0
    percentage.style.height = 0
  } else {
    // パーセンテージ要素を表示
    percentage.style.visibility = 'visible'
    // パーセンテージ要素の高さを設定
    percentage.style.height = `${fullCups / totalCups * 330}px` // cssの.cupのheightを掛ける
    percentage.innerText = `${fullCups / totalCups * 100}%`
  }

  // 100%になった時の処理
  if(fullCups === totalCups) {
    // remained文字を消す
    remained.style.visibility = 'hidden'
    remained.style.height = 0
  } else {
    // remained文字を表示
    remained.style.visibility = 'visible'
    liters.innerText = `${2 - (250 * fullCups / 1000)}L`
  }
}

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

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

// 要素を取得する

const smallCups = document.querySelectorAll('.cup-small')

const liters = document.getElementById('liters')

const percentage = document.getElementById('percentage')

const remained = document.getElementById('remained')

// ループ処理

smallCups.forEach((cup, idx) => {

// クリックイベントを登録

cup.addEventListener('click', () => highlightCups(idx))

})

// smallCupをハイライトする

function highlightCups(idx) {

// ハイライトを解除

if (idx===7 && smallCups[idx].classList.contains("full")) idx--

if(smallCups[idx].classList.contains('full') &&

!smallCups[idx].nextElementSibling.classList.contains('full')) {

idx--

}

smallCups.forEach((cup, idx2) => {

if(idx2 <= idx) {

// 指定したidxより前の全てのsmallCupにfullクラスをつける

cup.classList.add('full')

} else {

// 指定したidxより後の全てのsmallCupからfullクラスを除去する

cup.classList.remove('full')

}

})

// BigCupをアップデート

updateBigCup()

}

// BigCup要素のアップデート

function updateBigCup(){

// fullクラスがついた要素数を取得

const fullCups = document.querySelectorAll('.cup-small.full').length

// smallCupsの要素数を取得(8)

const totalCups = smallCups.length

if(fullCups === 0) {

// パーセンテージ要素を消す

percentage.style.visibility = 'hidden'

// パーセンテージ要素の高さを0

percentage.style.height = 0

} else {

// パーセンテージ要素を表示

percentage.style.visibility = 'visible'

// パーセンテージ要素の高さを設定

percentage.style.height = `${fullCups / totalCups * 330}px` // cssの.cupのheightを掛ける

percentage.innerText = `${fullCups / totalCups * 100}%`

}

// 100%になった時の処理

if(fullCups === totalCups) {

// remained文字を消す

remained.style.visibility = 'hidden'

remained.style.height = 0

} else {

// remained文字を表示

remained.style.visibility = 'visible'

liters.innerText = `${2 - (250 * fullCups / 1000)}L`

}

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap");

/* 定数 */
:root {
  --border-color: #144fc6;
  --fill-color: #6ab3f8;
}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap");

/* 定数 */

:root {

--border-color: #144fc6;

--fill-color: #6ab3f8;

}

* {

/* ボックスサイズの算出

paddingとborderをwidthとheightに含める */

box-sizing: border-box;

}

body {
  background-color: #3494e4;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを縦に重なるように配置 */
  flex-direction: column;
  /* flex重点の真ん中に配置 */
  align-items: center;
  margin-bottom: 40px;
}

1

2

3

4

5

6

7

8

9

10

11

12

body {

background-color: #3494e4;

color: #fff;

font-family: "Montserrat", sans-serif;

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

display: flex;

/* flexアイテムを縦に重なるように配置 */

flex-direction: column;

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

align-items: center;

margin-bottom: 40px;

}

h1 {
  /* 上 | 左右 | 下 */
  margin: 10px 0 0;
}

1

2

3

4

h1 {

/* 上 | 左右 | 下 */

margin: 10px 0 0;

}

h3 {
  font-weight: 400;
  /* 上下 | 左右 */
  margin: 10px 0;
}

1

2

3

4

5

h3 {

font-weight: 400;

/* 上下 | 左右 */

margin: 10px 0;

}

.cup {
  background-color: #fff;
  border: 4px solid var(--border-color);
  color: var(--border-color);
  border-radius: 0 0 40px 40px;
  height: 330px;
  width: 150px;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

1

2

3

4

5

6

7

8

9

10

11

12

.cup {

background-color: #fff;

border: 4px solid var(--border-color);

color: var(--border-color);

border-radius: 0 0 40px 40px;

height: 330px;

width: 150px;

margin: 30px 0;

display: flex;

flex-direction: column;

overflow: hidden;

}

.cup.cup-small {
  height: 95px;
  width: 50px;
  border-radius: 0 0 15px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 5px;
  /* アニメーション */
  transition: 0.3 ease;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.cup.cup-small {

height: 95px;

width: 50px;

border-radius: 0 0 15px 15px;

background-color: rgba(255, 255, 255, 0.9);

cursor: pointer;

font-size: 14px;

align-items: center;

justify-content: center;

text-align: center;

margin: 5px;

/* アニメーション */

transition: 0.3 ease;

}

.cup.cup-small.full {
  background-color: var(--fill-color);
  color: #fff;
}

1

2

3

4

.cup.cup-small.full {

background-color: var(--fill-color);

color: #fff;

}

.cups {
  display: flex;
  /* flexアイテムを複数行に分割して配置 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 280px;
}

1

2

3

4

5

6

7

8

.cups {

display: flex;

/* flexアイテムを複数行に分割して配置 */

flex-wrap: wrap;

align-items: center;

justify-content: center;

width: 280px;

}

.remained {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* フレックスアイテムをフレックスコンテナーの
  領域に収めるために、どのように伸長・収縮させるかを指定 */
  flex: 1;
  transition: 0.3s ease;
}

1

2

3

4

5

6

7

8

9

10

11

.remained {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

/* フレックスアイテムをフレックスコンテナーの

領域に収めるために、どのように伸長・収縮させるかを指定 */

flex: 1;

transition: 0.3s ease;

}

.remained span {
  font-size: 20px;
  font-weight: bold;
}

1

2

3

4

.remained span {

font-size: 20px;

font-weight: bold;

}

.remained small {
  font-size: 12px;
}

1

2

3

.remained small {

font-size: 12px;

}

.percentage {
  background-color: var(--fill-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  height: 0;
  transition: 0.3 ease;
}

1

2

3

4

5

6

7

8

9

10

.percentage {

background-color: var(--fill-color);

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

font-size: 30px;

height: 0;

transition: 0.3 ease;

}

.text {
  text-align: center;
  margin: 0 0 5px;
}

1

2

3

4

.text {

text-align: center;

margin: 0 0 5px;

}

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap");

/* 定数 */
:root {
  --border-color: #144fc6;
  --fill-color: #6ab3f8;
}

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

body {
  background-color: #3494e4;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを縦に重なるように配置 */
  flex-direction: column;
  /* flex重点の真ん中に配置 */
  align-items: center;
  margin-bottom: 40px;
}

h1 {
  /* 上 | 左右 | 下 */
  margin: 10px 0 0;
}

h3 {
  font-weight: 400;
  /* 上下 | 左右 */
  margin: 10px 0;
}

.cup {
  background-color: #fff;
  border: 4px solid var(--border-color);
  color: var(--border-color);
  border-radius: 0 0 40px 40px;
  height: 330px;
  width: 150px;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cup.cup-small {
  height: 95px;
  width: 50px;
  border-radius: 0 0 15px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 5px;
  /* アニメーション */
  transition: 0.3 ease;
}

.cup.cup-small.full {
  background-color: var(--fill-color);
  color: #fff;
}

.cups {
  display: flex;
  /* flexアイテムを複数行に分割して配置 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 280px;
}

.remained {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* フレックスアイテムをフレックスコンテナーの
  領域に収めるために、どのように伸長・収縮させるかを指定 */
  flex: 1;
  transition: 0.3s ease;
}

.remained span {
  font-size: 20px;
  font-weight: bold;
}

.remained small {
  font-size: 12px;
}

.percentage {
  background-color: var(--fill-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  height: 0;
  transition: 0.3 ease;
}

.text {
  text-align: center;
  margin: 0 0 5px;
}

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

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap");

/* 定数 */

:root {

--border-color: #144fc6;

--fill-color: #6ab3f8;

}

* {

/* ボックスサイズの算出

paddingとborderをwidthとheightに含める */

box-sizing: border-box;

}

body {

background-color: #3494e4;

color: #fff;

font-family: "Montserrat", sans-serif;

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

display: flex;

/* flexアイテムを縦に重なるように配置 */

flex-direction: column;

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

align-items: center;

margin-bottom: 40px;

}

h1 {

/* 上 | 左右 | 下 */

margin: 10px 0 0;

}

h3 {

font-weight: 400;

/* 上下 | 左右 */

margin: 10px 0;

}

.cup {

background-color: #fff;

border: 4px solid var(--border-color);

color: var(--border-color);

border-radius: 0 0 40px 40px;

height: 330px;

width: 150px;

margin: 30px 0;

display: flex;

flex-direction: column;

overflow: hidden;

}

.cup.cup-small {

height: 95px;

width: 50px;

border-radius: 0 0 15px 15px;

background-color: rgba(255, 255, 255, 0.9);

cursor: pointer;

font-size: 14px;

align-items: center;

justify-content: center;

text-align: center;

margin: 5px;

/* アニメーション */

transition: 0.3 ease;

}

.cup.cup-small.full {

background-color: var(--fill-color);

color: #fff;

}

.cups {

display: flex;

/* flexアイテムを複数行に分割して配置 */

flex-wrap: wrap;

align-items: center;

justify-content: center;

width: 280px;

}

.remained {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

/* フレックスアイテムをフレックスコンテナーの

領域に収めるために、どのように伸長・収縮させるかを指定 */

flex: 1;

transition: 0.3s ease;

}

.remained span {

font-size: 20px;

font-weight: bold;

}

.remained small {

font-size: 12px;

}

.percentage {

background-color: var(--fill-color);

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

font-size: 30px;

height: 0;

transition: 0.3 ease;

}

.text {

text-align: center;

margin: 0 0 5px;

}

CSSでDrinkWaterアプリのスタイリングをしよう!

実装するもの

ワークスペース

HTML&JavaScript

スタイリング

全体の設定

bodyの設定

h1の設定

h3の設定

cupの設定

cup-smallの設定

fullの設定

cupsの設定

remainedの設定

spanの設定

smallの設定

percentageの設定

textの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年3月
月	火	水	木	金	土	日
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

実装するもの

ワークスペース

HTML&JavaScript

スタイリング

全体の設定

bodyの設定

h1の設定

h3の設定

cupの設定

cup-smallの設定

fullの設定

cupsの設定

remainedの設定

spanの設定

smallの設定

percentageの設定

textの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

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

JavaScriptでTMDB APIを使ったMovieアプリを作ろう!

[Go言語]もっとType(型定義)を活用しよう！

Go言語 ~ 記事まとめ ~

TypeScriptのOptional Chainingを試してみた

CSSでImage Carouselアプリをスタイリングしよう!

[Golang]今更だがテストコードを復習しよう! TDD風に!~

突然「bash: __git_ps1: command not found」…

Go言語で作るWebアプリのテンプレート2~Staticファイル~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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