2013年5月22日

CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう

皆様、ご無沙汰しております。笹亀です。
ブログを公開させていただくペースが遅くなってしまいました・・申し訳ございません。そのことが災いしたのか、先日、自分のスマートフォンを落としてしまい、液晶が派手に割れてしまいました。

さて最近、仕事をしている中でPC系だけではなく、スマートフォン系のサイトを作成をすることはもはや当たり前になってきました。そんなスマートフォンサイトでもさらにタブレットにも対応をさせたWebサイトの構築を求められることが多くなってきています。タブレットに対応させるサイトの構築方法ですが、様々なものが考えられます。
例えば動的にタブレット・スマートフォンを判定して、テンプレートを出し分けするといった対応する方法やViewPortを固定値にして作成する方法などがございます。
今回はViewPortは下記のようにデバイスのサイズにした状態でCSS3のメディアクエリというものを利用した方法をご紹介したいと思います。


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

メディアクエリとはメディアタイプとメディア特性を必要とする一つ以上の条件式からなりたちます。メディアタイプには様々なものがあり、それぞれの条件にあったときに特定のスタイルを適応することができます。
参考：メディアクエリ

今回はスマートフォンやタブレットなどを想定した画面サイズの違いによって、適応するスタイルを変更するといったことをおこないます。簡単なサンプル用のHTMLとメディアクエリを記載したCSSを用意して説明致します。

sample.html


<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="./css/sample.css" />
<title>メディアクエリのサンプル</title>
</head>
<body id="top">
<div id="page">
<header class="global">
<div id="header_inner">
<p class="headerlogo"><a href="https://www.asial.co.jpimg/logo.png &mode=1" class="popupimg"><img src="https://www.asial.co.jpimg/logo.png"></a></p>
</div>
</header>
<section class="main">
<div class="test_1">
<h3><a href="https://www.asial.co.jpimg/sample.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimg/sample.jpg"></a></h3>
<div class="test_1_inner">
<ul class="list">
<li><a><p class="head">ブログAほげほげほげほげほげほげほげほげほげほげほげほげほげ</p><p class="time">2013年5月21日</p></a></li>
<li><a><p class="head">ブログB</p><p class="time">2013年5月20日</p></a></li>
<li><a><p class="head">ブログC</p><p class="time">2013年5月19日</p></a></li>
</ul>
</div>
</div><!-- //.test_1 -->
<div class="test_2">
<div class="text_big">文字サイズ大</div>
<div class="text_middle">文字サイズ中</div>
<div class="text_small">文字サイズ小</div>
<div class="copy">Copyright &copy; Asial Corporation All rights Reserved.</div>
</div>
</section>
</div>
</body>
</html>

sample.css


