CSSで通知アプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSで通知機能のスタイリングをします。

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

ワークスペース

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

JavaScript版

HTML&JavaScript

スタイリング

CSSでスタイリングをしていきましょう。項目に出てくるbodyやbtnはHTMLの要素です。

全体の設定

bodyの設定

btnの設定

toastsの設定

ボタンを押すとスタイリング結果がわかります。

toastの設定

toast.infoの設定

toast.successの設定

toast.errorの設定

これで、完成です。

おわりに

CSSのスタイリングは、最初はとっかかりにくいのですが、慣れてくると自由自在に要素を配置できるようになったり、かっこいいスタイリングができるようになってくるので、モチベーション維持がしやすいです。

ここで学んだことを活かして、かっこいいWebアプリを作成したいと思います^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す