2017
12.06

背景画像をwebブラウザいっぱいに配置するには?CSS | coverとcontain

CSS, CSS3

coverとcontainの違い

時々どっちがどっちか解らなくなるので、備忘録💧

サイト製作では背景画像を変えるだけで、かなり印象が変わるということを忘れてしまい勝ち。

ということは、慎重に背景画像を選ぶ必要があるということでもありますね。

さて本題の

background-size: cover;
background-size: contain;

違いについての理解ですが、

containは画面のサイズに関係なく、常に背景画像の全体が表示される

coverは画面のサイズに合わせて画像が表示される

 

これは、それぞれX軸とY軸を基本にした考え方であり、web制作においてはいつも必要な考え方です。
文字の大きさ指定もそうですが、全体のバランスを考えて書きますよね。
PXで指定する場合は、特に全体のバランスを意識しませんが、%で指定する場合は全体のバランスを考えて、指定する必要があるのです。

これは常に意識していないといけません。

*サンプルソース*ベンダープレフィックス対応

参考: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

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。