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">1230秒早い</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>

いいなと思ったら応援しよう!