<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML/CSS Sample</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<h1>クリック可能なdiv</h1>
<a href="http://mag.autumn.org/">
<div>This is a div</div>
</a>
<h1>偶数奇数でスタイルを変える</h1>
<style>
li:nth-child(odd) {
background: #ff0;
}
li:nth-child(even) {
background: #0ff;
}
</style>
<ul>
<li>LINE1</li>
<li>LINE2</li>
<li>LINE3</li>
<li>LINE4</li>
</ul>
<h1>横に並んだDiv要素の高さを揃える</h1>
<style>
.main {
display: -webkit-flex;
display: flex;
}
.sec {
background-color:#f00;
margin:1em;
}
</style>
<div class="main">
<sction class="sec">
<p>PART-1</p>
</sction>
<sction class="sec">
<p style="font-size:2em;">PART-2</p>
</sction>
<sction class="sec">
<p style="font-size:3em;">PART-3</p>
</sction>
</div>
<h1>要素の中央に揃える</h1>
<style>
.main2 {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
background-color:#f00;
}
.sec2 {
background-color:#00f;
}
</style>
<div class="main2">
<sction class="sec2">
<p>CENTER ME</p>
</sction>
</div>
</body>
</html>
