最近良く見るこういう形の、フォームなどの表示形式は、なんていったらいいんでしょうね。
表示サンプル
HTML
<ol class="progress-meter"> <li class="progress-point done"><a href="#" id="step1">ステップ1</a></li> <li class="progress-point done"><a href="#" id="step2">ステップ2</a></li> <li class="progress-point done"><a href="#" id="step3">ステップ3</a></li> <li class="progress-point todo"><a href="#" id="step4">ステップ4</a></li> <li class="progress-point todo"><a href="#" id="step5">ステップ5</a></li> <li class="progress-point todo"><a href="#" id="step6">ステップ6</a></li> <li class="progress-point todo last"><a href="#" id="step7">ステップ7</a></li> </ol>
CSS
.progress-meter { list-style-type: none; margin-left: 10px; margin-bottom: 20px; margin-top: 0; } .progress-meter li { display: block; text-indent: 0; height: 40px; width: 100%; font-size: 12px; border-left-width: 2px; border-left-style: solid; margin-bottom: 0; position: relative; } .progress-meter li a { color: #333; display: block; line-height: 18px !important; position: absolute; top:0; left:0; padding-left: 20px; width:100%; text-decoration:none; } .progress-meter li:before { position: relative; text-indent: 0; } .progress-meter li.done { font-size: 12px; } .progress-meter li.done a { color: #ccc; } .progress-meter li.done:before { content: ""; height: 19px; width: 19px; line-height: 21.85px; border: none; border-radius: 19px; display: inline-block; left: -11px; text-align: center; } .progress-meter li.todo { font-size: 12px; } .progress-meter li.todo:before { content: ""; font-size: 17.1px; height: 19px; width: 19px; line-height: 21.85px; border: none; border-radius: 19px; display: inline-block; left: -11px; text-align: center; } .progress-meter li.done { color: black; border-left-color: #eee; } .progress-meter li.done:before { color: white; background-color: #fff; border:2px solid #ccc; } .progress-meter li.todo { color: #ccc; border-left-color: #eee; } .progress-meter li.todo:before { color: #ccc; background-color: #eee; border:2px solid #eee; } .progress-meter li.last { height: 19px; }