tao-s · March 21, 2015 21:37
diff --git a/calc.html b/calc.html
 <!DOCUTYPE HTML>
 <html>
  <head>
    <title>CSS3 calc()って知ってた？</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        html,body{
          width: 100%;
          height: 100%;
          font-size: 16px;
          font-family: 'Noto Sans Japanese', serif;
        }
        h1,p,body{
          font-weight: 100;
        }
        ul{
            list-style-position: inside;
        }
        header{
          position: relative;
          top:10%;
          width: 100%;
          text-align: center;
        }
        section{
          position: absolute;
          width: 400px;
          height:300px;
          top:calc(50% - 150px);
          left:calc(50% - 200px);
          border:2px solid #AAA;
          background: rgba(198, 220, 247, 1);
          box-sizing: border-box;
          padding:62px;
        }
    </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" />
  </head>
  <body>
    <header>
      <h1>CSS3のcalc()って知ってました？</h1>
      <p>今日知ったんですが、cssで色々計算できるみたいなんですが、IE9以降が対応してて、以外と使えるっぽいです。<br />CSS3の仕様をもう一回確認しないとなぁ...</p>
    </header>
    <section>
      <h1>真ん中に</h1>
      <ul>
            <li>position: absolute;</li>
            <li>width: 400px;</li>
            <li>height:300px;</li>
            <li>top:calc(50% - 150px);</li>
            <li>left:calc(50% - 200px);</li>
      </ul>
    </section>
  </body>
 </html>
	<!DOCUTYPE HTML>
	<html>
	<head>
	<title>CSS3 calc()って知ってた？</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	html,body{
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-family: 'Noto Sans Japanese', serif;
	}
	h1,p,body{
	font-weight: 100;
	}
	ul{
	list-style-position: inside;
	}
	header{
	position: relative;
	top:10%;
	width: 100%;
	text-align: center;
	}
	section{
	position: absolute;
	width: 400px;
	height:300px;
	top:calc(50% - 150px);
	left:calc(50% - 200px);
	border:2px solid #AAA;
	background: rgba(198, 220, 247, 1);
	box-sizing: border-box;
	padding:62px;
	}
	</style>
	<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" />
	</head>
	<body>
	<header>
	<h1>CSS3のcalc()って知ってました？</h1>
	<p>今日知ったんですが、cssで色々計算できるみたいなんですが、IE9以降が対応してて、以外と使えるっぽいです。<br />CSS3の仕様をもう一回確認しないとなぁ...</p>
	</header>
	<section>
	<h1>真ん中に</h1>
	<ul>
	<li>position: absolute;</li>
	<li>width: 400px;</li>
	<li>height:300px;</li>
	<li>top:calc(50% - 150px);</li>
	<li>left:calc(50% - 200px);</li>
	</ul>
	</section>
	</body>
	</html>