表示する画像や文字の切り替えをdisplay/visibilityプロパティで行う

PCサイトとスマホサイトでは画面サイズが違いますので、表示する画像や文字を切替えたいことがあります。この方法ではCSSプロパティの設定を変えるだけで、非常に簡単に切り替えができます。

PCサイトとスマホサイト(モバイルサイト)の両方を、ひとつのHTMLコードで制作するには、レスポンシブWebデザインを使う手法があります。
レスポンシブWebデザインでは、画面サイズに合わせて画像や文字の大きさを変えることで対応しますが、画像や文字そのものを隠したり切り替えることもします。

CSSのdisplayプロパティやvisibilityプロパティを使うと、簡単に要素を表示させたり消したりすることができます。

displayプロパティを使った切り替え

displayプロパティは、要素の表示形式を指定します。

「display: block」と指定するとブロック要素として表示し、
「display: none」と指定するとボックス領域が生成されず何も表示されません。

以下は、PC用とモバイル用とで、画像と文字を切り替えるために作成したHTMLコードです。
CSS設定で切り替えるために、それぞれclassを指定しています。

CSSでは以下のように設定します。
クラスpc-imageとpc-wordsを大きな画面サイズでは表示させておき、画面横幅が640px以下になったらクラスsp-imageとsp-wordsのほうを表示させています。

実際のブラウザの表示は以下のようになります。

PC用画面(横幅が640pxより大きい場合)

PC用画面-displayプロパティ

モバイル用画面(横幅が640px以下の場合)

モバイル用画面-displayプロパティ

visibilityプロパティを使った切り替え

visibilityプロパティは、要素の表示する/しないを単純に切り替えます。

「visibility: visible」と指定すると要素を表示し、
「visibility: hidden」と指定すると表示されません。ただし要素のボックス領域は確保されます。

visibilityプロパティではdisplayプロパティと違って、表示されていない要素のボックス領域も確保されていますので、両方の要素が存在するかのようにレイアウトされます。

画面の横幅が640pxで表示が切り替わるように、CSSでは以下のように設定します。

実際のブラウザの表示は以下のようになります。

PC用画面(横幅が640pxより大きい場合)

PC用画面-visibilityプロパティ

displayプロパティで切り替えた時と違い、「PC用の画像」の下に「モバイル用の画像」の領域(640x292)が確保されています。

モバイル用画面(横幅が640px以下の場合)

モバイル用画面-visibilityプロパティ

「PC用の画像」の領域と、「PC用画像を表示しています」の文字領域が確保されています。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