WebデザイナーのためのCSS3実践講座

背景画像のサイズの調整

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「background_size」を使って、背景画像のサイズを調整する方法について、解説致します。
講師:
05:04

字幕

このレッスンでは background-size ― という CSS プロパティを使って 背景画像のサイズを調整する方法について― 解説していきます まずはダウンロードしてきたこちらの background-size ― というフォルダの中に入っている こちらの index.html ファイルと― こちらの style.css ファイルを エディタで開いて下さい そして こちらがそれらの ファイルを開いた状態です そして こちらの右側にはこちらの index.html ファイルを― ブラウザで開いた状態を表示しています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらのブラウザの方からみていきます まずはこちら default と 書かれていますね この枠は div タグを表していて その中に写真を背景画像として― 設定している状態となっています この div タグの枠の大きさと こちらの写真の大きさが一致していない為― default で背景画像を設置すると このような形で隙間が出来てしまう― といった状態になっています それでは こちらの背景画像をこの枠の中で サイズを調節していく方法について― みていきたいと思います まずは一つ目 こちらですね 背景画像をこの枠いっぱいに表示します 但し 枠の横幅と縦幅と この写真自体の 横幅と縦幅が一致していないので― このように枠いっぱいに写真を 表示させようとすると― 切り取られる部分が出てきます その切り取られた部分に関しては このように表示されていない― といった形になります では この部分をどのように 実装しているかと言うと― こちらの style.css の方を 見てみましょう こちらの styleA の部分ですね こちらの styleA の部分には background-size ― という CSS プロパーティーを 書いています そして そちらに cover と書いていますね このように指定する事によって 背景画像を枠いっぱいに― 表示させる事が出来ます それでは 次を見てみましょう 次はこちらの部分です 次は画像全体を枠内で表示 と書いていますね 今回は画像の縦幅 横幅を基準として その画像全体がこの枠内で― 表示される様にする方法についてみていきます このようにすることで隙間が 出てきてしまう場合もありますが― 画像自体は切り取られること無く 全てが表示されています では こちらの部分を CSS で見てみます それがこちらの styleB という部分になります こちらの部分では 同じように background-size ― という CSS プロパーティーを 書いて そこの値に contain ― と書いていますね このように値を指定することによって このような表示のさせ方をする事が可能です それでは 次を見てみましょう 次はこちらです このように サイズ指定 と書いていますね 今回はこちらの背景画像のサイズを 指定する方法についてみてみたいと思います それがこちらの styleC の部分です 同じように background-size と書いて 100px 100px ― と書いていますね まず一つ目の 100px は画像の横幅 そして 次の 100px は画像の縦幅を― 指定する形となっています 今回は正方形ですね このように書くことでこちらのように 背景画像のサイズを変更する事が可能です このように background-size を― 利用する事によって背景画像の 表示のさせ方を調整する事が可能です この background-size ですが 例えば アイフォーンの― レティナディスプレイといったような 高解像度のディスプレイに― 綺麗に画像を表示させる際とかにも 有効に利用する事ができます アイフォーンで表示される実際の画像サイズ よりも二倍の大きさの画像を作成しておいて― そして こちらの背景画像にその画像を 置いたときに その見た目のサイズ 要するに ÷2 したサイズを 指定する事によって― そういった高解像度のディスプレイに対しても 綺麗に画像を表示させることが― 可能となっています 以上でレッスンは終了です 今回は background-size という CSS プロパーティーを使って― 背景画像のサイズを調整する 方法について解説致しました 以降のレッスンでは rgba というものを使って― 要素を透過させる方法について 解説していきますので― そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

2時間15分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。