CSSでモバイルタブナビゲーションをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、モバイルタブナビゲーションのスタイリングをしたいと思います。

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

ワークスペース

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

JavaScript

HTML&JavaScript

スタイリング

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

全体の設定

bodyの設定

phoneの設定

phone .contentの設定

phone .content.showの設定

navの設定

nav ulの設定

nav li の設定

nav ul li pの設定

これで、完成です。

おわりに

今回は、flexアイテムや画面横幅(width)の調整に神経を使いそうですよね。

実務では、こういうページの認識合わせをクライアントとすると手直しがたくさん入って、修正が大変になるんですよね^^;

保守しやすいCSSの実装を勉強して、実務に活かしていきたいと思います!

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す