普通のコーディングはそこそこ慣れてきたけど、最後の仕上げ作業が苦手。
いつも同じことをするのでメモ。
全体編
全画面に表示するときはhtmlからheight:100%に
html,body{
height:100%;
}
背景色の統一にはbodyから
body {
background: black;
}
背景固定したいときはDOMを1つ置いてみる
置いてfixed。他の要素を囲まないように注意。
index.html
<body>
<div class="background"></div> // 背景用のdiv
<div class="l-top">・・・</div>
<div class="l-main">・・・</div>
<div class="l-footer">・・・</div>
</body>
common.css
.background{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
background-image: url('../../img/main.jpg');
background-size: cover;
z-index: -1;
}
レスポンシブ編
scssを使う場合のcss3のメディアクエリ。
（そのうちBourbon Neatも使えるようにはなりたい）
- ブレイクポイントを設定
-
@mixinを作成 -
@contentを使って中を追記できるようにする
common.scss
$breakpoint: 800px;
@mixin media { // 800px以上のとき
@media screen and (min-width: $breakpoint) {
@content;
}
}
実際の例
top.scss
.l-top {
background-image: url('/img/exam.img');
background-size: cover;
height: 400px;
@include media {
height: 360px;
}