はじめに
こんにちは。ブログを読んでいただきありがとうございます！
今回で作って学ぶWeb制作シリーズも最終回です。前回の続きとして、ポケモン図鑑アプリの画面レイアウト、デザインの実装をしていきます！
画面デザイン
画面デザインのポイントは以下です！！
・カードは丸みのある白いボックスにシャドウを付け、浮き出るように表示
・グリッドレイアウトでカードを24個表示、画面サイズに応じて自動調整
・クリックで回転し、裏面に詳細（タイプ・HP・身長・体重）を表示
・グリッドレイアウトでカードを24個表示、画面サイズに応じて自動調整
・クリックで回転し、裏面に詳細（タイプ・HP・身長・体重）を表示
前回で画面に情報を表示する部分までできたので、cssで見た目を整えていきましょう。
【実践】画面レイアウト・デザインを実装
CSS
body {
background: #f0f8ff;
font-family: sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
h3,
h4 {
margin: 0;
}
p {
margin: 4px 0;
}
#loading {
font-size: 1.5em;
margin-top: 50px;
color: #555;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
justify-items: center;
margin-top: 20px;
}
.card-wrapper {
perspective: 1000px;
}
.card {
width: 220px;
height: 260px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s;
cursor: pointer;
}
.card.flipped {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: white;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card-back {
transform: rotateY(180deg);
}
.type {
background: #eee;
border-radius: 10px;
padding: 5px 10px;
font-size: 0.9em;
}ソースコード ポイント解説
今回のポイント、カードがクリックでくるっと回る部分をみていきましょう！
.card {
transform-style: preserve-3d;
transition: transform 0.8s;
cursor: pointer;
}
.card.flipped {
transform: rotateY(180deg);
}.card にカードを3D回転させるための preserve-3dを指定
.frippedクラスが付与されると、rotateYによってカードが裏返るアニメーションがつく
.frippedクラスが付与されると、rotateYによってカードが裏返るアニメーションがつく
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: white;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card-back {
transform: rotateY(180deg);
}.card-face に backface-visibility: hidden を指定することで、裏面が透けて見えないようにしています。また、.card-back はあらかじめ 180度回転しておき、.card の回転に合わせて表と裏が切り替わる仕組みになっています。
この2か所が、「カードがクリックでくるっと回る」仕掛けのポイントです。
CSSも追加したので、これでポケモン図鑑アプリの完成です！！
まとめ
前編と後編を通して、ポケモンAPIを使ってポケモン図鑑アプリを実装しました。
作って学ぶWeb制作シリーズのまとめでしたがいかがでしたか？いままで実装した機能も使う部分があったと思います。過去の記事もあわせて学習や制作のヒントとして役立ててもらえたら嬉しいです。
最後までお読みいただきありがとうございました！
