【誤操作＆誤表示防止】レスポンシブ対応で気をつけた方が良いこと

こちらのページは、HTMLとレスポンシブデザインの基本的な知識があることを前提で書いています。

ですので、それらの知識が今ひとつな場合は、先にレスポンシブについてのページをご覧ください。

【スマホ】レスポンシブデザイン【PC】

パソコン端末では思いもよらないようなことが、スマートフォンやタブレットの操作や画面では起こります。

ですので、めんどくさくはありますが、レスポンシブ化する時はそう言うのも考えつつ作っていかないといけません。

表示倍率の最大値の設定

これをしないと始まらない。
表示倍率の最大値を設定し、ウィンドウサイズを端末の幅に揃えます。

と言うか、これがないととにかく変な画面になります。
（画像やテーブルや各種部品が異様に縮小されて表示されたり、幅を100%でしっかりしていても上手く表示できないなど）

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

このコードを <head> と </head> に間に放り込みます。

自動文字サイズ無効化

誤操作で文字サイズが巨大化しないように設定します。

/* 文字サイズ固定 */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; }

【誤操作防止】タップで選択できないようにする

スマートフォンやタブレットを使用している時、手で画面を下か上にスライドさせたら、文字を選択してしまうことがあります。
これは、誤操作で選択をしてしまうことから起こります。

ですので、スマートフォンやタブレットでは間違って選択しないようにCSSで設定してあげる必要があります。

/* 選択禁止 */ html { -khtml-user-select:none; -webkit-user-select: none; -webkit-touch-callout:none; -moz-user-select: none; -ms-user-select: none; user-select: none; unselectable="on" pointer-events: none; }

CSSでは htmlのスタイル として書いていますが、body でもOKですし、DIVタグのCSSとして設定してもOKです。

スマートフォンやタブレットの場合、普通はこれでOKですが、HTMLタグでこのように設定することでも選択禁止できます。

<body onSelectStart="return false" onMouseDown="return false" onContextmenu="return false">

これは、ScriptをOFFにしていると作動しません。
でも、CSSで選択禁止をしてあるので、ScriptをOFFにしてあっても普通は大丈夫です。

横スクロールバーを出ないようにする

普通、横スクロールバーが出てしまうと、ページを見たり読んだりするのが面倒くさくなります。

ページを動かす方向が縦以外に横も出てしまうからです。
ですので、横にはスクロールバーを出さないように設定します。

/* 横スクロールバー禁止 */ html { overflow-x : hidden; overflow-y : auto; }

この設定をした場合、横にはみ出した要素や文字は見れなくなってしまいますので、横にはみ出さないようにしないといけません。
（画面外にはみ出した要素は表示できないので、右端が尻切れチョンボの状態になる）

横スクロールバーがあった方がよい場合（横スクロールして画像などを見てもらいたい場合など）は、めんどくさいですが、横スクロールバーを表示できるよう、部品によってスタイルを指定してあげます。

アップル社の端末用のフォント指定

日本では特に iPhon の使用率が高いので、アップル社のフォント指定は必須です。

無くても表示はされるんですが、明朝体で表示されたりする可能性がありますので、できるだけフォントの指定はしておいた方がよいと思います。
（ 『ヒラギノ角ゴ Pro W3 』 がiPhoneのゴシック体のフォント指定です）

/* フォントの指定 */ font-family:"ヒラギノ角ゴ Pro W3","メイリオ",Osaka,Arial,Verdana,"ＭＳＰゴシック",sans-serif;

ひらがな・カタカナ・漢字の含まれているものは、ダブルクォーテーション『 "" 』で囲みます。

できるだけテーブルは使わない

テーブルは横幅をとってしまうものですから（paddingで文字や英数字と枠線の間に空白を取る場合は特に）、PC用に作ったものを表示すると、とてもはみ出しやすいです。

はみ出さないように横幅を100%にしたり、ブラウザの機能で自動縮小された場合は、文字が小さく表示され、非常に読みづらくなってしまいます。

さりとて、テーブルはDIVタグとは違い、横幅に応じて縦並びにしたり横並びにしたりが困難です。

ですので、できるだけテーブルは使わない方がよいです。

横並びにする時は、 DIVタグで float:left; か display:inline-block; などのスタイルを使って指定します。

