表示する画像や文字の切り替えを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用画像を表示しています」の文字領域が確保されています。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

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

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