CSSでスライド画面をスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでかっこいいスライド画面をスタイリングします。

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

ワークスペース

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

HTML & JavaScript

CSSでスタイリング

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

全体の設定

全体の設定をします。

bodyの設定

bodyの設定をします。

疑似クラスの設定

疑似クラスの設定をします。

slider-containerの設定

slider-containerの設定をします。

slideの設定

slideの設定をします。

arrowの設定

arrowの設定をします。

これで、完成です。

おわりに

HTML&CSS &JavaScriptだけで、スライド画面を作れるのは面白いですよね。

CSSのプロパティはたくさんの種類があると思いがちですが、主要なもの(flexとかtransitionなど)を覚えると結構いい感じのページが作れると思います!

Bootstrapなどもかなり便利ですが、仕組みを知る上でスクラッチ開発できる方が応用が効くと思うので、ぜひチャレンジしてみてください^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す