[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] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え