[CSS] フォームや登録の進み具合をCSSだけで表現する方法

公開日: : CSS, Web制作 , ,

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います。

そんな、進行状況をCSSのみで表現する方法を紹介します。

スクリーンショット 2014-08-31 22.13.38

構造は非常に単純

まず、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] 紙の様にふわっとしたエフェクトが全くつかえない!

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[Dreamweaver] オプション領域を極める!テンプレート上級編

オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