CSSでカードローディングのスタイリングをしよう!

$ 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>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header"> </div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
           
        </h3>
        <p class="card-excerpt" id="excerpt">
           
          <span class="animated-bg animated-bg-text"> </span>
          <span class="animated-bg animated-bg-text"> </span>
          <span class="animated-bg animated-bg-text"> </span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img"> </div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              > </strong
            >
            <small class="animated-bg animated-bg-text" id="date"> </small>
          </div>
        </div>
      </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>Content Placeholder</title>

</head>

<body>

</h3>

</p>

<strong class="animated-bg animated-bg-text" id="name"

> </strong

>

</div>

</body>

</html>

// 要素を取得
const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

// カードデータの取得
function getData() {
  // カード情報を設定
  header.innerHTML =
    '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
  title.innerHTML = 'Lorem ipsum dolor sit amet'
  excerpt.innerHTML =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
  profile_img.innerHTML =
    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
  name.innerHTML = 'John Doe'
  date.innerHTML = 'Oct 08, 2020'

  // animated-bg/animated-bg-textクラスを除去
  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}

// 2.5秒後に表示
setTimeout(getData, 2500)

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

// 要素を取得

const header = document.getElementById('header')

const title = document.getElementById('title')

const excerpt = document.getElementById('excerpt')

const profile_img = document.getElementById('profile_img')

const name = document.getElementById('name')

const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')

const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

// カードデータの取得

function getData() {

// カード情報を設定

header.innerHTML =

'<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'

title.innerHTML = 'Lorem ipsum dolor sit amet'

excerpt.innerHTML =

'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'

profile_img.innerHTML =

'<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'

name.innerHTML = 'John Doe'

date.innerHTML = 'Oct 08, 2020'

// animated-bg/animated-bg-textクラスを除去

animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))

animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))

}

// 2.5秒後に表示

setTimeout(getData, 2500)

/* フォント */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

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

1

2

3

4

5

6

7

8

/* フォント */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {

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

padding/boderをwidth/heightに含める */

box-sizing: border-box;

}

