こんにちは。菜笑[なえ] (@nae310_)です。
今回はレスポンシブ対応のステップナビの実装方法についての備忘録です。
コピペ用コードはCSS用とSCSS用２種類用意しています。
目次
完成図
今回は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.
おわりに
今回のデザインは特に複雑な記述は何もないので、どんどんアレンジもしてみてください。
勉強をやり始めた頃は、既存のデザインがどうやって組まれているんだろう？と考えながら見たり、それを少しずつ改造していくだけでも勉強になると思うので、ぜひ有効活用していただければなと思います。
