HTMLでinput要素の入力位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLでinput要素の入力位置がずれる原因と対処法について解説しています。各ブラウザでの入力欄の見え方の違いと位置がずれる原因、対処方法を説明します。入力フォーム作成時の参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでinput要素の入力位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
input要素の入力位置がずれる原因と対処法について詳しく説明していくね！
お願いします！
input要素とは
input要素は、ユーザーがブラウザから入力した値をプログラムによってサーバーに送信するためのインターフェース（入力装置）です。ユーザーのキーボードにて入力できる値や、チェックの有無を示す記号（識別子）などをブラウザに送信してもらうことが実現できます。
ブラウザが提供している部品として使用されることにもなっており、表示としての見た目は、過去のブラウザの種類によって大きく異なります。
ブラウザによる入力欄の位置
近年のブラウザでの入力欄の表示や位置について、然程の相違は見受けられません。下記のサンプルのソースコードでの表示について、下図を掲載していますので、目視にてご確認ください。
See the Pen
2020-03-23-sample-09 by YOHEI INAI (@yohei_inai)
on CodePen.
左端から配置しているブラウザは、Firefox、Chrome、Safari、Edge、Operaの順です。それぞれのブラウザでの表示が確認できます。近年のブラウザでも、表示位置に微差があります。しかし、それよりも、幅や若干の高さについての差異のある表示が目視でも確認できます。
次項の「入力欄の位置がずれる原因と対処法」では、原因と対処法を説明します。
入力欄の位置がずれる原因と対処法
ブラウザによって異なる標準的なスタイルとして、初期値が若干だけ異なっていることが原因です。そのため、前項「ブラウザによる入力欄の位置」にある画像での表示にて確認できる通り、差異を無くすためにもinputタグのスタイルを初期化してからブロックレベル要素のタグに装飾を施すことが望ましいとされていました。
以下、サンプルコードです。
See the Pen
2020-03-23-sample-10 by YOHEI INAI (@yohei_inai)
on CodePen.
見た目として影響のあるスタイルは、親要素に施してから、inputタグの入力系の文字に関するスタイルだけを設定した場合、上図のようにデザインを統一することができます。
本来は、サンプルコードにも扱っている通り、htmlの構造と、スタイルの掛け方での方法が推奨されていましたが、必ずしもこの方法にて実装しなければならない理由はなく、況してや、近年のブラウザでの表示差分は少ないため、参考までに留めてください。
監修してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
