WEBサイト コーディング トレーニング② 「ベースコーディング」
前回の記事「トレーニング①」はこちら。
https://note.mu/ecmemo/n/n4ad7dccd625d
1. まずは、HTMLにて把握した要素を配置するようにコーディング
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
<title>香水屋サンプルサイト</title>
<meta name="description" content="香水屋サンプルサイト">
<meta name="keywords" content="香水,女性,香り">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header class="header">
</header>
<section class="lineup">
</section>
<section class="about">
</section>
<footer class="footer">
</footer>
</body>
</html>
2. CSSでベースをコーディングしていく
@charset "UTF-8";
/* --------------------------------
* base
* -------------------------------- */
html {
font-size: 62.5%;
}
*, *::before, *::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active{
color: #d03c56;
text-decoration: none;
}
続いて、bodyに対するスタイル。
body {
font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"MS Pゴシック",Arial,Verdana,sans-serif;
line-height: 1.6;
font-size: 1.8rem;
color: #222222;
background: #efefef url(../img/unsplash.png) no-repeat 0% 0% /100% auto fixed;
}
background: #efefef url(../img/unsplash.png) no-repeat 0% 0% /100% auto fixed;
↓
background-color: #efefef;
background-image: url(../img/unsplash.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% auto;
background-attachment: fixed;
https://note.mu/ecmemo/n/nba88baf2298b
参考 <基本のベースコーディング>
クリアフィックスも記述しておく。
/* --------------------------------
* parts
* -------------------------------- */
.cleafix::after{
content: "";
display: block;
clear: both;
背景のみの状態となった。
次回はヘッダーのコーディング。