物販

スマホサイトのコーディングをする際に必要な設定と知識

この記事では、スマホサイトをコーディングする際に必要な設定と知っておくと役立つ知識を紹介します。

Contents

レスポンシブ対応とはスマホ・タブレット・PC全てに対応させること

レスポンシブ対応とは、スマホ・タブレット・PCといったどの媒体で見ても画面崩れが起きないように設計することを言います。PCとスマホでは本体の大きさが異なりますし、スマホは縦画面で見られることが多いので、横の比率も変わるのが普通です。

PC用に作られたWebページをスマホで開くと、文字が小さくて読みにくかったり、サイドバーや画像が本文にかぶってしまったりというような、画面崩れが起きてしまうので、はじめから「この端末ではこのような表示をしてください」という指示をWebページに組み込むのです。

ここでは、レスポンシブ対応をするときにどのような注意点があるのかを解説していきます。

レスポンシブ対応のときに必須のコーディング

レスポンシブ対応をするときに必要になる動作は、主に以下の2つです。

  • metaviewportタグを入れ込み、画面サイズ情報を入手、表示デザインを判断する
  • CSSでメディアクエリを設定する

表示する画面を分けるということは、Webページに訪れた人がどのようなサイズの端末を使っているかという情報が必要です。そのために使うのがmeta viewportタグで、HTMLファイルのヘッダー部分に記載します。

そして、CSSでメディアクエリを使うことによって、どのサイズの端末でどのように表示するのかを設定していくのです。この2つの作業があるのが、レスポンシブ対応とそうでないときの大きな違いです。

さらに、メディアクエリはIE9以降に使えるシステムなので、IE7やIE8にも対応するWebページを作る際には下準備が必要です。Javascriptライブラリを使って以下のコードを書き込むことで大体は解決します。

メディアクエリを使えるようにする
<!– [if lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]–>

 

HTML5を使えるようにする
<!– [if lt IE 9]>
<script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]–>

viewportの設定とコード内の言葉の意味

レスポンシブ対応にするときに避けて通れないのが、viewportの設定です。HTML内にviewportタグを書き込むことによって、Webページに訪れた人の画面サイズ情報を読み取り、対応する表示に切り替える事ができるようになります。

viewportはメタ情報、つまりコンピュータに情報を伝えるためのデータとなります。そのため、HTMLのhead内に以下のソースコードを記載します。

【基本】端末の画面幅と表示サイズの指定のみ
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

 

【応用】ズームの設定を入れ込む
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=1″>

 

ここでは、viewportコード内の言葉の意味について詳しく説明していきます。

width=端末の画面幅

widthで表示できる端末の横幅を指定します。数値で入れる場合は200px~10000pxまでの数値が任意で指定できますが、ここでは「device-width」に設定しスマート化を図っています。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

 

数値で指定するメリットはどの端末でも同じ表示をすることができる点が挙げられます。一方、大きな画面サイズの端末も小さな画面サイズの端末も同じ表示になってしまうことでスペースの有効活用ができない点がデメリットになるでしょう。

device-widthは、デバイスごとに固定された横幅の値です。スマホやタブレッドの縦向き・横向きに限らず、デバイスに設定された横幅で固定されることを意味しています。使われているデバイスの画面サイズに自動で合わせてくれるため、スペースを有効活用できます。ただし、細かな部分の表示統一は難しいというデメリットもありますので注意が必要です。

initial-scale=初期サイズ

initial-scaleは初期サイズを意味します。つまり、画面を開いたときにデフォルトで表示される横幅です。1.0に設定することでwidthで設定した端末の画面幅で表示します。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0“>

user-scalable=ズームできるかどうかの設定

スマホには二本指で画面に触れることで、ズームができる「ピンチ」機能があります。user-scalableは、ズームを可否設定を指示する部分です。1yesを意味してズームできる設定、0noを意味してズームできない設定にします。数字ではなく、yes/noで指定することも可能です。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=1“>

minimum-scale=ズームしたときの最小倍率

minimum-scaleはズームの際の最小倍率です。0~10までの値で設定ができます。デフォルトで設定されている0.25の場合は、画像や文字が小さく表示されます。これでは、画面上ではほぼ読めないため、最小値を1.0に設定するとよいでしょう。

最小値を大きく設定しても「見にくいだけ」の画面となってしまうため、ピンチアウトで拡大表示できるように設定すれば良いでしょう。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=1″>

maximum-scale=ズームしたときの最大倍率

maximum-scaleはズームの際の最大倍率です。minimum-scaleと同じく、0~10までの値で設定できます。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=1″>

スマホサイトを作るときのviewport以外の設定

ここでは、viewport以外におこなっておくと良いスマホ対応ならではの設定について解説します。

format-detection=電話番号のリンク設定

iPhoneでは、電話番号のような数字の羅列があると、自動で電話番号と認識する機能があります。タップだけで電話がかけられる設定にするかどうかを決めるのがformat-detectionです。<telephone=>の先を<yes>または<1>にするとタップだけで自動で通話発信ができます。

