レスポンシブデザインで背景画像の表示の切り替え

【投稿日】 

レスポンシブデザインでホームページを制作する場合、色々配慮しなくてはいけないことがありますが、特に注意を払うのは画像の表示についてです。

大抵の場合、レスポンシブデザインでは画像のサイズはモニター、画面のサイズに合わせて変わるようにしています。

パソコン表示タブレット表示スマートフォン表示

上のスクリーンショットのように各端末の幅によって縮小したり拡大したりしています。

このあたりは簡単に出来ますが、問題なのは背景画像の表示の方法です。たとえばこのサイトのトップページのバナー、

バナー画像
パソコンではマウスを画像の上に持っていくと

マウスをもっていくと
にゅっと「詳細をチェック」という文字が出てきます。

この部分は背景画像と画像の組み合わせで

実はこの部分、背景画像に下の2枚の画像を使っています。
home-bn5-bgmodal-check

そしてその2枚の背景画像の上からHTMLで下の画像を貼り付けています。モニターによってはただの白にしか見えないかもしれませんが、「安心サポート」と薄いグレーで書かれています。
home-bn5

このブロックの高さ(画像の高さ)は180ピクセルですのでパソコン表示ではマウスがのっていないとき、「詳細をチェック」という背景画像の位置をブロックの上から180ピクセルの位置に表示させます。そしてマウスをのせたとき上から130ピクセルに表示させます。つまり「詳細をチェック」という背景画像を上に50ピクセル動かしているわけです。

タブレットやスマートフォンのときはどうする?

タブレットやスマートフォンのときは「マウスが画像の上にのっかる」ということが無いため最初から「詳細をチェック」という文字を表示させたくなります。タブレットやスマートフォンの場合は画像の幅が画面のサイズによって変わりますが、背景画像も同様に変えることができます。また変えなくすることもできます。

この「詳細をチェック」という文字はスマートフォンで見ると非常に小さくなってしまいます。そこで、スマートフォンのように画面が小さくなっても「詳細をチェック」という背景画像は小さくならないようにし、またブロック内に最適に収まるように文字サイズを調整しています。そして配置もブロックの最下部にあわせて表示させます。そうすると下のような感じになるわけです。
タブレットやスマートフォンのとき

なんでそんな面倒くさいことをするの?

そんな面倒くさいことしないで
201501177
こんな画像を作ってHTMLに貼り付ければいいだけじゃん…と思われるでしょう。

でもそうすると、タブレットやスマートフォンの画面のサイズによっては
201501178
くらいのサイズになることがあるため「詳細をチェック」が見えづらくなります。また、パソコン表示のときの「にゅうっと」がなくなってしまいますし。

ですからひと手間かけて、見やすくするわけです。

ホームページ制作のヒントカテゴリの最新記事

BURTONのホームページの404エラーページ

オリジナルの404エラーページをいくつかまとめてみた

見る側を楽しませてくれる404エラーページ作成しているサイトをいくつかピックアップしてみました。

バラク・オバマ氏のサイトの404エラーページ

404エラーページ(Not Found)はオリジナルにしよう

ページが見つからないときの「404エラーページ」。オリジナルにしておけばサイトからの離脱の心配も減ります。

とにかく何でも「DIY」

これをするとたぶんホームページで失敗する(2)

ホームページは素人でも簡単に作ることが出来ます。インターネットでちょっと検索すればいくらでもそのようなサービスがあります。

レスポンシブウェブデザイン

レスポンシブウェブデザインってどんなの?

スマホ対応のホームページが必要であることが言われるようになって久しいですが、まだまだ未対応のホームページが多いことに気付かされますね。

これをするとホームページで失敗する

これをするとたぶんホームページで失敗する(1)

ホームページはきちんとやれば成果は上がります。しかし私の経験上、こんな人は成果を上げられないことが多いです。

検索でヒットしなきゃ問い合わせはない

JimdoやWixについて検索してくる人が多いので

「Jimdo」「Wix」関連のキーワードでのアクセスが相変わらず多いので。

Wordpressが動かないんですヽ(TдT)ノ

ホームページ制作を自分でやるのか業者に任せるのかどちらがいい?

検索サイトで見つけてもらえるようなホームページを自分で作成するのはそれなりの時間と努力が必要です。

ホームページ制作・運営パック
ホームページ制作おすすめパック
格安WordPressパック
WordPressエントリーパック
WordPressスタンダードパック
WordPressビジネスパック
ウェブデザインオフィスクロスロードお急ぎ電話番号は080-7023-9643お問い合わせ電話番号は0532-39-6413メール相談

ホームページ制作&運営パック

ホームページ制作プラン

クロスロードのホームページ制作

クロスロードについて

コラム

ウェブデザインオフィスクロスロード