/** header-start **/
header.global {
background: #fe9700; /* Old browsers */
background: -moz-linear-gradient(top, #fe9700 0%, #fed919 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe9700), color-stop(100%,#fed919)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fe9700 0%,#fed919 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fe9700 0%,#fed919 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fe9700 0%,#fed919 100%); /* IE10+ */
background: linear-gradient(to bottom, #fe9700 0%,#fed919 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9700', endColorstr='#fed919',GradientType=0 ); /* IE6-8 */
position: relative;
height: 190px;
}
header.global .headerlogo {
float: left;
width: 460px;
}
header.global .headerlogo #header_rogo{
width: 460px;
height: 50px;
}
/** header-end **/
/* test_1-start */
section.main .test_1 h3{
text-align: center;
}
section.main .test_1 ul.list{
overflow: hidden;
border:solid 1px #ddd;
width: 620px;
margin: 0 auto 17px;
background-color: #fff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
list-style-type: none;
padding-right: 40px;
}
section.main .test_1 ul.list li{
background-image:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%); 
background-image:-webkit-gradient(linear,left top, left bottom,,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(229,229,229)));
background-image:-webkit-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
background-image:-o-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
background-image:linear-gradient(to bottom,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
border-top:solid 1px #ddd;
margin-top: -1px;
}
section.main .test_1 ul.list li a{
height: 100%;
color: #000;
text-decoration: none;
font-size: 27px;
display: block;
padding: 10px 15px;
}
section.main .test_1 ul li a p.head{
margin-bottom:0;
width: 100%;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
/* test_1-end */
/* test_1-start */
section.main .test_2{
width: 100%;
text-align: center;
background-color: #7FFFD4;
}
section.main .test_2 .text_big{
font-size: 48px;
}
section.main .test_2 .text_middle{
font-size: 32px;
}
section.main .test_2 .text_small{
font-size: 18px;
}
section.main .test_2 .copy{
font-size: 20px;
padding-top: 50px;
text-align: center;
color: #333;
font-weight: normal;
}
/* test_2-end */
/* メディアクエリー部分 */
@media screen and (max-width: 720px) {
/** header-start **/
header.global{
height: 95px;
}
header.global .headerlogo {
width:230px;
}
header.global .headerlogo #header_rogo{
width: 230px;
height: 25px;
}
/** header-end **/
/* test_1-start */
section.main .test_1{
padding-top:43px;
background-size: 112px 36px, auto auto;
background-position: right 10px, 0 0;
}
section.main .test_1 h3{
width: 360px;
text-align: center;
}
section.main .test_1 h3 img{
width: 210px;
height: 140px;
}
section.main .test_1 ul.list{
overflow: hidden;
border:solid 1px #ddd;
width: 320px;
margin: 0 auto 8px;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
section.main .test_1 ul.list li{
border-top:solid 1px #ddd;
margin-top: -1px;
/* height: 43px; */
}
section.main .test_1 ul.list li a{
font-size: 13px;
padding: 4px 7px;
}
section.main .test_1 ul.list li a .time{
font-size: 6px;
}
/* test_1-end */
/* test_2-start */
section.main .test_2 .text_big{
font-size: 24px;
}
section.main .test_2 .text_middle{
font-size: 16px;
}
section.main .test_2 .text_small{
font-size: 9px;
}
section.main .test_2 .copy{
font-size: 10px;
padding-top: 25px;
text-align: center;
color: #333;
font-weight: normal;
}
/* test_2-end */
}

少しサンプルHTMLとCSSが長くなりましたが、こちらをベースにして説明をさせていただきます。メディアクエリにてスタイルを変更する際の注意点ですが、素材などのコンテンツについてスタイルを分ける中で一番解像度が大きいもの、今回の場合ですとタブレットの素材で作成するようにします。例えばタブレット用に用意した画像素材は、スマートフォンなどで表示する際にはタブレットより小さい解像度のときは比率を合わせて縮小して利用します。


例）タブレット用に準備した画像のサイズ：720x400 → スマートフォンで表示するサイズ：300x166

それではメディアクエリの説明をさせていただきます。メディアクエリはメディアタイプのその条件を指定し、条件内に記載されているスタイルが記載した条件にマッチするときにスタイルとして適応されます。下記の条件は、出力デバイスの描画域の横サイズが720ピクセル以下の場合にスタイルが適応されます。


@media screen and (max-width: 720px) {
 ・・・・
}

複数の条件を設定することも可能で、下記のようにすると出力デバイスの描画域の横サイズが500ピクセルから800ピクセルの場合にスタイルが適応されます。


@media screen and (min-width: 500px) and (max-width: 800px) {
 ・・・・
}

sample.cssに記載されたメディアクエリは、720ピクセル以下の場合に通常で読み込んでいるスタイルを上書きして、条件内に記載しているスタイルが適応されることになります。

横サイズ：1024px

※ロゴの画像のスタイルは条件にマッチしないため、下記のスタイルが適応されている。


header.global .headerlogo #header_rogo{
  width: 460px;
  height: 50px;
}

富士山の画像についても同様に下記のスタイルが適応されている。


section.main .test_1 h3{
  text-align: center;
}

文字サイズを横サイズによって大きさを分けて表示する。


