ステップ図

賢威8ではステップ図を用意しています。
ステップ4まで用意しておりますが、ステップ5以降はCSSを追加する必要があります。

用意されているのは2種類です。
1つ目は上から下へ進めるタイプです。

ステップ1のテキストが入ります。
ステップ2のテキストが入ります。
ステップ3のテキストが入ります。
ステップ4のテキストが入ります。

<ol class="step-chart step-chart_style01">
<li class="step">
	<p>ステップ1のテキストが入ります。</p>
</li>

<li class="step">
	<p>ステップ2のテキストが入ります。</p>
</li>

<li class="step">
	<p>ステップ3のテキストが入ります。</p>
</li>

<li class="step">
	<p>ステップ4のテキストが入ります。</p>
</li>
</ol>

ステップ1のテキストが入ります。

</li>

ステップ2のテキストが入ります。

</li>

ステップ3のテキストが入ります。

</li>

ステップ4のテキストが入ります。

</li>

</ol>

2つ目は左から右に進めるもの。
ただし、モバイル時のデザインはどちらも同じです。

ステップ1が入ります
ステップ2が入ります
ステップ3が入ります
ステップ4が入ります

<ol class="step-chart step-chart_style02">
<li class="step">
	<p>ステップ1が入ります</p>
</li>

<li class="step">
	<p>ステップ2が入ります</p>
</li>

<li class="step">
	<p>ステップ3が入ります</p>
</li>

<li class="step">
	<p>ステップ4が入ります</p>
</li>
</ol>

ステップ1が入ります

</li>

ステップ2が入ります

</li>

ステップ3が入ります

</li>

ステップ4が入ります

</li>

</ol>

関連記事