
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.04.24
背景に関するプロパティの中に、背景画像のサイズを変更する際に使用するbackground-sizeプロパティがあります。
今回は、background-sizeプロパティについてまとめたいと思います。
背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1 ~ 背景プロパティの種類とbackground-color
CSS【 background 】2 ~ background-imageでレイヤーやグラデーションも
CSS【 background 】3 ~ background-repeat、background-attachment
CSS【 background 】4 ~ background-position
CSS【 background 】5 ~ background-size(本ページ)
CSS【 background 】6 ~ background-clip、background-origin
CSS【 background 】7 ~ 背景に関するショートハンドプロパティ
1.background-sizeプロパティ
2.background-sizeプロパティの値の数
3.キーワードで指定
4.%で指定
background-sizeプロパティは、背景画像のサイズを変更する際に使用します。
background-sizeプロパティで指定する値には、次のようなものがあります。
auto デフォルト値
画像の縦横比を維持したまま、サイズを自動計算するcontain 画像の縦横比を維持したまま、背景領域に収まる最大サイズに自動調整する
画像全体を表示するため、画像がno-repeatの場合は、画像で覆われない領域は背景色を表示するcover 画像の縦横比を維持したまま、背景領域に収まる最小サイズに自動調整する
領域の幅か高さの小さいほうに画像の幅か高さを合わせて全体を覆うため、画像がトリミングされる% 画像に対してのパーセンテージで指定 数値 pxやemなどの単位を付けて、画像のサイズを指定
background-sizeプロパティの値は、継承されません。
また、background-sizeプロパティは、全ての要素で使用できます。
containとcoverは、CSS3から追加されたキーワードです。これら使うと、画像が背景領域にちょうど収まるように指定することができます。
background-sizeプロパティは、1~2個の値を半角スペースで区切って指定します。
●containとcover以外の値で、値を2つ指定した場合は、画像の幅、高さの順の指定となります。
●containとcover以外の値で、値を1つ指定した場合は、2つ目の値(高さ)はautoとなります。
●containとcoverは、値は1つだけ(containならcontainだけ)指定します。
「background-size: contain 100%」のような指定をすると、ブラウザが指定の内容を認識できないため、デフォルト値のbackground-size: autoとなります。
background-sizeプロパティに、auto、contain、coverをそれぞれ指定してみます。
auto(デフォルト)
contain
cover
ソースは次の通りです。
(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:350px;
height:250px;
font-weight:bold;
background-color:#F9C;
background-image:url(img/living.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-size:auto;}
div#sample p:nth-child(2) {background-size:contain;}
div#sample p:nth-child(3) {background-size:cover;}(HTML)
<div id=”sample”>
<p>auto(デフォルト)</p>
<p>contain</p>
<p>coverlt;/p>
</div>
autoは原寸サイズです。background-sizeプロパティを指定しない場合は、デフォルト値のautoとなり、原寸サイズで表示されます。
coverは、レスポンシブレイアウトを考慮する際に最適な値です。
%で値を指定する場合は、背景領域の幅や高さに対するパーセンテージで画像の幅や高さを指定します。
%の値は、幅、高さの順で、値を半角スペースで区切って指定します。
2つ目の値(高さ)を指定せず、値を1つだけ指定すると、高さはautoとなります。
100%
auto 100%
70% 100%
ソースは次の通りです。
(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:350px;
height:250px;
font-weight:bold;
background-color:#F9C;
background-image:url(img/living.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-size:100%;}
div#sample p:nth-child(2) {background-size:auto 100%;}
div#sample p:nth-child(3) {background-size:70% 100%;}(HTML)
<div id=”sample”>
<p>100%</p>
<p>auto 100%;</p>
<p>70% 100%;/p>
</div>
%で指定する場合は、背景領域や画像の縦横比によって画像の見え方が違ってきます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.