Cntlog > スキルアップ・ノウハウ > コーディング > スマートフォンサイトを作るときによく使うhead内のタグ

スマートフォンサイトを作るときによく使うhead内のタグ

スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。
スマホサイトを作り慣れていない人の参考になれば嬉しいです。

目次
viewport
ウェブクリップアイコンの設定
iPhone向け(Safari)

viewport

viewportはスマートフォンでの可視領域やズームなどの設定をするmeta要素です。
設定出来る項目としては、width(幅)、height(高さ)、initial-scale(ズームの詳細設定)、minimum-scale(最小縮小比率)、maximum-scale(最小拡大比率)、user-scalable(ズームの有無設定)です。

よくスマホサイトで利用されている設定は以下のようなものです。

        <!--デバイスの横幅に合わせて、拡大縮小はさせず、ズームもさせない設定-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        

詳しくはこちらmeta要素 表示領域を設定する – TAG index

設定項目

width(幅)
可視領域の幅。
デフォルト値は980pxです。
200pxから10000pxまでの範囲を指定できます。
initial-scale(ズームの詳細設定)ページが可視領域内にフィットするように計算された値がデフォルト値。
height(高さ)
高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出されます。
233pxから10000pxまでの範囲を指定できます。
initial-scale(ズームの詳細設定)
ページが可視領域内にフィットするように計算された値がデフォルト値。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できます。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になります。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限されます。
minimum-scale(最小縮小比率)
viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できます。
maximum-scale(最小拡大比率)
viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できます。
user-scalable(ズームの有無設定)
ユーザーがズーム操作できるかどうかをyesとnoで指定します。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限されます。

ウェブクリップアイコンの設定

ホーム画面に表示されるアイコンの指定

        <link rel=&apple-touch-icon-precomposed" href="icon.png" />
         ※rel="quot;apple-touch-icon"にするとアイコンの光沢はなしです(iPhone・iPad)
        
アイコンのサイズ
  • iPhone 114×114(57×57)
  • iPod touch /android 114×114(57×57)
  • iPad 144×144(72×72)

※カッコ書きはRetina非対応の旧サイズの場合

iPhone向けSafariでのみ有効な各種設定

全画面表示(yes)
                <!--※デフォルトは「no」になっています。-->
                <meta name="apple-mobile-web-app-capable" content="yes" />
                
ステータスバーのカラー設定
                <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
※default / black /black-translucent から選択
                
電話番号、メールアドレスのリンクの自動検出設定
                <!-- 自動検出はデフォルトで「on」の状態。telephone=noで「off」に設定できます。-->
                <meta name="format-detection" content="telephone=no" />
                

関連記事

Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
Nuxt.jsのトラブル解決方法 今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。 Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。 インストー...