[toc]
coverとcontainの違い
時々どっちがどっちか解らなくなるので、栞がわりにメモを残しておきたいと思います。
サイト製作では背景画像を変えるだけで、かなり印象が変わるということを私はよく忘れて、ガラッと雰囲気を変えたくなる事があります。
部屋の模様替えのように。。
それを避けるためには、慎重に背景画像を選び、これだけ悩んで決めたんだから、長く使おう！！と思うくらい悩むことも大切かと思います♭
どうしても変えたくなった場合は、気持ちを尊重することも大切ですが…。
本題のbackground-size: cover;
background-size: contain;
違いについての理解ですが、
containは画面のサイズに関係なく、常に背景画像の全体が表示される
coverは画面のサイズに合わせて画像が表示される
これは、それぞれX軸とY軸を基本にした考え方であり、web制作においても潜在的に皆さんお使いだと思います。
文字の大きさ指定もそうですが、全体のバランスを考えて書きますよね。
PXで指定する場合は、そこまで細かく全体のバランスを意識しませんが、％で指定する場合は全体のバランスを考えて、計算した数値を指定する必要があるのです。
＊サンプルソース＊ベンダープレフィックス対応
body {
background: #f9f9f9 url(../img/bg-1.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
参考：https://www.yuu-diaryblog.com/2016/09/13/css-background-size/
この時、「画像のどの部分が見えやすいように持ってくるのか？」
「どうすればきれいに見えるのか？」も考えながら配置したいです。
その場合は background-position を使います。
設定方法は
background-position: right;
background-position: bottom;
background-position: center;
background-position: top;
プラス、 px em % による設定方法があります。
%で指定する場合も、rightやbottomで指定する場合も、まずは基点がどこになるのかを考えて配置します。
参考：https://dotinstall.com/lessons/basic_css_layout/35710
背景画像を使わない場合
背景画像を使わず、シンプルなデザインにする場合はカラーだけでも
十分綺麗なWebサイトになりますよね。
その場合は div要素を作り、クラス、IDを決めていき、画像も細かく配置決めをしながら、設定していきます。その時、最もよく使うのがmarginとpaddingでした。
左に寄せたり右に寄せる大きなdiv要素の配置は、floatやclearfixを理解してからでないと、設計できません。。
floatの概念は、文章を読むだけでは理解に苦しむので、動画をググって見つけると身につけられます。
私のおすすめ :
ドットインストール
一から解説してくれていて、とても参考になります。
頭が混乱してきたら、理解を深めるとスッキリしてきて、仕事の効率もアップします。
ぜひお試しを！
【PR】
更新しました！
People Meet Art
Adminartist 解説PDF