または、<no>または<0>にするとタップしても発信しないように設定できます。このタグを使う場合には、誤タップによる間違い電話の原因にもなることを理解した上で設定しましょう。

ソースコードは以下のとおりです。

通話発信設定にする場合
<meta name=”format-detection” content=”telephone=yes”>

 

通話発信非設定にする場合
<meta name=”format-detection” content=”telephone=no”>

地図のリンクを設定する2つの方法

Webページに地図のリンクを付けたいときは、以下のソースコードを使います。

【GoogleMapへの移動】
<a href=”http://maps.google.com/maps?q=クエリ”>MAP</a>

 

 

【iOS「マップ」の起動】
<a href=”maps:q=クエリ”>MAP</a>

 

apple-touch-icon=ホーム画面アイコンの設定

Webサイトをホーム画面に追加した際に、表示されるアイコンを設定します。アイコンを設定していない場合には、自動でページのサムネイルがアイコンになりますが、見づらくなってしまいます。独自で1枚、アイコン専用のものを設定しておくのがおすすめです。

さまざまなサイズ設定ができ、コーディング次第で20以上の指定を入れる事もできますが、基本的には180×180の画像1枚が設定されていれば問題ありません。

ソースコードは以下のとおりです。

<link rel=”apple-touch-icon” sizes=”180×180″ href=”apple-touch-icon.png”>

 

後半のapple-touch-icon.pngの部分は任意の画像のURLをが入ります。画像URLは直リンクは禁止です。PCに保存されている画像URLを当てはめるのがマナーです。

また、前半の”apple-touch-icon“部分を”apple-touch-icon-precomposed” に変えることで光沢効果をなくせます。

Retinaディスプレイ対応にするための設定と注意点

Retinaディスプレイ対応は、Apple製品のみに必要な設定です。ここでは、Retinaディスプレイ対応の設定方法と注意点について解説します。

Retinaディスプレイとは

Retina(レティーナ)ディスプレイというのは、Apple製品に搭載されているディスプレイのことです。発色の表現が高く、高画質表示が魅力です。

ただし解像度が高いため、対応画像を表示する際に通常モニタでは画像がぼやけてしまう現象が起きるので、別途対応が必要です。

設定方法は大きく分けて2つ

Retinaディスプレイ対応の設定方法は、以下の2つです。

  • 画像を表示サイズよりも大きく作る
  • SVGで表示する

それぞれのやり方については、次項で解説します。

画像を表示サイズよりも大きく作る

画面縦幅320px、横幅640pxのデバイスで画像を表示させたい場合には、縦幅640px横幅1280pxの画像を用意する、という方法です。もともと大きいサイズを縮小表示させることによって、ぼやけのない綺麗な画像に仕上がります。

大きな画像が画面から飛び出さないように、CSSでデバイスの幅に合わせて表示されるよう設定します。

.sample img {
width: 50%; /* 横幅を割合で指定 */
height: auto; /* 高さは自動指定 */
}

SVGで表示する

SVGとはスケーラブルベクターグラフィックスの略で、拡大や縮小をしても画質が損なわれない特徴を持っている画像形式です。

<img> タグでSVG画像を指定してimg要素として表示する方法と、

<img src=”svg-sample.svg” width=100 height=60>

 

<svg>タグで囲って直接画像を描写していく方法があります。

<body>
<svg x=0 y=0 width=100 height=60 style=”background-color: #ddd”>
<polygon points=”50 10, 70 30, 50 50, 30 30″ fill=”#99f” />
</svg>
</body>

SVG表示のときの注意点

・複雑な図形はSVGにしない
SVGは、「点の座標とその点を結ぶ線の数値データを元にして、演算によって図形を再現する方法」です。ビットマップデータのPEGやPNGと違って、複雑な図形は重くなりがちという欠点があります。そのため、写真のような複雑な図形はSVG表示に向いていません。

・ラスタライズするとパス指定で表示されない
PhotoShopを使うときの注意点です。画像をラスタライズ、つまりビットマップへ変換されたデータで書き出すと、<〜〜/hoge.svg>でパス指定しても画像が正常に反映されません。その場合は直接インラインで書き出す必要があります。

・フォントを使ったテキストはシェイプに書き換えてから書き出す
同じくPhotoShopを使う際の注意点で、フォントを使ったテキストの書き出しに関することです。通常通りに「書き出し」→「書き出し形式」で保存しようとすると、フォントが想定通りにレンダリングされない可能性を示唆されます。無視して入れ込むと、実際にフォントが正しく反映されないエラーが発生してしまうので、シェイプに変換してから書き出しをおこないましょう。

・IE8以下は表示されない
Javascriptライブラリを導入することによって解決する必要があります。

スマホサイトのコーディングをする際に知っておくと便利なコード

ここではスマホ対応サイトを作るときに、知っておくと便利なコードと豆知識を紹介します。画面が崩れてしまうときには、ここを参考にコードを書き足してみてください。

