cssで画面が縦の場合と横の場合で挙動を変える
ホームページ制作において、レスポンシブはとても重要な要素です。
インターネット接続端末は、総務省の統計によると、すでにスマホが1位で、ＰＣは2位です。
日本の半分以上の方は、ホームページをスマホで見ているのです。
その一方、ＰＣでの閲覧もまだまだあります。
そのため、閲覧する端末によって、見やすく変形するレスポンシブは欠かせません。
さらに言うと、スマホで閲覧する際に通常は「縦置き」で閲覧しますが、「横置き」で閲覧する場合もあります。同じスマホでも縦置きと横置きで挙動を変える必要があります。
今回は、縦置き、横置きの切り替えについて調べてみました。
通常は画面の横幅で切り替えています
レスポンシブをコーディングする場合、画面の横幅で端末を判断します。
一昔前は、メーカー名などで判断していましたが、最近ではほとんど意味がなくなりました。
純粋に画面幅で切り替えたほうが確実です。
コーディングも、横幅に合わせてコーディングできるので、端末を気にせずコーディングできます。
ここで疑問：スマホの縦置き／横置きの判断はどうすればよい？
ＰＣであれば、たいてい横置きで、縦置きにしても十分な横幅があります。
ですがスマホの場合はどうでしょうか?
縦置きの場合、横幅は狭いですが、横置きでもＰＣに比べると狭いです。
これも、一応横幅でも判断できます。
スマホの縦置きで横幅が広かったとしても、レスポンシブならばそれなりに表示するためです。
ですが、もっと簡単に判断する方法がありました。
ダイレクトに、現在「縦置き」なのか、「横置き」なのかを判断する記述方法がありました。
まずは作成してみたものがこちら
こちらのサンプルが、縦置き、横置きの切り替えをダイレクト判断だけで行ったものです。
ソースはこちら
このサンプルのソースは以下になります。
縦置きの時と、横置きの場合とでメッセージが変わります。
思いのほか単純です。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>縦横設定</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box
{
padding: 10px;
border: 10px solid #CCC;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
max-width: 400px;
text-align: center;
}
/* 縦置き */
@media (orientation: portrait)
{
.yoko
{
display: none;
}
.tate
{
color: #F00;
}
}
/* 横置き */
@media (orientation: landscape)
{
.yoko
{
color: #69F;
}
.tate
{
display: none;
}
}
</style>
</head>
<body>
<div class="box">
<p class="tate">現在縦置きです</p>
<p class="yoko">現在横置きです</p>
</div>
</body>
</html>縦置きと横置きを判断している部分
スタイルシートで、横置きと縦置きを判断しているのは以下の部分です。
/* 縦置き */
@media (orientation: portrait)
{
}
/* 横置き */
@media (orientation: landscape)
{
}orientation: portrait が横置き
orientation: landscape が縦置きです。
ちなみに、スマホに限らず、タブレットやＰＣモニターでも反応します。
仕掛けが単純なので、覚えるだけでＯＫです。
あとは創意工夫
やろうと思えば、横幅判断だけでも縦置き、横置きの処理はできます。
ですが、今回の指定を使うと「あえて横置きの場合」、「あえて縦置きの場合」が指定できます。
例えば全画面表示をする場合、縦置き用の画像と横置き用の画像を切り替える必要がります。
そういった場合は、横幅判断だけでは間違う可能性があります。
確実に横置きか縦置きかを判断する必要がある場合に重宝します。
技術は、知っていることが前提ですが、創意工夫して使えることがもっとも大事です。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
