|
HTML5＋CSS3 |
Smartphone編
|
| Lesson 14 | iPad／ガラパゴスなどの タブレットへの対応 |
||||
| 制作・文 | 松田翔伍（株式会社ワン・トゥー・テン・デザイン） |
| スマートフォンだけでなく、タブレットにも最適化したい。そんなときはJavaScriptとCSSを使用して、タブレットタイプに最適化された表示を実装する。 |
タブレット用に最適化
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。
そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。
タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。
ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。
今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。
【1】のような、ブログ形式のPCページ構成をベースに構築していく。
使用するCSSは
・PC用CSS（デフォルト）
・スマートフォン用CSS
・タブレット用CSS
の三つだ。
【1】ブログ形式のPCページ構成
そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。
タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。
ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。
今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。
【1】のような、ブログ形式のPCページ構成をベースに構築していく。
使用するCSSは
・PC用CSS（デフォルト）
・スマートフォン用CSS
・タブレット用CSS
の三つだ。
【1】ブログ形式のPCページ構成
スマートフォン・タブレット用に
<meta>要素を追加
マートフォンサイトと同様に、<head>内にviewportとformat-detectionの<meta>を追加する【2】。
format-detectionにtelephone=noを追加することで電話番号に自動的にリンクが貼られなくなる。これは任意なので、サイト内容によっては外してもらってかまわない。
viewportは、「画面幅：デバイスに合わせる」、「初期拡縮率：1.0」、「最大拡縮率：2.0」、「最小拡縮率：1.0」、「ユーザー任意の拡縮：可」で設定している。
【2】HTML
JavaScriptを使って、デバイスごとに
読み込まれるCSSを振り分ける
このサイトでは、メディアクエリよりも先に、ユーザーエージェントで大きく分類分けしてしまう。
具体的には、
・iPad ＆ Androidタブレット
（GALAPAGOS）※01
・iPhone ＆ iPod ＆ Androidスマートフォン
・PC
に分類される。
PC、タブレット、スマートフォン用のCSSをユーザーエージェントで振り分け、document.writeでCSSのリンクをデバイスごとに書き出している【3】。
ちろん、メディアクエリでもこれらはある程度振り分けることができるが、対応デバイスが多くなるほど、画面サイズだけでは振り分けが難しくなってくる。
よって、まずJavaScriptで振り分け、CSS内部でメディアクエリを使用して処理を分岐させている。これらの処理は、内に直接書いてもいいし、外部ファイル化してもかまわない。
※01 今回、AndroidタブレットはGALAPAGOS（EB-WX1GJ）に限定している。今後、Androidは多種多様な画面サイズの物がでてくると予想され、処理を確実に行うために、機種番号での振り分けを行った。
【3】JavaScript
具体的には、
・iPad ＆ Androidタブレット
（GALAPAGOS）※01
・iPhone ＆ iPod ＆ Androidスマートフォン
・PC
に分類される。
PC、タブレット、スマートフォン用のCSSをユーザーエージェントで振り分け、document.writeでCSSのリンクをデバイスごとに書き出している【3】。
ちろん、メディアクエリでもこれらはある程度振り分けることができるが、対応デバイスが多くなるほど、画面サイズだけでは振り分けが難しくなってくる。
よって、まずJavaScriptで振り分け、CSS内部でメディアクエリを使用して処理を分岐させている。これらの処理は、内に直接書いてもいいし、外部ファイル化してもかまわない。
※01 今回、AndroidタブレットはGALAPAGOS（EB-WX1GJ）に限定している。今後、Androidは多種多様な画面サイズの物がでてくると予想され、処理を確実に行うために、機種番号での振り分けを行った。
【3】JavaScript
メディアクエリを使用して、
style_tablet.css内部の処理を分ける
タブレットサイズ用の記述は【4】のようになる。
GALAPAGOSはiPadに比べて一回り大きいため、iPadのサイズ指定だけでは効かないので注意が必要だ。機種ごとに分ける必要のない共通スタイルはメディアクエリで分けるより前にまとめて書いておこう。
【4】CSS
GALAPAGOSはiPadに比べて一回り大きいため、iPadのサイズ指定だけでは効かないので注意が必要だ。機種ごとに分ける必要のない共通スタイルはメディアクエリで分けるより前にまとめて書いておこう。
【4】CSS
サイドバーを下に配置する
共通スタイルとして、さほど重要でないサイドバーをページ下部に配置する。float:rightで回り込んでいるので、floatを解除しておく。さらに、display:-webkit-boxを使い、内包されている2列のナビゲーションを100％ページ幅でも問題なく2列表示できるようにする【5】【6】。
【5】CSS
【6】
【5】CSS
【6】
記事の表示を縦向き、
横向きに変える
タブレットはスマートフォンと比べてPCに近い画面幅をしているので、横にするとかなりの幅ができるため、横向きのときは文字組みを2列に変更して、より読み物ページらしくレイアウトする。
記事を包んでいる大枠のタグにCSS3の-webkit-column-countを記述すると、column-countの数だけ中のボックスがカラム化される【7】【8】【9】。
縦向きの時は画像の大きさを調整し、column-countを指定せず1カラムで綺麗に収まるようにレイアウトする【10】【11】。
今回はタブレット用として紹介したが、スマートフォンでもほとんど同じ手順で制作が可能だ。
しかし、これらはあくまでも最小限の対応なので、真に最適化させるなら、サイトの特性に合わせたチューニングが必要になるだろう。
【7】CSS
【8】HTML
【9】
【10】CSS
【11】
記事を包んでいる大枠のタグにCSS3の-webkit-column-countを記述すると、column-countの数だけ中のボックスがカラム化される【7】【8】【9】。
縦向きの時は画像の大きさを調整し、column-countを指定せず1カラムで綺麗に収まるようにレイアウトする【10】【11】。
今回はタブレット用として紹介したが、スマートフォンでもほとんど同じ手順で制作が可能だ。
しかし、これらはあくまでも最小限の対応なので、真に最適化させるなら、サイトの特性に合わせたチューニングが必要になるだろう。
【7】CSS
【8】HTML
【9】
【10】CSS
【11】
＞＞目次に戻る
