こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、フィルタリングアプリをCSSでスタイリングします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 |
$ 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 |
<!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>Live User Filter</title> </head> <body> <div class="container"> <header class="header"> <h4 class="title">Live User Filter</h4> <small class="subtitle">Search by name and/or location</small> <input type="text" id="filter" placeholder="Search"> </header> <ul id="result" class="user-list"> <li> <h3>Loading...</h3> </li> </ul> </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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
// 要素の取得 const result = document.getElementById('result') const filter = document.getElementById('filter') // 取得データ格納場所 const listItems = [] getData() // inputイベントの登録 filter.addEventListener('input', (e) => filterData(e.target.value)) async function getData() { // 50件のユーザーデータを取得 const res = await fetch('https://randomuser.me/api?results=50') // 取得したデータをJSONに変更 const { results } = await res.json() // リストのクリア result.innerHTML = '' // 取得データごとに処理 results.forEach(user => { // li要素を作成 const li = document.createElement('li') // リストアイテムとして追加 listItems.push(li) // コンテンツ作成 li.innerHTML = ` <img src="${user.picture.large}" alt="${user.name.first}"> <div class="user-info"> <h4>${user.name.first} ${user.name.last}</h4> <p>${user.location.city}, ${user.location.country}</p> </div> ` // resultの子要素として追加 result.appendChild(li) }) } // フィルタリング機能 function filterData(searchTerm) { // listItemsのデータ分だけループ listItems.forEach(item => { // searchTermの文字が含まれているかチェック if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) { // hideクラスを除去 item.classList.remove('hide') } else { // hideクラスを付与 item.classList.add('hide') } }) } |
スタイリング
これからCSSでスタイリングしていきます。項目に出てくるbodyやcontainerはHTML要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { background-color: #f8f9fd; font-family: "Roboto", sans-serif; height: 100vh; margin: 0; overflow: hidden; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; } |
containerの設定
|
1 2 3 4 5 6 |
.container { border-radius: 5px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); overflow: hidden; width: 300px; } |
titleの設定
|
1 2 3 |
.title { margin: 0; } |
subtitleの設定
|
1 2 3 4 5 6 |
.subtitle { display: inline-block; /* 上 | 左右 | 下 */ margin: 5px 0 20px; opacity: 0.8; } |
user-listの設定
|
1 2 3 4 5 6 7 8 9 |
.user-list { background-color: #fff; /* ●を消す */ list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; } |
user-list liの設定
|
1 2 3 4 |
.user-list li { display: flex; padding: 20px; } |
user-list imgの設定
|
1 2 3 4 5 6 |
.user-list img { border-radius: 50%; object-fit: cover; height: 50px; width: 50px; } |
user-list .user-infoの設定
|
1 2 3 |
.user-list .user-info { margin-left: 10px; } |
user-list .user-info h4の設定
|
1 2 3 |
.user-list .user-info h4 { margin: 0 0 10px; } |
user-list .user-info pの設定
|
1 2 3 |
.user-list .user-info p { font-size: 12px; } |
user-list li:not(:last-of-type)の設定
|
1 2 3 4 |
/* 最後の要素以外を指定する */ .user-list li:not(:last-of-type) { border-bottom: 1px solid #eee; } |
user-list li.hideの設定
|
1 2 3 4 |
/* フィルターをかける */ .user-list li.hide { display: none; } |
headerの設定
|
1 2 3 4 5 |
.header { background-color: #3e57db; color: #fff; padding: 30px 20px; } |
header inputの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.header input { background-color: rgba(0, 0, 0, 0.3); border: 0; border-radius: 50px; color: #fff; font-size: 14px; padding: 10px 15px; width: 100%; } /* フォーカスを当てた時 */ .header input:focus { /* 青線を非表示 */ outline: none; } |
これで、完成です。
おわりに
今回のアプリケーションのようなリスト形は、実務でもバリバリ出てきます。
特定の情報をDBから取得して一覧としてページに表示する、必須パターンの一つですね^^
Bootstrap5を使うのもありですが、CSSでオリジナルのリストが作れるようになれば、アプリケーション開発も幅がでますので、頑張って覚えましょう。
個人的に、最後のリスト要素以外を指定する「user-list li:not(:last-of-type)」が勉強になりました。知識の蓄積ができてよかったです^^
それでは、また!
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } body { background-color: #f8f9fd; font-family: "Roboto", sans-serif; height: 100vh; margin: 0; overflow: hidden; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; } .container { border-radius: 5px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); overflow: hidden; width: 300px; } .title { margin: 0; } .subtitle { display: inline-block; /* 上 | 左右 | 下 */ margin: 5px 0 20px; opacity: 0.8; } .user-list { background-color: #fff; /* ●を消す */ list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; } .user-list li { display: flex; padding: 20px; } .user-list img { border-radius: 50%; object-fit: cover; height: 50px; width: 50px; } .user-list .user-info { margin-left: 10px; } .user-list .user-info h4 { margin: 0 0 10px; } .user-list .user-info p { font-size: 12px; } /* 最後の要素以外を指定する */ .user-list li:not(:last-of-type) { border-bottom: 1px solid #eee; } /* フィルターをかける */ .user-list li.hide { display: none; } .header { background-color: #3e57db; color: #fff; padding: 30px 20px; } .header input { background-color: rgba(0, 0, 0, 0.3); border: 0; border-radius: 50px; color: #fff; font-size: 14px; padding: 10px 15px; width: 100%; } /* フォーカスを当てた時 */ .header input:focus { /* 青線を非表示 */ outline: none; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。