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

HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)で使用する最初の雛形。reset.cssと完成後のソースは本書のサポートサイトからダウンロード出来る。

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>

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;
}

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

posted with amazlet at 16.03.15

吉田真麻
翔泳社
売り上げランキング: 9,770

Amazon.co.jpで詳細を見る

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

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