Template
2017.3.2002.
03.
04.
05.
06.
07.
08.
09.
10.
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テンプレート02</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Meddon" rel="stylesheet">
<style>
*{ margin: 0; padding: 0; box-sizing:border-box; }
html, body, article{ height: 100%; min-height:100%;}
body{ color: #333344; background-color: #fff; font-size: 11px; font-family: 'メイリオ', 'Meiryo', '游ゴシック体', 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
article{ min-width: 800px; margin: 0px auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center; }
section{ border: 0px solid #ccc; width: 280px; line-height: 34px; letter-spacing: 1.5px; margin: 0; padding: 20px; }
.left{ text-align: right; width: 50%; }
.right{ text-align: left; width: 50%; }
.line{ width: 50px; height: 90vh; position: relative; }
.line:before{ height: 100%; content:""; display:block; width:1px; background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); }
span{ color: #99a; font-size: 0.9em; letter-spacing: 0.5px; }
h1{ font-family: 'Meddon', cursive; color: #dedede; font-size: 6em; letter-spacing: 0px; font-weight: normal; height: 50px; }
a{ color: #99a; }
.about{ width: 600px; border: 1px dashed #ccc; margin: 0px auto 30px; padding: 20px; line-height: 22px; }
.so{ width: 450px; height: 100px; overflow: scroll; margin: 0; padding: 2px; border: 2px solid #ccc; }
</style>
</head>
<body>
<article>
<section class="left">
<h1>Template</h1>
<span>2017.3.20</span><br>
</section>
<section class="line"></section>
<section class="right">
01.<br>
02.<br>
03.<br>
04.<br>
05.<br>
07.<br>
08.<br>
09.<br>
10.<br>
</section>
</article>
</body>
</html>