[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います。
そんな、進行状況を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
関連記事
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