body {
  background-color: #ecf0f1;
  font-family: "Roboto", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flex重点にアイテムを配置 */
  align-items: center;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
  /* ビューポートに対して高さ100% */
  height: 100vh;
  margin: 0;
  /* 横スクロールを消す */
  overflow: hidden;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

body {

background-color: #ecf0f1;

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

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

display: flex;

/* flex重点にアイテムを配置 */

align-items: center;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

/* ビューポートに対して高さ100% */

height: 100vh;

margin: 0;

/* 横スクロールを消す */

overflow: hidden;

}

img {
  max-width: 100%;
}

1

2

3

img {

max-width: 100%;

}

.card {
  width: 350px;
  /* カードに影をつける */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* 縁を丸くする */
  border-radius: 10px;
  /* はみ出た要素を非表示 */
  overflow: hidden;
}

1

2

3

4

5

6

7

8

9

.card {

width: 350px;

/* カードに影をつける */

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

/* 縁を丸くする */

border-radius: 10px;

/* はみ出た要素を非表示 */

overflow: hidden;

}

.card-header {
  height: 200px;
}

.card-header img {
  /* 要素一杯に画像を埋めるように拡大縮小 */
  object-fit: cover;
  height: 100%;
  width: 100%;
}

1

2

3

4

5

6

7

8

9

10

.card-header {

height: 200px;

}

.card-header img {

/* 要素一杯に画像を埋めるように拡大縮小 */

object-fit: cover;

height: 100%;

width: 100%;

}

.card-content {
  background-color: #fff;
  padding: 30px;
}

1

2

3

4

.card-content {

background-color: #fff;

padding: 30px;

}

.card-title {
  height: 20px;
  margin: 0;
}

1

2

3

4

.card-title {

height: 20px;

margin: 0;

}

.card-excerpt {
  color: #777;
  margin: 10px 0 20px;
}

1

2

3

4

.card-excerpt {

color: #777;

margin: 10px 0 20px;

}

.author {
  display: flex;
}

1

2

3

.author {

display: flex;

}

.profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

1

2

3

4

5

6

.profile-img {

border-radius: 50%;

overflow: hidden;

height: 40px;

width: 40px;

}

.author-info {
  display: flex;
  /* flexアイテムを積み重ねるように配置 */
  flex-direction: column;
  /* 各アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  justify-content: space-between;
  margin-left: 10px;
  width: 100px;
}

1

2

3

4

5

6

7

8

9

10

11

.author-info {

display: flex;

/* flexアイテムを積み重ねるように配置 */

flex-direction: column;

/* 各アイテムを均等に配置し

最初のアイテムは先頭に寄せ、

最後のアイテムは末尾に寄せる */

justify-content: space-between;

margin-left: 10px;

width: 100px;

}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

1

2

3

4

.author-info small {

color: #aaa;

margin-top: 5px;

}

.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  /* アニメーション */
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

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

.animated-bg {

background-image: linear-gradient(

to right,

#f6f7f8 0%,

#edeef1 10%,

#f6f7f8 20%,

#f6f7f8 100%

);

background-size: 200% 100%;

/* アニメーション */

animation: bgPos 1s linear infinite;

}

.animated-bg-text {

border-radius: 50px;

display: inline-block;

margin: 0;

height: 10px;

width: 100%;

}

@keyframes bgPos {

0% {

background-position: 50% 0;

}

100% {

background-position: -150% 0;

}

/* フォント */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

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

body {
  background-color: #ecf0f1;
  font-family: "Roboto", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flex重点にアイテムを配置 */
  align-items: center;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
  /* ビューポートに対して高さ100% */
  height: 100vh;
  margin: 0;
  /* 横スクロールを消す */
  overflow: hidden;
}

img {
  max-width: 100%;
}

.card {
  width: 350px;
  /* カードに影をつける */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* 縁を丸くする */
  border-radius: 10px;
  /* はみ出た要素を非表示 */
  overflow: hidden;
}

.card-header {
  height: 200px;
}

.card-header img {
  /* 要素一杯に画像を埋めるように拡大縮小 */
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.card-content {
  background-color: #fff;
  padding: 30px;
}

.card-title {
  height: 20px;
  margin: 0;
}

.card-excerpt {
  color: #777;
  margin: 10px 0 20px;
}

.author {
  display: flex;
}

.profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

.author-info {
  display: flex;
  /* flexアイテムを積み重ねるように配置 */
  flex-direction: column;
  /* 各アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  justify-content: space-between;
  margin-left: 10px;
  width: 100px;
}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  /* アニメーション */
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

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

118

119

120

121

122

123

/* フォント */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {

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

padding/boderをwidth/heightに含める */

box-sizing: border-box;

}

body {

background-color: #ecf0f1;

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

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

display: flex;

/* flex重点にアイテムを配置 */

align-items: center;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

/* ビューポートに対して高さ100% */

height: 100vh;

margin: 0;

/* 横スクロールを消す */

overflow: hidden;

}

img {

max-width: 100%;

}

.card {

width: 350px;

/* カードに影をつける */

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

/* 縁を丸くする */

border-radius: 10px;

/* はみ出た要素を非表示 */

overflow: hidden;

}

.card-header {

height: 200px;

}

.card-header img {

/* 要素一杯に画像を埋めるように拡大縮小 */

object-fit: cover;

height: 100%;

width: 100%;

}

.card-content {

background-color: #fff;

padding: 30px;

}

.card-title {

height: 20px;

margin: 0;

}

.card-excerpt {

color: #777;

margin: 10px 0 20px;

}

.author {

display: flex;

}

.profile-img {

border-radius: 50%;

overflow: hidden;

height: 40px;

width: 40px;

}

.author-info {

display: flex;

/* flexアイテムを積み重ねるように配置 */

flex-direction: column;

/* 各アイテムを均等に配置し

最初のアイテムは先頭に寄せ、

最後のアイテムは末尾に寄せる */

justify-content: space-between;

margin-left: 10px;

width: 100px;

}

.author-info small {

color: #aaa;

margin-top: 5px;

}

.animated-bg {

background-image: linear-gradient(

to right,

#f6f7f8 0%,

#edeef1 10%,

#f6f7f8 20%,

#f6f7f8 100%

);

background-size: 200% 100%;

/* アニメーション */

animation: bgPos 1s linear infinite;

}

.animated-bg-text {

border-radius: 50px;

display: inline-block;

margin: 0;

height: 10px;

width: 100%;

}

@keyframes bgPos {

0% {

background-position: 50% 0;

}

100% {

background-position: -150% 0;

}

CSSでカードローディングのスタイリングをしよう!

実装するもの

ワークスペース

JavaScript版

HTML&JavaScript

スタイリング

全体の設定

bodyの設定

imgの設定

cardの設定

card-headerの設定

card-contentの設定

card-titleの設定

card-excerptの設定

authorの設定

profile-imgの設定

author-infoの設定

smallの設定

アニメーションの設定

おわりに

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

実装するもの

ワークスペース

JavaScript版

HTML&JavaScript

スタイリング

全体の設定

bodyの設定

imgの設定

cardの設定

card-headerの設定

card-contentの設定

card-titleの設定

card-excerptの設定

authorの設定

profile-imgの設定

author-infoの設定

smallの設定

アニメーションの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

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

[JavaScript]データの追加/削除について

CSSでパスワードジェネレータのスタイリングをしよう!

Django Rest Frameworkを学ぼう! ~開発環境の構築編~

[React]~Admin画面2:ルーティング処理の実装 ~

go get後に「command not found」が出るとイラっとする件

[golang]fiber API3~Checkout: Email送信の実…

Webデザイン1: リセットCSS

[Golang]Prototypeパターンを学ぼう!~Version 2~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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