[CSS] フォームや登録の進み具合をCSSだけで表現する方法
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います。
そんな、進行状況をCSSのみで表現する方法を紹介します。
構造は非常に単純
まず、HTMLですが、とても単純です。
<div class="bar active"></div> <div class="bar active"></div> <div class="bar"></div>
これだけです。クラスのactiveが付いた箇所は既に通った箇所、もしくは現在地です。
そして、CSSですが、これもそれほど難しいものではありません。
body { background: gray; } .bar { border-radius: 1em 0 0 1em; background: #fff; height: 1em; width: 20%; margin: 1em; border: .5em solid #fff; border-right: 0; position: relative; float: left; } .bar + .bar { border-radius: 0; border-left: 0; margin-left: 1.25em; z-index: -2; } .bar + .active.bar { z-index: auto; } .bar:after { content: ''; display: block; width: 2.5em; position: absolute; right: -2.9em; top: -1.25em; height: 2.5em; border: .5em solid #fff; background: #fff; border-radius: 50%; z-index: -1; } .active.bar, .active.bar:after { background: orange; }
これだけです。
構造を少し解説します。
まず、.barで角丸のバーを作ります。そして、その下の .bar + .bar という隣接セレクタで次の.barの角丸をなくしています。
あとは、:afterで丸のポイントを作っています。
まとめ
CSSを駆使して非常に簡単に表現されているいい例です。
javascriptと合わせれば、フォームがユーザーにとって使いやすいものになるでしょう。
ad
関連記事
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常