webのチュートリアルなどで、順を追って表示を切り替えていくものがあります。その多くはjQueryなどのスクリプトで作られていますが、これをCSSのみで実装してみます。

サンプル（最下段）は、「スタート」のリンクのみが表示されていますが、順を追って表示していく要素が「display:none;」で非表示になっています。

サンプルのhtmlソース

<div id="sample">「<a href="#sample01">スタート</a>」ここをクリックすると、下に内容を表示します。
</div>
<div id="sample01"><b>ダミーテキスト01</b>　ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。
：「<a href="#sample02">次（02）へ</a>」
</div>
 
<中略>
 
<div id="sample05"><b>ダミーテキスト05</b>　[3] 同一の企画において景品類の提供とを併せて行う場合、 （例：取引の相手方に金銭又は招待旅行のいずれかを選択させる場合）は値引とは認められず景品類に該当することとなり，景品規制が適用されます。
：「<a href="#sample">スタートに戻る</a>」
</div>

 

サンプルのCSSソース

#sample,#sample01,#sample02,
#sample03,#sample04,#sample05  {
	width:800px;
	margin:10px auto;
	padding:8px 10px 10px; 
	text-align:left;
	border:1px solid #07f;
	color:#222;
	display:none;
	}
#sample  {
	border:2px solid #ddd;	
	display:block;
	}
#sample01:target,#sample02:target,
#sample03:target,#sample04:target,
#sample05:target  {
	display:block;
	}

 

• CSSの1行目から10行目で、#sampleと#sample01から#sample05までのdiv要素のスタイルを決め、全て非表示にします。
• CSSの11行目から14行目で、#sampleのdivのみボーダーのスタイルを変え、非表示を解除します。
• CSSの15行目から19行目で、target疑似クラスを用いて、それぞれの要素に飛んだときに非表示を解除するよう指定します。
• 「スタート」をクリックすると、#sample01のdivに飛び、:target疑似クラスの指定（display:block;）により、#sample01のdivを表示。次に表示されたリンクをクリックすると、#sample02のdivに飛び、:target疑似クラスの指定で#sample02のdivを表示、#sample01のdivは、targetが外れるので、元の非表示になります。
• 同様に#sample05のdivまで繰り返し、#sample05から元のスタートに戻ります。

 

サンプル