スマホ用アンケートページを作った時のマークアップのメモ
よく読まれている記事
アンケートフォームのついたキャンペーンページを作成した時に気になって調べた、マークアップ側のメモです。サイト自体はすごくシンプルな作りなのですが、少し良くする為に入れた情報をまとめてみました。
こんな感じの、アンケートを設置して、プレゼントの応募をするといったタイプのキャンペーンページです。
調べたこと目次
数字を入力できるようにする。
プレゼントに応募できるように住所と名前を入力してもらう部分です。
郵便番号の部分は最初から数字が入力できるようにしたいです。
数字を入力できるようにする方法について
type=”number”は数字を打つのに最適ですが、|
1 2 3 |
<input type="number" name="zip1" data-label="郵便番号"> |
patternを利用すれば数字だけのキーボードが出てきますので、type=”text”が利用できるので、こちらを利用したほうが良さそうですね。
|
1 2 3 |
<input type="text" pattern="[0-9]*" name="zip1" data-label="郵便番号"> |
iPhoneでボタンを押したときの色を設定
iPhoneでボタンを押したときの色をつけるCSSをいれておきます。|
1 2 3 4 5 |
a { -webkit-tap-highlight-color: rgba(163,215,112,0.70); } |
上のrgbはグレーな感じですが、これがベストなわけではないので、色に関しては、検討が必要です。
もちろん色はrgbじゃなくてもいけます。
|
1 2 3 |
a{-webkit-tap-highlight-color: #FF0} |
フォントファミリーを考える
まずはスマホで表示できるフォントのおさらい。iPhoneとAndroidに入っているフォントは、
- iPhoneは、ヒラギノ角ゴ W3、ヒラギノ角ゴ W6、ヒラギノ明朝 ProN（iSO 5のみ）
- Androidは、Droid Font ※日本産のAndroidは各メーカーオリジナルの日本語フォントが入ってる場合もあるらしい。
とはいえ、全く入れないというのも心配なので、PCで見られた場合などを想定して、入れておくのもよさそうです。
なお、今回利用したフォントファミリーは、
|
1 2 3 |
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, 'sans-serif'; |
このような、別案件で利用されていたフォントファミリーを入れておきました。
iPhoneを横にした時に、文字を自動で大きくさせないCSS
iPhoneを横にした時に、文字を自動で大きくさせないCSSを入れておきます。|
1 2 3 4 5 |
@media screen and (min-width: 360px){ * { -webkit-text-size-adjust: none; } } |
これをいれておくだけですが、結構大切ですね。
viewportの設定
今回はズームをさせないパターンだったので、このように書いておきました。ユーザビリティ的には、無効化させないほうがいいだろうけど、ですね。
|
1 2 3 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" /> |
端末の画面幅と同じ幅を viewport の幅とする
|
1 |
content="width=device-width, |
初期ズーム倍率を1倍にする。
|
1 |
initial-scale=1, |
拡大縮小のズームを無効化する
|
1 |
maximum-scale=1 user-scalable=no |
例えば、Appleのサイトで利用している
|
1 |
<meta name="viewport" content="width=1024" /> |
横幅はwidth=1024です。とだけで、ズームなどに関する指定はありません。
基本デバイスに委ねるという考え方が自然な気もしますね。
以上、とりあえず、マークアップ側で気になって調べたメモでした。