CSSでフィードバックアプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、フィードバック機能のスタイリングをします。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。

項目に出てくるbodyやpanel-containerは、HTMLの要素です。

全体の設定

bodyの設定

panel-containerの設定

panel-container strongの設定

ratings-containerの設定

ratingの設定

rating imgの設定

rating smallの設定

btnの設定

fa-heartの設定

ここは、「Send Review」を押下して確認してください。

これで、完成です。

おわりに

ここ一ヶ月ほど、毎日CSSのプロパティを手で書いているので、ほぼほぼ覚えてきました。そのため、コメントが少なめになっております^^;

まだCSSのプロパティになれていないよ!という方は、CSSまとめページの「レイアウト」の最初の方からスタイリングしていくとわかりやすいと思います!

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す