CSSでMovieアプリのスタイリングを学ぼう!

こんにちは。KOUKIです。

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

実装するもの

今回は、Movieアプリのスタイリングを行います。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

CSSでスタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやheaderは、HTMLやJavaScriptで設定した要素です。

全体の設定

全体の設定を行います。

bodyの設定

bodyの設定を行います。

headerの設定

headerの設定を行います。

searchの設定

searchの設定を行います。

mainの設定

mainの設定を行います。

movieの設定

movieの設定を行います。

imgの設定

imgの設定を行います。

movie-infoの設定

movie-infoの設定を行います。

h3の設定

h3の設定を行います。

spanの設定

spanの設定を行います。

Movie Rate「8.5」に色がつきました。

overviewの設定

overviewの設定を行います。

カーソルホバーの設定

カーソルホバーの設定を行います。

これで完成です。

おわりに

今回は、映画概要蘭(overview)のtransformで非表示にするスタイリング周りが少し難しかったですね。

何度か練習して、慣れていきましょう^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す