HTMLでinput要素の入力位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでinput要素の入力位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

input要素とは

input要素は、ユーザーがブラウザから入力した値をプログラムによってサーバーに送信するためのインターフェース（入力装置）です。ユーザーのキーボードにて入力できる値や、チェックの有無を示す記号（識別子）などをブラウザに送信してもらうことが実現できます。

ブラウザが提供している部品として使用されることにもなっており、表示としての見た目は、過去のブラウザの種類によって大きく異なります。

 

ブラウザによる入力欄の位置

近年のブラウザでの入力欄の表示や位置について、然程の相違は見受けられません。下記のサンプルのソースコードでの表示について、下図を掲載していますので、目視にてご確認ください。

 

See the Pen
2020-03-23-sample-09 by YOHEI INAI (@yohei_inai)
on CodePen.

 

左端から配置しているブラウザは、Firefox、Chrome、Safari、Edge、Operaの順です。それぞれのブラウザでの表示が確認できます。近年のブラウザでも、表示位置に微差があります。しかし、それよりも、幅や若干の高さについての差異のある表示が目視でも確認できます。

次項の「入力欄の位置がずれる原因と対処法」では、原因と対処法を説明します。

 

[PR] Webデザインで副業する学習方法を動画で公開中

入力欄の位置がずれる原因と対処法

ブラウザによって異なる標準的なスタイルとして、初期値が若干だけ異なっていることが原因です。そのため、前項「ブラウザによる入力欄の位置」にある画像での表示にて確認できる通り、差異を無くすためにもinputタグのスタイルを初期化してからブロックレベル要素のタグに装飾を施すことが望ましいとされていました。

以下、サンプルコードです。

See the Pen
2020-03-23-sample-10 by YOHEI INAI (@yohei_inai)
on CodePen.

 

見た目として影響のあるスタイルは、親要素に施してから、inputタグの入力系の文字に関するスタイルだけを設定した場合、上図のようにデザインを統一することができます。

本来は、サンプルコードにも扱っている通り、htmlの構造と、スタイルの掛け方での方法が推奨されていましたが、必ずしもこの方法にて実装しなければならない理由はなく、況してや、近年のブラウザでの表示差分は少ないため、参考までに留めてください。

 

監修してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。