見出し画像

WEBサイト コーディング トレーニング② 「ベースコーディング」

ハル@helloco

前回の記事「トレーニング①」はこちら。
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,"ＭＳ Ｐゴシック",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;


背景のみの状態となった。

次回はヘッダーのコーディング。