雛形：HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141577/mmqiita-22/ref=nosim/" name="amazletlink" target="_blank">HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)</a>で使用する最初の雛形。reset.cssと完成後のソースは[本書のサポートサイト](http://www.shoeisha.co.jp/book/detail/9784798141572)からダウンロード出来る。







```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>サイトタイトル</title>

    <!-- Bootstrap -->
    

    <link href="css/reset.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>
<body>

    <header class="header">

    </header>


    <div class="wrapper clearfix">

        <main class="main">

        </main>

        <div class="sidemenu">

        </div>

    </div>


    <footer class="footer">

    </footer>



    <script type="text/javascript">
		


    </script>
</body>
</html>


```


```css:style.css
@charset "UTF-8";

html{
    font-size:62.5%;
}

body{
    color:#333;
    font-size: 1.2rem;
    font-family: Meiryo , sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

a:link, a:visited, a:hover, a:active {
    color: #d03c56;
    text-decoration: none;

}



.header {
  width: 100%;

}

.wrapper {
  width: 970px;
  margin: 30px auto 40px;

}

.main {
  display: block;
  float: left;
  width: 660px;

}

.sidemenu {
  float: right;
  width: 275px;

}

.footer {
  width: 100%;

}

.clearfix::after{
    content: '';
    display: block;
    clear: both;

}


.header, .main, .sidemenu, .footer{

    border: 1px solid #aaa;
    background-color:#ccc;
}

.header, .footer{
    height: 100px;
}

.main, .sidemenu{
    height:500px;
}


```

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141577/mmqiita-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51dxCHwwS2L._SL160_.jpg" alt="HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141577/mmqiita-22/ref=nosim/" name="amazletlink" target="_blank">HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 16.03.15</div></div><div class="amazlet-detail">吉田 真麻 <br />翔泳社 <br />売り上げランキング: 9,770<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141577/mmqiita-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>