スマホとパソコンで表示を変える

ホームページをスマートフォン対応させた時に、パソコンと異なる表示をさせる方法について説明しています。

隠す

 パソコンでは1画面内に多くの情報を表示出来ますが、スマートフォンでは1画面に表示出来る情報が少なくなります。

 このため、スマートフォンで表示した時、ページが長くなりすぎないよう隠す事も出来ます。隠したい場合はスマートフォン用のCSSファイルで以下のようにします。

【スマートフォンで隠すCSS指定】
.test {
display:none;
}

 上記のクラスを隠したい場所で使います。

【隠したい場所へのHTML反映】
<div class="test">隠したい情報</div>

 上記により、パソコンで見た時は文字が表示されますが、スマートフォンで見た時に表示されなくなります。

パソコンと見た目を切り替える

 パソコンで見た時と、スマートフォンで見た時に表示を切り替える事も出来ます。

【パソコン向けCSS】
.test1 {
display:block;
}
.test2 {
display:none;
}

 上記によりパソコンで見た時は、test1のクラスを使うと表示され、test2のクラスを使うと表示されなくなります。

【スマートフォン向けCSS】
.test1 {
display:none;
}
.test2 {
display:block;
}

 上記によりスマートフォンで見た時は、test1のクラスを使うと表示されず、test2のクラスを使うと表示されるようになります。

 HTMLではtest1をパソコンで表示したい場所、test2をスマートフォンで表示したい場所で使います。

【パソコンとスマートフォンで表示を切り替えるHTML指定】
<p class="test1">パソコンで表示</p>
<p class="test2">スマートフォンで表示</p>

 上記を適用すると以下のように表示されます。尚、分かり易いように枠を付けています。

パソコンで表示

スマートフォンで表示

 パソコンで見た時は「パソコンで表示」、スマートフォンで見た時は「スマートフォンで表示」と表示されていると思います。

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加