CSS03のソース

ウサギ先生 
<html>
<head>
<style>
body{background-color:#ddd;}
h2{
	background-color:#59b;
	color:#fff;
	padding:0.5rem 1rem;
	margin-top:4rem;
}
img{
	width:40%;
	height:auto;
	display:block;
	margin:3rem auto;
}
ol{
	border:1px solid #aaa ;
	background-color:#bde;
	padding:2rem;
	margin:3rem 1rem;
}
li{
	line-height:2em;
	margin-left:2rem;
	font-size:1.3em;
} #mainWrap {
	width:70%;
	margin:2rem auto;
	padding:3rem;
	background-color:#fff;
} #mainTitle {
	text-align:center;
	color:#069;
	border-bottom:2px solid #069 ;
	width:80%;
	margin:2rem auto;
}
.deka{
	font-size:2.5em;
	font-weight:bold;
	
}
.medatsu{
	color:#f00;
	font-weight:bold;
	font-size:1.2em;
}
</style>
</head>
<body>
	<div id="mainWrap">
		<h1 id="mainTitle">おれの時代キタかも！？</h1>
		<h2>今日はスーパーに買い物に行った</h2>
		<p>
			野菜売り場でいつものようにニンジンを選んでいたよ。
			するととても瑞々しい人参を見つけた
		</p>
		<p class="deka">「これや！」</p>
		<p>慌てて手を伸ばした</p>
		<p class="deka">「あ！」</p>
		<h2>偶然？必然？いいや作為だろ</h2>

		<p>誰かの手に触れた・・・。</p>
		<p class="deka">「ごめんなさい・・・」</p>
		<p>
			ん？この声は同じアパートの<span class="medatsu">203号室</span>の
			OLの<span class="medatsu">「あかねさん」</span>だ！
		</p>
		<img src="あかねちゃん写真集/あかね.png" />
		<p>
			この人がこの店で買い物するのは、
			あと<span class="medatsu">12分30秒早い</span>はずなのにおかしいな？
		</p>
		<p>もしかして<span class="medatsu">僕に合わしてきた？</span></p>

		<h2>え、これフラグじゃね？</h2>
		<p>いやいや。まてまて。そんなわけないだろ。いやでも・・・</p>
		<p class="deka">もちつけ俺！</p>
		<p class="deka">いや落ち着け！</p>
		<p>正月の前にクリスマスイベントを攻略せねば！</p>
		<ol>
			<li>グーグル先生に聞く</li>
			<li>友人に聞く</li>
			<li>雑誌の情報を鵜吞みにする</li>
		</ol>

		<p>
			とりあえず
			<a href="https://www.google.co.jp">グーグル先生</a>
			に聞いてみよう
		</p>
		<p>今晩は眠れぬ夜になりそうだ・・・。</p>
		
		<p>あ、もちろん手は洗いません。</p>
		<p>おしまい</p>
	</div>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？