section.main .test_1 ul.list li a{
  height: 100%;
  color: #000;
  text-decoration: none;
  font-size: 27px;
  display: block;
  padding: 10px 15px;
}
section.main .test_1 ul li a p.head{
  margin-bottom:0;
  width: 100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
section.main .test_2 .text_big{
  font-size: 48px;
}
section.main .test_2 .text_middle{
  font-size: 32px;
}
section.main .test_2 .text_small{
  font-size: 18px;
}
section.main .test_2 .copy{
  font-size: 20px;
  padding-top: 50px;
  text-align: center;
  color: #333;
  font-weight: normal;
}

横サイズ：360px

※ロゴの画像のスタイルは条件にマッチするため条件内の下記のスタイルが適応されている。


header.global .headerlogo #header_rogo{
  width: 230px;
  height: 25px;
}

富士山の画像についても同様に下記のスタイルが適応されている。


section.main .test_1 h3{
  width: 360px;
  text-align: center;
}
section.main .test_1 h3 img{
  width: 210px;
  height: 140px;
}

文字サイズを横サイズによって大きさを分けて表示する。


section.main .test_1 ul.list{
  overflow: hidden;
  border:solid 1px #ddd;
  width: 320px;
  margin: 0 auto 8px;
  background-color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
section.main .test_1 ul.list li{
  border-top:solid 1px #ddd;
  margin-top: -1px;
}
section.main .test_1 ul.list li a{
  font-size: 13px;
  padding: 4px 7px;
}
section.main .test_1 ul.list li a .time{
  font-size: 6px;
}
section.main .test_2 .text_big{
  font-size: 24px;
}
section.main .test_2 .text_middle{
  font-size: 16px;
}
section.main .test_2 .text_small{
  font-size: 9px;
}
section.main .test_2 .copy{
  font-size: 10px;
  padding-top: 25px;
  text-align: center;
  color: #333;
  font-weight: normal;
}

このようにメディアクエリを使用するとスマートフォンとタブレットのように解像度が異なる端末でも、動的にテンプレートを切り替えることなくスタイルのみを切り分けるだけで対応することができます。
今回の例では２種類の切り分けのみでしたが、スマホやタブレット特有の画面の縦表示・横表示の切り替えに対応するために数種類のサイズを用意することも可能です。


@media screen and (max-width: 360px) {
 ・・・・
}
@media screen and (min-width: 361px) and (max-width: 600px) {
 ・・・・
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
 ・・・・
}

おまけ

１行以上の文字列を折り返して表示をしたくなくて、文字数をカウントして◯◯以上の文字の場合は「...」にするということをよくおこないます。
文字数をカウントしてJSで切ったり、VIEW側でVIEWのヘルパーを使ったりといった対応をする方もいらっしゃると思います。
CSSでも対応できます。


<div class="test_1_inner">
  <ul class="list">
  <li><a><p class="head">Web標準のHTML5,JavaScript, CSSでスマフォアプリ未経験者でも簡単にアプリ開発ができます。</p><p class="time">2013年5月21日</p></a></li>
  <li><a><p class="head">ブログB</p><p class="time">2013年5月20日</p></a></li>
  <li><a><p class="head">ブログC</p><p class="time">2013年5月19日</p></a></li>
  </ul>
</div>


section.main .test_1 ul li a p.head{
  margin-bottom:0;
  width: 100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

画像ではうまく伝わらないかと思いますので、そんな方はサンプルをブラウザで開き、ブラウザの横サイズを小さくしたり、大きくしたりしてみてください。スタイルがきりかわっているのがわかると思います。

次回は内容がガラッと変わりますが、postgresのレプリケーションについて興味があるので試しながらブログにしたいと思います。
それでは、皆様、良い、プログラミングライフを〜

asial

記事一覧

緯度・経度と測地系について

前の記事へ

初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

次の記事へ

一覧へ戻る

記事へ

2024/10月社内Tech勉強会レポート – AWSを使ったイベント駆動サイトを開発した時の話 & Miroでブレストワークショップ –

記事へ

生成AIを業務で活用できたケースの紹介/アウトプット推進チームからの活動報告

記事へ

生成AIを業務で活用できたケースの紹介/アウトプット推進チームからの活動報告

記事へ

ChromeからChatGPT Searchを使う場合のTIPS

記事へ