CSS25のソース

ウサギ先生 
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
*,*:before,*:after{
	box-sizing:border-box;
}
body{
	background-color:#ddd;
	margin:0;
}
img{
	width:40%;
	height:auto;
	display:block;
	margin:3rem auto;
} #headerWrap {
	background-color:#069;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.5);
} #header {
	width:70%;
	margin:0 auto;
	color:#fff;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
} #headerMain {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
} #siteTitle {
	margin:0;
	font-size:1.6rem;
	padding:0.4rem 0;
	line-height:1em;
} #siteDescription {
	margin:0;
	padding:0.7rem 1rem;
	line-height:1em;
} #menuSW {
	display:none;
} #close {
	display:none;
}
 #headerMenu {
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
} #headerMenu  li:hover{
	background-color:#59b;
} #headerMenu  li a{
	display:block;
	color:#fff;
	text-decoration:none;
	padding:0.7rem 1rem;
	line-height:1em;
} #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;
} #mainTitle :before{
	content:"ふぉぉぉ！";
	display:block;
} #mainBody  h2{
	background-color:#59b;
	color:#fff;
	padding:0.5rem 1rem;
	margin-top:4rem;
} #mainBody  h2:before{
	content:"ムフゥ";
	display:inline;
	text-align:center;
	background-color:#fff;
	line-height:1.3em;
	margin-right:0.3rem;
	padding:0 0.3rem;
	font-size:0.9em;
	color:#59b;
	border-radius:0.4rem;
} #mainBody  ol{
	border:1px solid #aaa ;
	background-color:#bde;
	padding:2rem;
	margin:3rem 1rem;
} #mainBody  li{
	line-height:2em;
	margin-left:2rem;
	font-size:1.3em;
}
.deka{
	font-size:2.5em;
	font-weight:bold;
	
}
.medatsu{
	color:#f00;
	font-weight:bold;
	font-size:1.2em;
}
@media screen and (max-width: 639px) {
	:root{
		font-size:4vw;
	}
	
 #header {
		width:100%;
		
	}
	
 #headerMenu {
		position:absolute;
		display:block;
		top:0;
		left:-70%;
		width:70%;
		height:100vh;
		background-color:#59b;
		z-index:1000;
	
	}
	
 #menuSW :checked ~ #headerMenu {
		left:0;
	}
	
 #menuSW :checked ~ #headerMenu :before{
		content:"";
		display:block;
		position:absolute;
		top:0;
		left:70vw;
		width:100vw;
		height:100%;
		background-color:rgba(0,0,0,0.5);
		
	}
	
 #menuSW :checked ~ #headerMenu  #close {
		position:absolute;
		top:calc(50vh - 1.5rem);
		right:-3rem;
		font-size:3rem;
		font-weight:bold;
		color:#fff;
		display:block;
	}
	
 #burger {
		position:absolute;
		top:0.3rem;
		right:0.3rem;
		width:1.6rem;
		height:1.6rem;
		background: linear-gradient(to bottom,
			rgba(255,255,255,1) 20%,
			rgba(255,255,255,0) 20%,
			rgba(255,255,255,0) 40%,
			rgba(255,255,255,1) 40%,
			rgba(255,255,255,1) 60%,
			rgba(255,255,255,0) 60%,
			rgba(255,255,255,0) 80%,
			rgba(255,255,255,1) 80%
		);
		
	}
	
	
 #mainWrap {
		width:100%;
		padding:2rem 0.5rem;
		margin:0;
	}
	
	
 #siteTitle {
		font-size:1.2rem;
	}
	
 #siteDescription {
		font-size:0.9rem;
		padding:0.3rem;
	}
	
 #mainTitle {
		font-size:1.3rem;
	}
	
 #mainBody  h2{
		font-size:1.1rem;
	}
	
	.deka{
		font-size:2em;
		
	}
	
}

</style>
</head>
<body>
	<div id="headerWrap">
	
		<div id="header">
		
			<div id="headerMain">
			
				<h2 id="siteTitle">うさぎのハキダメ</h2>
				<p id="siteDescription">あなたの貴重な時間を浪費するサイト</p>
			
			</div>
			<label id="burger" for="menuSW"></label>
			<input id="menuSW" type="checkbox">
			
			<ul id="headerMenu">
				<li><a href="">HOME</a></li>
				<li><a href="">日記</a></li>
				<li><a href="">苦情はこちら</a></li>
				<label id="close" for="menuSW">×</label>
			</ul>
			
		</div>
		
	</div>
	<div id="mainWrap">
	
	
		<h1 id="mainTitle">おれの時代キタかも！？</h1>
		<div id="mainBody">
			<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>
	</div>
</body>
</html>

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