本日は業務メモです。iOSでフォーム内の透かし文字（Placeholder）を上下センター位置に調整する方法です。PCやアンドロイドでは指定せずにiOSのみ指定するCSSをご紹介いたします。お問い合わせフォーム内に差し込んだ透かし文字がiOSだけ「上付き（下側が空きすぎる）」になるので回避策として使えます。
iPhone（iOS）のみフォームの透かし文字（Placeholder）を上下中央に変更する方法
フォーム内に表示されている文字の位置を縦方向のセンターに設置したいシチュエーションがあります。iOS系の端末（iPhone/iPad等）ではフォームの透かし文字（placeholder）が少し上側に表示されます。
CSSを指定する前の状態
念のため拡大して、上下の幅を見比べてみましょう。下側が余分に空いていますね。
解決策はiOSのみにかける「padding-top」を指定すればOKです。
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder {
padding-top: 0.15em;
}上記は一般的なフォーム３種類（テキストフィールド、メールフィールド、検索フィールドで使うinput）に対して上方向のpaddingを指定しています。指定の値は状況に合わせて微調整してくださいませ。
CSSで指定したあとの状態
少し拡大して見てみましょう。おおよそ上下の中央位置に表示されていますね。
文字を入力するカーソルを合わせても特に違和感はありませんね。ちょうど良い位置に表示できています。
まとめ
Placeholder（透かし文字）があると利用者さんへの簡易ナビゲーションになります。ただ、文字の表示位置がずれているとサイトの来訪ユーザーが気持ちよくサイト検索を使えなくなります。小さな改善の繰り返しで快適なウェブサイトは手に入ります。気になっていた方はぜひお試しください。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
