こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、CSSでカードローディングのスタイリングをしましょう。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML&JavaScript
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> <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 |
// 要素を取得 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) |

スタイリング
これからCSSでスタイリングをしていきます。
項目に登場するbodyやimgはHTMLの要素です。
全体の設定
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の設定
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の設定
1 2 3 |
img { max-width: 100%; } |

cardの設定
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の設定
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の設定
1 2 3 4 |
.card-content { background-color: #fff; padding: 30px; } |

card-titleの設定
1 2 3 4 |
.card-title { height: 20px; margin: 0; } |

card-excerptの設定
1 2 3 4 |
.card-excerpt { color: #777; margin: 10px 0 20px; } |

authorの設定
1 2 3 |
.author { display: flex; } |

profile-imgの設定
1 2 3 4 5 6 |
.profile-img { border-radius: 50%; overflow: hidden; height: 40px; width: 40px; } |

author-infoの設定
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; } |

smallの設定
1 2 3 4 |
.author-info small { color: #aaa; margin-top: 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 |
.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のanimationタグを全然使いこなせていません^^;
動きのあるUIを実装するためには、習得が欠かせない技術ですね。
頑張って覚えましょう。
それでは、また!
CSSまとめ
CSSソースコード
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; } } |
コメントを残す
コメントを投稿するにはログインしてください。