スマートフォン 23
画像と動画の最適化テクニック

スマートフォンサイトは閲覧する端末によってサイトの幅が多少変わる。ここでは、画像と動画を画面幅全体にフィットさせる方法を紹介しよう。レスポンシブWebデザインにも活用できる手法だ。

制作・文／岩本朗

BROWSER iOS Andoroid

01

imgタグで表示する画像を、画面幅に合わせて可変表示にする。

CSSで、max-width: 100% にすることで画像サイズが画面幅（要素幅）より大きい場合は縮小される。高さは、height:auto でアスペクト比を保ったまま縮小することができる【1-1】。

【1-1】画面幅より小さい画像は通常の大きさで表示される。

02

次は、背景画像を画面幅に合わせて可変表示にする方法だ。

CSS3のbackground-size: 100% autoで背景画像を可変にすることができる。フルスクリーンの背景画像などに効果的だ【2-1】。

【2-1】ホーム画面に登録したいページを開き、下の中央のボタンをタップ。

【2-1】念のため、ベンダープレフィックスを指定している。

03

YouTubeの動画も画面幅に合わせて可変表示にできる。

動画の埋め込みコードをdivで囲み、CSSを指定する。動画のアスペクト比が16:9 なので、要素の高さを% 指定（9/16=0.5625+再生バー30）することで可変にしている。これで、動画の埋め込みコードのiframeもdivの大きさに合わせてフィットさせることができる【3-1】。

【3-1】参考元： http://webdesignerwall.com/tutorials/css-elastic-videos

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。