CSSでSticky Navigationをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでSticky Navigationのスタイリング方法を学びました。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

CSSでスタイリングをしていきましょう。
なお、項目に出てくるbodyやcontainerは、HTMLの要素です。

全体の設定

bodyの設定

containerの設定

navの設定

navのcontainer設定

navのul設定

navのa設定

その他のnav設定

heroの設定

hero::beforeの設定

heroのh1設定

heroのp設定

contentの設定

おわりに

最近仕事でページ作成業務があったのですが、ここで学んだことを生かして、かっこいいページを作りました^^

写経している感じですが、結構手が覚えていて、スラスラとページレイアウトができるようになっています。

この調子で、勉強していこうと思いました。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す