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" />
                

関連記事

【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
Nuxt.jsのトラブル解決方法 今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。 Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。 インストー...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...