スマホではできるだけ表示するものを減らす

スマートフォンでは、表示しても見にくいものが多いです。
しかも、縦にズラズラ並べて表示しますので、やたらと縦長のページになってしまいます。

特に、記事の表示部分より上に大量にあれやこれやの部品があると、記事をみるだけでも一苦労になってしまいます。

ですので、パソコン端末とは違い、スマートフォンではできるだけ表示する項目を減らし、見てもらいたいものを中心に表示する方がよいと思います。

パソコンでは表示しているけど、スマートフォンやタブレットで非表示にしたい要素には、消したい要素にdisplay:none; を使うと良いです。

/* スマホはパンくずリンクを非表示 */ @media screen and (min-width:0px) and (max-width:899px) { .breadlinks { display:none; } }

ただし、場合によってはGoogle検索でペナルティを受けてしまうことがあるようです。

どんな display:none; を使った時にペナルティを受けてしまうのかは公開されていませんので、どうなればペナルティを受けるのかはわかりません。

なので、display:none; でGoogle検索のペナルティを受けたくない場合には、できるだけdisplay:none; は使わないほうがよいと思います。

フレームは使わない

ifame はスマートフォンやタブレットでは使いにくいようです。
ですので、テンプレートやページの部品には ifame は使わず、PHPかScriptを使って文章を読みだすと良いと思います。

<?php $openfile = file_get_contents("部品を読み出したいURL"); echo $openfile; ?>

html ファイルでPHPコードを動かす方法は、【ついに完成】さくらでもincludeをする方法のページをご覧ください。

画面端ギリギリまで使わない

特にスマートフォンの縦方向の場合は画面の横幅が狭いですので、画面端ギリギリまで使いたくなるのが人情ではありますが、画面端ギリギリまで使ってしまうと、スマートフォンやタブレット端末では読みにくいので、画面の端にはある程度の隙間があった方がよいです。

読みやすいようにするには左右それぞれ 20px 程度あれば良いようです。
（最低でも10pxはあった方が良い）

/* 左から『上空白・右空白・下空白・左空白』の指定になる */ margin:0px 20px 0px 20px;

ちなみに、空白を％で指定することもできます。
（↓の指定は横幅が92%、左右の隙間がそれぞれ3%ずつの指定です）

/* 横幅と左右の隙間の％表示 */ .all{ width:92%; margin:0% 3% 0% 3%; }　

できるだけ圧縮する

スマートフォンやタブレットでのインターネット接続では、高額な月額利用料の転送量無制限ではなく、安価な転送量制限のある契約が人気です。

ですので、パソコンではそれほど気にしなくても良かった 『ファイルサイズ』 についても、レスポンシブでは気をつけたほうが良いです。

ファイルの圧縮については、【画像】ファイルの圧縮とサーバー【CSS】のページをご覧ください。

大きい画像を用意して縮小表示する

現在、スマートフォンやタブレット端末では、画面サイズは小さくても解像度は高いものが主流になっています。

高解像度で画面サイズの小さいスマートフォンやタブレットで、そのままページや画像を表示してしまうと、異常に小さく表示されてしまいます。

そこで、そのような不具合が起きないよう、ブラウザやスマートフォン用のOSで自動調節しているのですが、画像はボケボケになってしまうことが多いようです。
（シュミレーターでは正常に表示されますが）

そのような場合は、２倍くらいの大きいサイズの画像を用意し、縮小表示することで解消できます。

画像サイズ　1000px x 1000pxの場合　

 <img src="画像URL" width="500" height="500">

これで縮小表示できます。

でも、転送量は増えてしまいますので、転送量に余裕がない場合にこれをやると、アクセス数によっては転送量が増えすぎてしまい、サーバー会社からｺﾞﾙｧヾ(〃ﾟ∀ﾟ)┏θ_◇.:;ｶﾞｼｬﾝされてしまう可能性があるので要注意です。

次ページ

【無料で使える】レスポンシブデザインをチェックするためのツール

前ページ

【レスポンシブで必須】横並びと縦並びのスタイルをマスターする

このカテゴリの記事

その他のカテゴリを見る

【誤操作＆誤表示防止】 レスポンシブ対応で気をつけた方が良いこと