iOS6のinputタグにバグ – 幅のパーセントとplaceholderには要注意
iPhoneでinputにwidthにパーセント指定とplaceholderを同時に使用すると横幅が画面サイズに調整されずにハミでてしまうバグのお話。調べてみると、どうやらiOS6特有で特定条件下におけるバグのようで…まぁやっかい。
> 詳しく見る- category:smartphonetag:css, html5, iOS, バグ
スマートフォンのホーム画面に表示させるショートカットアイコンのサイズと設置方法
既知ですが、スマートフォンはブラウザのブックマークだけでなく、ホーム画面にサイトへのショートカットアイコンを設定できます。
このショートカットアイコンは、PCのファビコンと一緒に作ってしまうのが流れ的にも忘れることが少なくなるので、よいのかなと思います。
> 詳しく見る- category:smartphonetag:html, iOS
input type=”number”の落とし穴 – “number”を使うと先頭の0が認識されない
html5になり、input typeにもいろいろな属性が追加されました。自分の場合は主にスマホサイト制作時に、type属性の場合分けを行っていたわけですが、ここで意外な落とし穴が発覚。
なんとtype=”number”にしてしまうと、先頭の「0」が認識されませんでした。
> 詳しく見る- category:smartphonetag:html5
スマホサイトで:hoverの効果を可能にしてみよう
スマホサイトはPCサイトと異なりマウスカーソルがありませんので、PCではよく使われているhoverやロールオーバーの効果がスマホサイトでは使用できません。
ですが、タップしたときにあたかもhoverしているような効果をつけることはスマホサイトでも可能です。ただし、CSSだけでは対応しきれないため、jQueryを用います。
> 詳しく見る- category:smartphonetag:css, html, jQuery
端に矢印が付いたリンクを作ってみよう
右に矢印がついたリンク。スマホサイトでは当然のように使われています。
右に矢印がついているのでリンクだということもわかりやすいうえ、aタグをblockにしてしまえばエリア全体を押せるようになるので、UI的にも使いやすいといったところでしょうか。
> 詳しく見る- category:smartphonetag:css, css3, html