パラドックス効果：CSSのみ滋賀県守山市のホームページ制作

★パラドックス効果：CSSのみ
HTML

<section id="block01" class="content">
	<article>
	<h1>トップ</h1>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

<section id="block02" class="content">
	<article>
	<h2>２番目のブロック</h2>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

<section id="block03" class="content">
	<article>
	<h2>３番目のブロック</h2>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

<section id="block04" class="content">
	<article>
	<h2>最後のブロック</h2>
	<p>
   	ここにテキスト挿入。
   </p>
   	<a href="#block01">トップ</a>
   	<a href="#block02">２番目のブロック</a>
   	<a href="#block03">３番目のブロック</a>
   	<a href="#block04">最後のブロック</a>
	</article>
</section>

CSS

body {
	margin: 0;
}

h1,h2 {
	font-size: 24px;
	letter-spacing: 0.1em;
	margin: 25px 0;
	display: block;
}

#block01,
#block02,
#block03,
#block04 {
	height: 1050px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 100%;
}

article {
	background: #fff;
	margin: 200px 30px 0;
	padding: 30px;
	display: block;
	width: 500px;
}

article a {
	display: block;
	float: left;
	padding: 10px;
	margin: 5px;
	color: #FFF;
	background: #666;
}

#block01 {
	background: url(img/paradox/para01.jpg) no-repeat fixed 50% top;
}

#block02 {
	background: url(img/paradox/para02.jpg) no-repeat fixed 50% top;
}

#block03 {
	background: url(img/paradox/para03.jpg) no-repeat fixed 50% top;
}

#block04 {
	background: url(img/paradox/para04.jpg) no-repeat fixed 50% top;
}

article {
	background: #fff;
	margin: 200px 30px 0;
	padding: 30px;
	display: block;
	width: 500px;
}

サンプル