いいね機能をCSSでスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、「いいね機能」をcssでスタイリングしたいと思います。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

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

全体の設定

bodyの設定

h3の設定

smallの設定

fa-heartの設定

loveMeの設定

fa-heartとアニメーションの設定

これで、画像にダブルクリックしたときに、ハートを拡大して表示します。

おわりに

CSSのスタイリングは、一見難しそうに思えますが、要素のブロックとCSSプロパティの意味を一つ一つ理解していけば、攻略していけると思います。

子供の積み木遊びと似ていると思うので、教育にも良さそうですよね^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す