CSSでImage Carouselアプリをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、Image CarouselアプリをCSSでスタイリングします。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

CSSでスタイリングをしていきます。bodyやimgは、HTMLの要素です。

全体の設定

bodyの設定

imgの設定

carouselの設定

image-containerの設定

buttons-containerの設定

btnの設定

おわりに

CSSの記事を書いてますが、仕事ではあまりデザインに関わりません。APIの実装やDockerなどを使った環境構築作業がメインです。

しかし、時たま、HTML & CSSを使って画面を作らないといけない時があるので、今回のような情報はかなり役に立ちます^^

フルスタックエンジニアを目指して、頑張ろうかと。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す