WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

Webサイトのレスポンシブ対応をしている際、画面を横向きにした見た目を修正をするときがあります。縦向きのときは画面の高さがあるから内容が表示されていたけど、横向きになると高さが狭まるので、「内容が見えなくなる！」「意図せぬ見た目になっている…」といった問題が出てくることがあり、スマートフォンが横向きの条件のときにだけ効く制御が必要になってきます。
そんなときに使えるランドスケープモード対応について解説していきます。

「ランドスケープモード」とは？

ランドスケープモード（landscape mode）は、写真や文書、用紙、画面など長方形の領域の向きを表す用語の一つで、横向きのこと。横長、横置きとも言う。

引用：http://e-words.jp/w/ランドスケープモード.html

Webに限らず横向きのことを指す用語です。
ちなみに縦向きはportrait(ポートレート)になります。

CSSで横向き用の書き方は？

メディアクエリで横向き用の記述を書くことができます。
■横向き

@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
}

縦向きに関しては通常のメディアクエリを指定する中に記述をしていけば良いですが、横向きに関しては【orientation: landscape】という指定の中に横向きの条件のときだけに効かせたい内容を書いていきます。

では実際にデモを作ってみたので中身をみていきましょう。

See the Pen
スマホ横向き対応CSS by saki kurita (@saki_0415)
on CodePen.

PCで見る際は各ブラウザにある検証ツール（デベロッパーモード）でスマートフォンの見た目にして確認してみてください。
※【F12】キーで検証ツールを表示し、レスポンシブデザインモードにしてください。

縦向きの状態では、表の「見出し1」「見出し2」「見出し3」となっている部分はグレーの背景色がついています。
これを横向きの表示に変えると、背景色がオレンジ色に変わるように記述しています。
では、一つ一つCSSの記述を読み解いていきましょう。

まず、表の見た目を整えるために枠線をつけるなどのCSSを記述しています。

body *{
  box-sizing:border-box;
}
.table01 {
	border-collapse:collapse;
	width:100%;
	border:1px solid #cdcdcd;
	border-bottom:none;
}
.table01>tbody>tr>td,
.table01>tbody>tr>th {
	padding:5px 15px;
	border-bottom:1px solid #cdcdcd;
	text-align:left;
}
.table01>tbody>tr>th {
	width:170px;
	background:#ebebeb;
}
.table01>tbody>tr>td {
	line-height:2.2;
}
.table01>tbody>tr>td .name {
	display:inline-block;
	width:150px;
}
.table01.colum2>tbody>tr>th {
	width:250px;
}
.table01.colum2>tbody>tr>td:nth-of-type(1) {
	width:auto;
}

次に767px以下になったら、PC表示のときは横並びだった見出しと内容を縦積みに変更していきます。

@media screen and (max-width:767px) {
  .table01>tbody>tr>td,
  .table01>tbody>tr>th {
    padding:10px;
    display:block;
    width:100%;
  }
  .table01>tbody>tr>td .name {
    width:auto
  }
  .table01.colum2>tbody>tr>th {
    width:100%;
    background:#ebebeb;
  }
  .table01.colum2>tbody>tr>td {
    width:100%;
  }
  .table01.colum2>tbody>tr>td:nth-of-type(1) {
    width:auto;
  }
}

最後に横向き表示のCSSの記述です。
767px以下かつ横向きのとき、見出しの背景色を変えるという記述です。
ここで注目していただきたいのが、【.is-mobile】というクラスが付いているところです。

/*横向き対応*/
@media screen and (max-width:767px) and (orientation: landscape) {
  .is-mobile .box-area .table01 th{
     background:#ffe1ac;
  }	  
}

この横向き対応のlandscapeの記述ですがスマートフォンにだけ効くというわけではなく、PCのブラウザ幅でも効いてしまいます。
つまりPCのブラウザ幅を縮めていくと、767px以下のタイミングで横向きのCSSが効いてしまうということです。
今回やりたい条件としては、「スマートフォンかつ横向き表示のとき」なので、スマートフォンデバイスで閲覧されているかどうかの判定を行う必要がありますね。
なので、ユーザーエージェントによる判定をJavascriptで制御していきましょう。

$(function(){
	function isMobile() {
	    const ua = navigator.userAgent;
	    return ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0
	}

	// スマホのときにbodyタグにクラスをつける
	if (isMobile()) {
	    document.body.classList.add('is-mobile');
	}
});

ユーザーエージェントにてデバイス判定を行いスマートフォンだったらbodyタグに【.is-mobile】をつけるという記述です。
これにより、スマートフォンデバイスだったときのみ、表の見出し背景色をオレンジ色に変えるということができました。

まとめ

ページの作りによっては横向き対応をしなければならない場面もありますので、ランドスケープモードについて押さえておきましょう！

1冊ですべて身につくHTML & CSSとWebデザイン入門講座