img、iframeのmax-width設定で画面からのはみ出しを防止

画像やインラインフレームが画面からはみ出してしまうのを防止するためには、max-widthを使います。

img,iframe {
max-width: 100%;
}

 

このようにコードを記述することで、画面の幅に合わせた表示をしてくれます。

box-sizing: border-box;で要素の幅が崩れてしまうのを防止

content-boxの欠点として、レスポンシブ対応の際に、borderの太さ分だけ親要素からはみ出してしまうというものがあります。また、marginwidthを%で指定して、paddingのコードだけ数値をpxで指定すると、やはりこちらも親要素からはみ出す原因になります。

ここで必要なのが、box-sizing: border-box;です。はみ出してしまう要因はborderpaddingで、要素の幅に含まれていないことが理由です。

box-sizing: border-box;を指定することによって、borderpaddingも要素の幅として含まれるようになるため、画面崩れを解消することができます。

コードソースの内容は以下のとおりです。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

 

すべての要素に対して同じ設定をかけたい場合は上記のコードを * {} で囲います。

webkit-tap-highlight-colorでタップした箇所に色を付ける

-webkit-tap-highlight-colorで色を指定すると、タップ箇所の色が変わる設定になります。

-webkit-tap-highlight-color: rgba(0, 0, 0 ,0.5)

 

のように入力します。後半の rgba(0, 0, 0 ,0.5)部分は色の指定です。透過設定にもできますが、端末によって見え方が違う点に注意が必要です。

webkit-text-size-adjust:でスマホを横にしても文字サイズが変わらないように設定

スマホ対応の難しいところは、縦持ちと横持ちの2パターンができるところです。縦では問題なく表示されていたページが横にしたときに崩れてしまう問題もあるため、実際のデバイスを使ったデバッグは必須と言えるでしょう。

横持ちにした際に多い問題が、解像度の変更で文字サイズが変わってしまうことです。下記のコードを打ち込むことで、横持ちにしても文字サイズが変わらないように設定できます。

body {
-webkit-text-size-adjust: 100%;
}

 

word-breakで変な改行やURLの飛び出しを防止

URLが飛び出してしまっている、変なところに改行が入ってしまっているときに使えるのがword-breakです。これを入れることによって強制的に改行ができます。問題の箇所にのみコードを打ち込みましょう。

打ち込むコードは以下のとおりです。

.hoge {
word-break: break-all;
}

 

横持ちから縦持ちへの変更で表示がおかしくなるときはoverflowで解決

スマホを横持ちから縦持ちに変えると、画面の横幅変更に追いつかずに横スクロールが出てきてしまう場合があります。そのときは大枠に下記のコードを打ち込んでスクロールを無効にしましょう。

.wrap {
overflow: hidden;
}

 

webkit-appearance: none;でパーツを初期化

CSSの指定を無視して初期設定のパーツになってしまうときに使えるのが、webkit-appearance: none;です。

.wrap {
-webkit-appearance: none;
}

 

このように書き込むことで、ブラウザの自動装飾をカットしてCSSで設定した通りのパーツを表示させることができます。

overflow: scroll;で表を見やすく

スマホを縦持ちで使っていると、列の多い表が出てきた際に見づらいという問題が出てきます。表の大枠をdivで囲ってoverflow: scroll;を打ち込むことによってスクロールで表を見れるようになります。

<div style=”height:100px; width:300px; overflow: scroll;”>
<table border=1 height=”100″ width=”300″ bgcolor=”#9999ff”><tr><td>
表示したいテーブル
</td></tr></table>
</div>

remでフォントサイズを指定すると全体の文字サイズ変更をおこないやすい

html {
font-size: 62.5%; //10px
}body {
font-size: 1rem; //10px
}h1 {
font-size: 1.4rem; //14px
}

 

このように、HTMLのフォントサイズを%で指定、その他のフォントサイズをremで指定すると、HTMLのパーセンテージを変更するだけで他のフォントサイズも相対的に変化させることができます。

文字サイズのバランスは崩したくない、スマホで表示を確認したときに文字サイズを簡単に調節したい、という場面で使うと作業を効率化できます。

スマホでは10px以下のフォントサイズは使わないほうが無難

フォントの最小サイズはブラウザによって以下のように決まっています。

  • Google Chrome = 10px
  • iOS= 9px
  • android= 8px

ブラウザとしてGoogleChromeを使っている場合、AndroidでもiPhoneでも最小サイズが10pxとなりますので、基本的にフォントサイズは10px以下にはならないと覚えておきましょう。

まとめ

スマホサイトを作る場合には、PCサイトのみを作る場合に比べてやらなければいけないことが増えます。しかし、現在のスマホの普及率を考えると、PCにしか対応していないWebページは不親切であり、レスポンシブ対応は必要不可欠な手段と言えるでしょう。

この記事を参考にして、スマホサイトのコーディングについての基礎知識を深めていただければ幸いです。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。