<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;
padding-top:2rem;
}
img{
width:40%;
height:auto;
display:block;
margin:0 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;
flex-wrap:wrap;
justify-content:space-between;
}
#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%;
}
#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;
}
#headerMenu{
position:absolute;
display:block;
top:0;
left:-70%;
width:70%;
height:100vh;
background-color:#59b;
z-index:1000;
transition-propaty:left;
transition-duration:0.5s;
}
#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;
}
#headerMain{
justify-content: center;
}
#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>
<picture>
<source class="lazy" srcset="" data-src="あかね.png" media="(min-width: 1000px)" />
<source class="lazy" srcset="" data-src="あかね2.png" media="(min-width: 500px)" />
<img src="あかね3.png" />
</picture>
<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>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(
entries => {entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.srcset = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});},
{
root: null,
rootMargin: "-250px",
threshold: 0
}
);
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
}
});
</script>
</body>
</html>
