HTMLでinput要素をp要素と共に使う理由を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでinput要素をp要素と共に使う理由について解説しています。最初にinput要素とp要素の役割と書き方を説明します。次にp要素にinput要素を入れ込む理由、input要素とp要素を同時に使う方法について学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLでinput要素をp要素と共に使う理由について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

input要素をp要素と共に使う理由について詳しく説明していくね!

大石ゆかり

お願いします!

 

input要素について

input要素は、ブラウザがあらかじめ提供している部品としての見た目になってしまいます。主に、ブラウザからの入力系の値を受け取ってから、サーバーに送信するための役割を担っているため、値の受け渡しの機能が重要視されて扱われます。

inputタグのtype属性に定まった値を定義することによって、各種類ある部品としての形状に変化します。以下、それぞれのinput要素の属性を定義した場合の代表例を並べたサンプルコードです。

 

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

 

p要素について

p要素は、文章を定義するためのブロックレベル要素のタグです。

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

p要素にinput要素を入れ込む理由

かつては、input要素をスタイルを用いて装飾することは、控えるべきとされており、input要素に装飾を施す場合は、親要素にブロックレベル要素を定義してから、その親要素に装飾を施すことが推奨されていました。

この主な理由として、過去のブラウザには、input要素に装飾を施してしまうと、本来の機能に不具合が生じてしまう現象があったことからであると考えられます。そのため、p要素に装飾を施して、その子要素のinput要素には装飾を施さない手法にて、実装されることに抑制されていました。

現在、この実装について、文法の制約があるなどの強制力はありません。以下の「input要素とp要素を同時に使ってみよう」にて紹介しているサンプルコードでの記述方法は、参考までに留めてください。

 

input要素とp要素を同時に使ってみよう

以下、非推奨とすべきだったinput要素のサンプルコードです。

 

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

以下、装飾のために、p要素の子要素としてinput要素を使用している推奨だったサンプルコードです。

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

 

必ずしも、p要素にinput要素を入れ込まなければならない理由はありませんので、余力があるときにお試しください。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

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

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