Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ポケモン図鑑 - 第1・2世代</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Press Start 2P', 'Noto+Sans+JP', sans-serif; | |
| background-color: #f0f0f0; | |
| } | |
| .pokedex { | |
| display: flex; | |
| width: 800px; | |
| height: 600px; | |
| margin: 20px auto; | |
| background-color: #d32f2f; | |
| border: 10px solid #b71c1c; | |
| border-radius: 15px; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
| } | |
| .list-container { | |
| width: 40%; | |
| background-color: #fff; | |
| border-right: 5px solid #000; | |
| overflow-y: auto; | |
| } | |
| #pokemon-list { | |
| list-style: none; | |
| padding: 10px; | |
| margin: 0; | |
| } | |
| #pokemon-list li { | |
| cursor: pointer; | |
| padding: 8px; | |
| font-size: 12px; | |
| } | |
| #pokemon-list li:hover { | |
| background-color: #eee; | |
| } | |
| .display-container { | |
| width: 60%; | |
| display: flex; | |
| flex-direction: column; /* 縦に並べる */ | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #ffffff; | |
| border: 10px solid #000; | |
| border-radius: 10px; | |
| margin: 20px; | |
| } | |
| .sprite-container { | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .text-container { | |
| margin-top: 20px; /* 画像とテキストの間に間隔 */ | |
| text-align: center; | |
| } | |
| #pokemon-sprite { | |
| image-rendering: pixelated; | |
| transform: scale(3); | |
| transform-origin: center; | |
| } | |
| #pokemon-name { | |
| font-size: 16px; | |
| color: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="pokedex"> | |
| <div class="list-container"> | |
| <ul id="pokemon-list"></ul> | |
| </div> | |
| <div class="display-container"> | |
| <div class="sprite-container"> | |
| <img id="pokemon-sprite" src="" alt="ポケモンスプライト"> | |
| </div> | |
| <div class="text-container"> | |
| <h2 id="pokemon-name"></h2> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let pokemonList = []; | |
| async function loadPokemon() { | |
| const promises = []; | |
| for (let i = 1; i <= 251; i++) { | |
| promises.push( | |
| Promise.all([ | |
| fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(res => res.json()), | |
| fetch(`https://pokeapi.co/api/v2/pokemon-species/${i}`).then(res => res.json()) | |
| ]) | |
| ); | |
| } | |
| const results = await Promise.all(promises); | |
| pokemonList = results.map(([pokemonData, speciesData]) => { | |
| const japaneseName = speciesData.names.find(name => name.language.name === 'ja').name; | |
| return { | |
| number: String(pokemonData.id).padStart(3, '0'), | |
| name: japaneseName, | |
| sprite: pokemonData.sprites.versions['generation-ii'].crystal.front_default | |
| }; | |
| }); | |
| const ul = document.getElementById('pokemon-list'); | |
| pokemonList.forEach(pokemon => { | |
| const li = document.createElement('li'); | |
| li.textContent = `No.${pokemon.number} ${pokemon.name}`; | |
| li.dataset.number = pokemon.number; | |
| ul.appendChild(li); | |
| }); | |
| } | |
| document.getElementById('pokemon-list').addEventListener('click', function(event) { | |
| if (event.target.tagName === 'LI') { | |
| const number = event.target.dataset.number; | |
| const pokemon = pokemonList.find(p => p.number === number); | |
| if (pokemon) { | |
| document.getElementById('pokemon-sprite').src = pokemon.sprite; | |
| document.getElementById('pokemon-name').textContent = `No.${pokemon.number} ${pokemon.name}`; | |
| } | |
| } | |
| }); | |
| async function init() { | |
| await loadPokemon(); | |
| if (pokemonList.length > 0) { | |
| const firstPokemon = pokemonList[0]; | |
| document.getElementById('pokemon-sprite').src = firstPokemon.sprite; | |
| document.getElementById('pokemon-name').textContent = `No.${firstPokemon.number} ${pokemon.name}`; | |
| } | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> |