CSSでポケモンカードをスタイリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、ポケモンカードのスタイリングをしていきたいと思います。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやh1はHTMLの要素です。

全体の設定

bodyの設定

h1の設定

poke-containerの設定

pokemonの設定

pokemon .img-containerの設定

pokemon .img-container imgの設定

pokemon .infoの設定

pokemon .info .numberの設定

pokemon .info .nameの設定

これで、完成です。

おわりに

ポケモン、懐かしいですよね。小学生の時、ゲームボーイでRedをプレイしてました^^

小学生に戻りてぇw

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す