MENU タップでメニューを表示

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

【投稿日】 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このページのトップへ

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

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

2015年11月11日
JimdoやWixについて検索してくる人が多いので

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

続きを読む

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

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

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

続きを読む

2015年3月27日
FacebookのLike Boxが廃止になりPage Pluginというのになるのだそうだ

Facebookの顔写真がずらっと並んだやつをウェブサイトに貼っている方、2015年6月23日には廃止になるようですよ。

続きを読む

2015年3月16日
モバイルフレンドリーじゃなくて困っている人が多いようです

モバイルフレンドリーじゃないからと慌てても仕方がない。これを機会にスマホ対応にじっくり取り組むのが賢明です。

続きを読む

2015年3月12日
スマートフォンからのアクセスがどの程度の割合かを把握

スマホからのアクセスがますます増える傾向にあります。業種によってはモバイル対応サイトが無いとやっていけない時期に。

続きを読む

DownThemAll!

2015年3月6日
無料ブログからWordPressへ移行させる時に…

地域ポータルサイトのブログをWordpressに完全移行!!

続きを読む

インストールをタップする

2015年3月4日
WordPressへの投稿をAndroidのアプリからやってみる

AndroidのアプリからWordpressへの投稿も試してみます。僕の持っている端末がかなり古く、しかも画面のキャプチャが出来ないので写真撮影です(汗)。

続きを読む