【CSS】レスポンシブ対応のステップナビの実装方法 【コピペOK】

css

こんにちは。菜笑[なえ] (@nae310_)です。

今回はレスポンシブ対応のステップナビの実装方法についての備忘録です。
コピペ用コードはCSS用とSCSS用2種類用意しています。

完成図

今回はPC版のみ文字を表示して、SP版ではシンプルに数字だけにしました。

PC版(画面幅769px以上)

SP版(画面幅768px以下)

完成コード [コピペOK]

HTMLはどちらも共通です。

CSS用

See the Pen step nav css by NaeSato (@N310) on CodePen.

SCSS用

See the Pen step nav scss by NaeSato (@N310) on CodePen.

おわりに

今回のデザインは特に複雑な記述は何もないので、どんどんアレンジもしてみてください。

勉強をやり始めた頃は、既存のデザインがどうやって組まれているんだろう?と考えながら見たり、それを少しずつ改造していくだけでも勉強になると思うので、ぜひ有効活用していただければなと思います。

SNS

Twitter:@nae310_
Instagram:310nae