このページは、「CSS3 :target疑似クラスを使い、CSSのみで順を追ったページ内リンクの切り替え」のページの内容を元に、実使用を想定してスタイルを編集したものです。

違いは、画面サイズに対応して縦方向の位置、横方向の中央揃えを統一するため「position:absolute;」を使っている点です。また、そのために表示、非表示の切り替え用のdiv要素を外側に、実際のレイアウト用divを内側にという具合に入れ子にしています。

「スタート」のボタンをクリックすると、上のグレーの部分のボタンの下側に、解説のボックスをモーダルウィンドウ風に順を追って表示していきます。

サンプルのhtmlソース

<div id="sample01">
    <div><b>ダミーテキスト01</b>　ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。
    <a href="#sample02">［次（02）へ］</a>
    </div>
</div>

<div id="sample02">
    <div><b>ダミーテキスト02</b>　取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。
        <a href="#sample03">［次（03）へ］</a>
    </div>
</div>

<div id="sample03">
    <div><b>ダミーテキスト03</b>　なお、対価の減額又は割戻しであっても、
[1] 懸賞によって減額又は割戻しの相手方を決定する場合、
    <a href="#sample04">［次（04）へ］</a>
    </div>
</div>

<div id="sample04">
    <div><b>ダミーテキスト04</b>　、[2] 減額又は割戻しをした金銭の使途を限定する場合、（例：旅行費用に充当させる場合）
    <a href="#sample05">［次（05）へ］</a>
    </div>
</div>

<div id="sample05">
    <div><b>ダミーテキスト05</b>　[3] 同一の企画において景品類の提供とを併せて行う場合、 （例：取引の相手方に金銭又は招待旅行のいずれかを選択させる場合）
は値引とは認められず景品類に該当することとなり，景品規制が適用されます。
    <a href="#sample">［閉じてスタートに戻る］</a>
    </div>
</div>

 

サンプルのCSSソース

#sample01,#sample02,#sample03,
#sample04,#sample05  {
	width:400px;
	position:absolute;
	top:50px;
	left:50%;
	margin-left:-200px;
	padding-top:100px;
	display:none;
	}
#sample01 div,#sample02 div,#sample03 div,
#sample04 div,#sample05 div  {
	width:400px;
	padding:8px 10px 10px; 
	text-align:left;
	border:1px solid #07f;
	color:#222;
	background:#fff;
	}
#sample01:target,#sample02:target,
#sample03:target,#sample04:target,
#sample05:target  {
	display:block;
	margin-top:50px;
	z-index:1;
	}