スライダーを切り替えたり現在何枚目なのか把握しやすいように配置されているのを見かけることが多いバレットナビゲーションを、CSSを使って見た目を整えたり動きを付けてみたサンプルです。 スライダー以外にも例えば長いシングルページでウィンドウの右側によく配置されているようなナビゲーションなどにも利用できますし、全てCSSなのでサイズやカラーなども容易に変更できます。 いずれもシンプルで凝ったものではありませんが、むしろシンプルなのでほとんどのテイストでそのまま使えたり、これをベースにオリジナルな見栄えにしていくことができると思います。 共通のHTML・CSS 以下で紹介しているサンプルでは共通のHTML・CSSとして下記がそれぞれ指定されており、CSSの場合はこの共通スタイルに各サンプルで紹介しているCSSを追記・変更などをすることで見栄えの確認ができると思います。 一部場合によっては必要ない記
![スライダーなどで使用される、バレットナビゲーションのスタイル・エフェクトサンプル - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b962897ea236e62da86dd0e26a1ed521110effb/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2Fcss-bullet-navigation-design.png)