CSSのbackground-sizeプロパティを利用する
- 必要な知識： 基本的なHTMLとCSS
- 必要なもの： HTML / CSSエディター、最新のブラウザー
- プロジェクト時間： 30分-1時間
さまざまなCSS3モジュールによってもたらされる変更は、設計者やフロントエンド開発者にとって非常にエキサイティングです。帯域幅とHTTPリクエストの減少、メンテナンスの迅速化、画像の代わりに実際のフォントの使用はすべて、SEOとアクセシビリティの面で大きな利点です。しかし、少し無視されているように見える領域の1つは、新しい背景プロパティです。はい、 グラデーションは大流行です —そして当然のことながら—しかし、徹底的に調査していない可能性のある非常に便利なビットがいくつかあります。おそらく彼らはより実用的で、ボックスシャドウとボーダー半径のスワッガーを持っていないようですが、このチュートリアルではあなたの考えを変えるつもりです。私のお気に入りの1つは、背景サイズです。いくつかの可能性が何であるかを見てみましょう。
background-sizeプロパティは、期待どおりの動作をします。X軸（水平方向）とY軸（垂直方向）の両方で背景画像のサイズを指定できます。 background-sizeプロパティに指定できる値は次のとおりです。
- ピクセル値
- パーセンテージ-背景のポジショニングエリアに関連
- auto-画像のデフォルトまたは実際のサイズ
- カバー-アスペクト比を維持しながら、背景のポジショニングエリアを完全にカバーします。クリッピングが発生する可能性があります。
- 含む-背景画像を拡大して、背景のポジショニング領域に完全に含めることができるようにします。クリッピングが発生しないため、背景画像とコンテナの側面の間にスペースが表示される場合があります。
01.パーセンテージ値は私たちに柔軟性を与えます
奇妙な音についてストレスを感じないでください カバー そして 含む まだです—後でそれらのいくつかの良いデモンストレーションを見ていきます。パーセンテージ値を調べることから始めましょう。特にレスポンシブデザインの分野では、背景画像のサイズをパーセントで設定するためのさまざまな用途があります。 1つの例は、多くの要素の背後に微妙なグラデーションがある一貫したデザインスタイルです。単一のグラデーションを作成し、任意のコンテナーで機能するようにサイズを変更できます。この例では、すべてのモニターで確実に表示されるように青を使用しましたが、ページでははるかに微妙なものになる可能性があります。画像自体は下部が青で、上部が徐々に白に変わります—幅10ピクセル、高さ35ピクセル。コードは次のとおりです。
div {
背景画像：url（gradient.jpg）;
背景位置：左下;
背景サイズ：100％70％;
background-repeat：no-repeat;
}
画像を各ボックスの下部から開始し、100％拡大するように設定しましたが、残りの部分が白にフェードできるように、高さは70％に設定しました（同じように簡単に20％に設定できます）。セントまたは100パーセントの高さ）。画像は70％のマークで最初からやり直すため、繰り返しなしを使用する必要があります。この手法は、単一の画像を繰り返し再利用できるため、HTTPリクエストと帯域幅を節約でき、兵器庫に最適です。
02.さらに柔軟でアクセスしやすい用途
パーセント値には、さらにエキサイティングな用途があります。ページをより柔軟で破壊できないようにするために、そして特にアクセスしやすくするためにできることは何でも、私はもっと興奮しています。ええ、私は知っています。オタクにとってはそれほど時間はかかりません。最近 私はサイトを構築していました フロントページが本質的に非常にグラフィカルであったデザイナーのために。
私はこのように小さな農民の市場のスタンドを意味的に壊しました。カーテン/ステージ/雲はすべて装飾的なイメージでした。しかし、このページのスタンド自体はロゴです。 alt属性でそれが何であるかを示したいので、これには背景画像を使用したくありません。スタンドにある農産物のバスケットはサイトのナビゲーションであり、「まあ、画像にして完成させるだけです」と言う前に、ナビゲーションとインテリアに@ font-faceを使用した実際のテキストを使用していたことを知っておく必要があります。見出し。これで終わりです。ページの主要部分のコードは、青いグラデーションの背景を持つ非常に単純なdivに含まれています。
'freshest' divは、ナビゲーションとロゴ画像を保持します。また、背景画像として日よけがあります。各バスケット画像はテキストなしでエクスポートされ、各リンクはそれぞれのリストアイテム内に配置されました。最後に、ロゴはalt属性でページに配置されました。見栄えが良く、問題はありません。またはあるかもしれませんか？
03.崩壊するデザイン
通常、アクセシビリティという言葉を聞くとき、あなたの心はある種のスクリーンリーダーまたは支援技術を想像します。しかし、人口には常に成長している別のセグメントがあり、それはロービジョンユーザーです。お母さん、お父さん、おじいちゃん、おばあちゃん、あなたもそうかもしれません。これらのユーザーはより大きなテキストサイズを必要とし、おそらく彼らのサーフィンの習慣は次のようになると想像するでしょう：彼らはあなたのサイトに到着し、10pxのテキストを見て、読むことが不可能だと思うので、ブラウザのコントロールを使ってテキストサイズを増やします。そしてもちろん、彼らは「最新のブラウザ」を使用しているので、ページ全体がズームします—画像はテキストサイズと同じように増加します。正しい？多分。そうでないかもしれない。
別のシナリオは次のようになります。低視力のユーザーは、Web上のほとんど（またはすべて）のテキストを読みにくいと感じています。彼らは、訪問するすべてのサイトでテキストを増やすプロセスを経ることを望んでいません。その代わりに、ブラウザの設定に移動して、基本フォントサイズを変更します。ブラウザの通常の基本フォントサイズは16pxです。しかし、おそらくこのユーザーは、24ピクセル、32ピクセル、さらには52ピクセルでWebをよりよく読むことができると判断したのかもしれません。新しいパーソナライズされた設定でサイトにアクセスすると、テキストは大きくなりますが、サイトの画像はズームされません。そして、その結果は恐ろしいものになる可能性があり、多くの場合、完全に判読できません。
04.テキストとともに成長する
ページ上で画像を調整した場合でも、独自の設定で閲覧した場合でも、画像がテキストサイズとともに大きくなる可能性がある場合はどうなりますか？これは、仲間の開発者と結婚することが役立つところです。画像の多いページについて夕食の席で不平を言い、テキストサイズの増加の影響について泣き言を言ったとき、私のこれまで創造的な夫は「背景サイズはどうですか？」と尋ねました。ビンゴ！私は何年もの間魔法のemユニットに恋をしてきましたが（私自身のサイトはem-sizingで構築されています）、それを新しいbackground-sizeプロパティと組み合わせることをまだ考えていませんでした。ページをより読みやすく、アクセスしやすくするためのなんとすばらしい方法でしょう。私が「emunit」という用語を使用したときに頭がフルスピンした人のために、簡単な説明をさせてください（残りの人は次の段落をスキップします）。
emユニットのサイズは、要素の基本フォントサイズに基づいています。したがって、本文のフォントサイズを100％に設定すると、基本フォントサイズ（変更されていない場合）は16pxになります。これは、1em = 16pxを意味します。要素を6em幅に設定すると、（16px * 6）または96px幅になります。ただし、ユーザーがブラウザのフォントサイズを32pxに変更した場合、1em = 32pxです。したがって、同じ6em幅の要素は（32px * 6）または192px幅になります。これがテキストサイズと要素サイズの比率を維持するのにどのように非常に役立つかがすぐにわかります。 （開発にemsを使用することには多くの優れた点がありますが、ここはそのための場所ではありません。Googleはあなたの友達です。）
05.ちょっとした調整
ユーザー固有のフォントサイズの気まぐれに耐えられるようにするには、ページを2、3回すばやく調整するだけです。まず、すべてのサイズをピクセルからem単位に変更する必要があります。日除けを保持する.freshestdivは、幅534pxから33.375emに変更されました。ただし、日除けの背景画像自体のサイズが大きくなるわけではありません。それを保持しているdivのサイズを増やすだけです。背景サイズを入力してください！
.freshest {
幅：33.375em;
背景サイズ：100％自動;
}
これにより、日よけの背景画像をX軸に合わせて拡大縮小し、テキストサイズを大きくすると幅が広くなりますが、野菜のバスケットと重ならないように本来の高さを維持できます。ナビゲーションもシンプルでした。すべてのナビゲーション要素のサイズが同等のem単位に変更されると、リストアイテムのバスケットの背景画像のサイズは両方向で100％になりました。
.navMain li {
背景サイズ：100％100％;
}
最後に、その厄介な野菜スタンドのベース画像。その画像は直接HTMLに含まれているため、背景画像ではありません。background-sizeでサイズを変更することはできません。しかし、信仰を失わないでください。ここにも解決策があります。 HTMLから幅と高さを削除し、それをem単位としてCSSに配置することで、テキストに対して相対的なサイズにすることができました。まあ、そうだと思った。しかし、残念ながら、テキストサイズを大きくすると、他のすべてが美しくズームされましたが、野菜スタンドのベースは小さくて孤独なままでした。うーん。そして、その夜（あなたの脳が閉じず、最終的に物事を理解しない時間ですか？）眠りに落ちる間、私はそれが画像であり、テキストがなかったので、サイズが大きくなっていないことに気づきましたそもそもサイズ。悟り！
.homeLogo {
幅：33.75em;
高さ：18.75em;
フォントサイズ：1em;
-ms-interpolation-mode：bicubic;
}
font-size：1emを追加すると、探していた効果が得られました。画像内または画像に関連するテキストはありませんが。 1emのフォントサイズに基づいてサイズを変更する必要があると考えています。ワシの目の読者は、おそらく別の奇妙な特性、-ms-interpolation-modeに気づいたでしょう。 Internet Explorer（IE）には、画像サイズを大きくするときに問題があります。ピクセルが多く魅力的でないように見えることがあります。このプロパティは、IEがスケールアップするときにうまく機能するのに役立つため、これを使用します。 IEが幸せなときは、誰もが幸せです。そして今、より大きなテキストで私たちのページにアクセスすると、これが表示されます：
元の画像をこの画像と比較すると、雲が他の画像と一緒に成長していないことがわかります。これは、ピクセルサイズのままであるためです。読みやすさには必要ないので、値は変更しませんでしたが、必要に応じて変更できます。バックグラウンドサイジングのパーセントの優れた使用法をいくつか見てきたので、奇妙な新しい値を見てみましょう。
06.エリア全体をカバーしたいとき
デザイナーが大きな背景でコーディングするためにPSD（またはFireworks PNG —私のお気に入り）を私に与えることは珍しいことではありません。正確には、大きくて繰り返されない背景。デザイナーは、背景が繰り返されるか、単色にフェードアウトするか、別の方法で優雅に終了する必要があることを知っているほど、Webに精通している場合があります。時々そうではありません。しかし、今では、約80％の時間、微調整のために彼らに戻る必要がないようにするツールを自由に使用できます。最初のオプションはその面白いです カバー 値。これにより、背景画像は、アスペクト比を維持しながら、背景の配置領域（配置した要素を意味します）を完全にカバーします。これは、さまざまな解像度で発生する可能性のあるクリッピングに問題がないことを意味します。それに直面しましょう。私たちのサイトが最近表示されるデバイスや解像度の種類（小、中、大、さらには特大）を予測する信頼できる方法はありません。
夫が作った最近のサイト 今後のセーリングチャーターは、実際のカバー値の完璧な例です。最近バージン諸島から戻ってきた彼は、サイトの背景としてバージンゴルダ島の浴場の画像を使用したいと考えていました。しかし、それは屋外の写真なので、クリッピングは問題ではありません。
この写真がサイトの背景全体をカバーしていることを確認するために彼が使用したコードは次のとおりです。
体 {
background-image：url（../ images / baths.jpg）;
背景サイズ：カバー;
背景-添付ファイル：修正済み。
}
background-attachmentの追加のプロパティに注意してください。固定値は、画像がブラウザのビューポートに固定されていることを意味します。そのため、サイトをスクロールしても写真は移動しません。おしゃれ！
どのように見ても、画像は全身を覆っています。
ユーザーがサイトを体験している可能性のあるビューポートはさまざまですが、魅力的ではありません。
07.画像を含めるのが最適な場合
カバー値は、クリップされてもかまわない画像に最適です。しかし、常にそうとは限りません。に 別の個人的なプロジェクト 、今回は夫のデモ資料と休暇の写真をもっと使って（無料です）、ギリシャのサントリーニ島の美しい伝統的な青い屋根を失いたくありませんでした。
カバーを使用すると、一部の解像度では、屋根が右側から外れて見えなくなります。それは受け入れられませんでした。含むを使用すると、全体像が 常に 全体がありますが、長いページで画像が終了するだけでどうしますか？上の画像でその美しい青い空さえ見えますか？ Photoshopに精通していますか？あなたはそれを手に入れました、最も美しい写真はシームレスな経験をするために少し完璧を必要とするかもしれません。グレッグは空の色を取り、それをずっと青くしました。サントリーニ島の画像をページの下部に配置することで、ページ全体の背景として青い背景色（写真の終わりと同じ色）を使用することができました。つまり、ページが長くなり、空が永遠に続く可能性があります。
あなたが細心の注意を払っているなら、あなたはおそらく空がそうではないことに気づいたでしょう でも 一番上まで青。事実は、それはかなり不自然に見えるでしょう。要素に複数の背景画像を使用できるようになったため、Gregはページの上部にグラデーションを使用しました。つまり、一致する青から最上部の透明な白に変化します。 （以下のコードでは、スペースの都合上、-mozプレフィックスのみを示しています。-webkit、-ms、-oを含め、通常のCSS3プロパティで終了する必要があることに注意してください。）
体 {
背景色：rgb（96,147,201）;
背景画像：url（../ images / santorini.jpg）、-moz-linear-gradient（top、rgba（255、255、255、.8）、rgb（96,147,201）250px）;
background-repeat：no-repeat、repeat-x;
背景位置：中央下、左上;
-moz-background-size：含む、250px;
背景サイズ：含む、250px;
}
複数の背景に慣れていない場合は、上記を簡単に解釈します。彼は最初に背景色を追加しました。これは背景領域全体をカバーします（はい、16進数で簡単に書くことができます）。次に、コンマで区切られた2つの背景画像を含めます。いくつでも追加できます。リストされている最初のものが一番上にあり、そこから視覚的に下降することを覚えておいてください。 CSSグラデーションは背景画像と見なされるため、2番目になります 画像 リストに含まれています。グラデーションのプレフィックス付きバージョンを使用する場合は、プレフィックスごとにbackground-imageプロパティ全体（画像/グラデーションのリスト）をもう一度リストする必要があります。
background-repeat、background-position、background-sizeプロパティにも、コンマで区切られた2つの値があります。ブラウザは、最初の画像をこれらの各プロパティの最初の値と照合してから、次に進み、2番目の値に対して同じことを行います。いずれかのプロパティの値のリストが均等に一致していない場合、ブラウザは最初にリストされたものから再開します。写真がcontain値でボディの下部に設定され、グラデーションに250pxの値が指定されていることに気付いたと思います。つまり、パーセント/カバー/包含値のスペクトルにピクセルが追加されます。
08.ツールとヒント
カバーとコンテインがまだ少し曇っていて、遊びたい場合は、これを使用できます グレッグが作った気の利いたツール 。彼はボディ要素の周りに破線の境界線を配置したので、実際に何が起こっているのか想像できます。初期値は 自動 、実際のサイズで写真を表示します。クリック カバー そして 含む ブラウザのサイズを増減します。それはすべてクリスタルクリアになるはずです。
そして、簡単なヒント！可能性がある場合は、コンテンツの少ないページがある可能性があります。つまり、「フォームに入力していただきありがとうございます」など、ユーザーのブラウザの高さを埋められない場合があります。必ずHTML要素に100％の高さを追加してください。これにより、写真がページの一番下まで表示されます。
html {
高さ：100％;
}
楽しんでください。私はいくつかの使用法を聞きたいです 君は 背景サイズで見つかりました！で私にそれらをツイッター @stefsull 。ハッピーコーディング！
ステファニー（サリバン）レウィス は、代理店や新興企業向けに非の打ちどころのないHTML5 / CSS3Webページを作成するフロントエンド開発者です。彼女は、トレーニング、スピーキング、ライティングを通じて、他の人にも同じことをするように教えることを楽しんでいます。彼女はチャーターされたカタマランを合法的に船長にすることができ、それでも80年代のニューウェーブを愛しています。
