[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
関連記事
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[WordPress] 自作プラグインの設定など
プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C