こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、ポケモンカードのスタイリングをしていきたいと思います。
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 |
<!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>Pokedex</title> </head> <body> <h1>Pokedex</h1> <div class="poke-container" id="poke-container"></div> <!-- Design inspired by this Dribbble shot: https://dribbble.com/shots/5611109--Pokemon --> <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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
// 要素を取得する const poke_container = document.getElementById('poke-container') // 定数を定義 // 表示するポケモン数 const pokemon_count = 151 // カラー const colors = { fire: '#FDDFDF', grass: '#DEFDE0', electric: '#FCF7DE', water: '#DEF3FD', ground: '#f4e7da', rock: '#d5d5d4', fairy: '#fceaff', poison: '#98d7a5', bug: '#f8d5a3', dragon: '#97b3e6', psychic: '#eaeda1', flying: '#F5F5F5', fighting: '#E6E0D4', normal: '#F5F5F5' } // colorsのkeyを配列に格納 const main_types = Object.keys(colors) // ポケモン取得 const fetchPokemons = async () => { for(let i = 1; i <= pokemon_count; i++) { await getPokemon(i) } } const getPokemon = async (id) => { const url = `https://pokeapi.co/api/v2/pokemon/${id}` const res = await fetch(url) const data = await res.json() createPokemonCard(data) } // ポケモンカードを作成 const createPokemonCard = (pokemon) => { // div要素を作成 const pokemonEl = document.createElement('div') // pokemonクラスを追加 pokemonEl.classList.add('pokemon') // ポケモン情報からデータを格納 const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1) const id = pokemon.id.toString().padStart(3, '0') const poke_types = pokemon.types.map(type => type.type.name) const type = main_types.find(type => poke_types.indexOf(type) > -1) const color = colors[type] // ポケモンの背景色を設定 pokemonEl.style.backgroundColor = color // ポケモンカードのテンプレ const pokemonInnerHTML = ` <div class="img-container"> <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt=""> </div> <div class="info"> <span class="number">#${id}</span> <h3 class="name">${name}</h3> <small class="type">Type: <span>${type}</span> </small> </div> ` // ポケモンカードのテンプレートを追加 pokemonEl.innerHTML = pokemonInnerHTML // poke_containerの子要素として追加 poke_container.appendChild(pokemonEl) } // ページが読み込まれた時に実行 fetchPokemons() |
スタイリング
これからCSSでスタイリングをしていきます。項目に出てくるbodyやh1はHTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Lato:300,400&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: #efefbb; background: linear-gradient(to right, #d4d3dd, #efefbb); font-family: "Lato", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; justify-content: center; margin: 0; } |
h1の設定
|
1 2 3 |
h1 { letter-spacing: 3px; } |
poke-containerの設定
|
1 2 3 4 5 6 7 8 |
.poke-container { display: flex; /* flexアイテムの折り返し方法を指定 */ flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 1200px; } |
pokemonの設定
|
1 2 3 4 5 6 7 8 |
.pokemon { background-color: #eee; border-radius: 10px; box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5); margin: 10px; padding: 20px; text-align: center; } |
pokemon .img-containerの設定
|
1 2 3 4 5 6 7 |
.pokemon .img-container { background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; width: 120px; height: 120px; text-align: center; } |
pokemon .img-container imgの設定
|
1 2 3 4 |
.pokemon .img-container img { max-width: 90%; margin-top: 20px; } |
pokemon .infoの設定
|
1 2 3 |
.pokemon .info { margin-top: 20px; } |
pokemon .info .numberの設定
|
1 2 3 4 5 6 |
.pokemon .info .number { background-color: rgba(0, 0, 0, 0.1); padding: 5px 10px; border-radius: 10px; font-size: 0.8em; } |
pokemon .info .nameの設定
|
1 2 3 4 |
.pokemon .info .name { margin: 15px 0 7px; letter-spacing: 1px; } |
これで、完成です。
おわりに
ポケモン、懐かしいですよね。小学生の時、ゲームボーイでRedをプレイしてました^^
小学生に戻りてぇw
それでは、また!
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Lato:300,400&display=swap"); * { /* padding/borderをwidth/heightに合わせる */ box-sizing: border-box; } body { background: #efefbb; background: linear-gradient(to right, #d4d3dd, #efefbb); font-family: "Lato", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; justify-content: center; margin: 0; } h1 { letter-spacing: 3px; } .poke-container { display: flex; /* flexアイテムの折り返し方法を指定 */ flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 1200px; } .pokemon { background-color: #eee; border-radius: 10px; box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5); margin: 10px; padding: 20px; text-align: center; } .pokemon .img-container { background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; width: 120px; height: 120px; text-align: center; } .pokemon .img-container img { max-width: 90%; margin-top: 20px; } .pokemon .info { margin-top: 20px; } .pokemon .info .number { background-color: rgba(0, 0, 0, 0.1); padding: 5px 10px; border-radius: 10px; font-size: 0.8em; } .pokemon .info .name { margin: 15px 0 7px; letter-spacing: 1px; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。