アイキャッチ

どのデバイスサイズのスマホでも背景画像をぴったりにする方法


Webサイトをおしゃれに見せてくれるデザインの1つとして人気の高いフル
スクリーンデザイン。
なかなか画像のサイズが合わないとお困りの方も多いのではないでしょうか。
今回は、jQueryとCSSを使用して背景画像をデバイスに合わせる方法をご紹
介します。

 

1.jQueryBackstretchのプラグインを使用する方法

jQueryのBackstretchというプラグインを使用して実装する方法を説明してい
きます。

Backstretchは、画像を自動でリサイズし画面にピッタリ表示してくれるプラ
グインです。

 

HTMLファイルに以下のように記述します。

 

<< HTML >>

まず、jQueryを読み込むコードを記述します。
jQuery Backstretchのプラグインは以下のURLよりダウンロードできるので
右クリックでjsフォルダへ保存してください。
http://srobbin.com/jquery-plugins/backstretch/
次に、画像ファイルへのパスを指定します。
$.backstretch(“ファイルへのパス”);
記述はこれだけです。驚くほど簡単ですね。

 

2.スタイルシートで実装する方法

次に、CSSのスタイルシートのみで実装する方法を説明していきます。

 

スタイルシートに以下のように記述します。

<< CSSスタイリング >>

まず、backgroundプロパティで背景画像を埋め込みます。
次に、background-sizeプロパティで背景画像のサイズを指定します。
coverという値は、縦横比を保持しつつ画面を完全に覆う最小サイズになるよ
うに画像を拡大縮小することを意味しています。
また、-webkit-、-moz-、-o-では、各ブラウザに合わせて設定をしています。
記述はこれだけです。とても簡単ですね。

 

それでは、結果を見てみましょう。

 

<< 表示結果サンプル >>

 

— PC画面 —
表示結果サンプル

 

— タブレット画面 —
表示結果サンプル

 

— スマートフォン画面 —
表示結果サンプル

 

どのデバイスでも縦横比を維持したまま、ぴったり表示することができました。

 

まとめ

いかがでしたでしょうか。
こんなに簡単に実現できるんだ・・と驚いた方も多いのではないかと思います。
きれいな写真をぴったりと表示して、おしゃれなサイトを作りたい時にとても役
立つ技術ですね。

 

 

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスマホサイトに取り入れるべきUIの基本原則まとめ