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
翔泳社
売り上げランキング: 9,770