>placeholder使用時にiPhoneで表示崩れが発生した時の対処法2013年11月20日placeholder使用時にiPhoneで表示崩れが発生した時の対処法FacebookTwitterhatenaLINEHTML5から導入された便利な属性の一つに「placeholder」があります。フォームの入力枠に薄く文字を表示させ、ユーザビリティ向上のために使用しますね。例)placeholderを指定する時は下記のように記述します。placeholder="テキストを入力して下さい"></div>しかしこのplaceholde、ある条件が重なると、iPhone(iOS)で表示が崩れる時があります。下記のようなCSSの書き方をしていると、iPhoneで「縦向き表示→横向き表示→縦向き表示」と画面を回転させると、最後に縦向きにした際に画面右側に大きな余白が発生してしまいます。100%;}スマートフォン向けサイトを構築する際、横向きにも対応するためwidthをパーセント指定する事が多いかと思います。placeholderを指定しているinputにwidth:100%を指定すると、上記の通り表示崩れが発生します。解決法この崩れが発生した場合、placeholderを指定したinputの親要素に下記の通りCSSを記述すれば正常に表示されるようになります。hidden;}placeholderを使用して表示崩れが発生してしまった場合に、ぜひお試し下さい。CSS3「HTML」の最新記事GoogleMapをiframeで埋め込む時に縮尺を調整する方法GoogleMapを埋め込む。iframeを利用した埋め込みから、APIを利用した埋め込みになり、API用のKeyが必要なかったり必要だったり、といった...たまに忘れがちな「URLパラメータ」と「アンカーリンク」の記述順序についてとても初歩的な事ですが、たまに順序を忘れる事があるのでメモ程度に。?と&で区切る「URLパラメータ」と、#で指定する「アンカーリンク」を一緒に記述する時...【コピペで使えるHTML】サイト制作時によく使う文字実体参照と数値文字参照コピーライトや登録商標などの特殊記号はそのままHTMLに記述してもうまく表示されなかったり、プログラム不具合の原因となる場合があります。そのため、これらの記号は...【コピペで使えるHTML】丸数字を表示させる数値文字参照一覧1や❷といった丸数字をHTMLで表示させるための数値文字参照一覧です。コメントをキャンセルメールアドレスが公開されることはありません。