CSSでフィルタリングアプリをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、フィルタリングアプリをCSSでスタイリングします。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

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

全体の設定

bodyの設定

containerの設定

titleの設定

subtitleの設定

user-listの設定

user-list liの設定

user-list imgの設定

user-list .user-infoの設定

user-list .user-info h4の設定

user-list .user-info pの設定

user-list li:not(:last-of-type)の設定

user-list li.hideの設定

headerの設定

header inputの設定

これで、完成です。

おわりに

今回のアプリケーションのようなリスト形は、実務でもバリバリ出てきます。

特定の情報をDBから取得して一覧としてページに表示する、必須パターンの一つですね^^

Bootstrap5を使うのもありですが、CSSでオリジナルのリストが作れるようになれば、アプリケーション開発も幅がでますので、頑張って覚えましょう。

個人的に、最後のリスト要素以外を指定する「user-list li:not(:last-of-type)」が勉強になりました。知識の蓄積ができてよかったです^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す