CSS WEB制作

<input> はインライン要素 max-widthは効きません

inline

プログラミングを勉強中のみなさん、こんにちは!

<input>タグに幅を持たせようとして、max-widthを設定したけど、幅が広がならいよ・・・

と困っていませんか?

 

結論として

<input>タグはインライン要素なのでmax-widthは設定できない

ということです。

 

今回は、<input>タグの注意点について紹介します。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

目次
  1. <input>の注意点
  2. 解決方法
  3. まとめ

<input>の注意点

<input>タグに幅を持たせようとして、max-widthを設定しました。

しかし、 ブラウザの幅を広げてもうんともすんとも言いません。

あれこれ調べてもると、どうやら「<input>タグはインライン要素であり、max-widthは設定できない」ということらしいです。

 

ちなみに、インライン要素と言えば、他には、<a>タグや<br>などですね。

 

 

解決方法

ケースバイケースですが、

私の場合、幅は持たせたい、なおかつ、レスポンシブにするにあたり変動させたかったので、

widthをpxで決めるのではなく、「%」で設定しました。

 

 

まとめ

<input>は枠があるので、ブロック要素に見えますが、インライン要素です。

同じ現象でお困りの方、ぜひ参考にしてください。

 

 

関連性は薄いですが、模写コーディングについて記事も紹介しておきます。

独学で行き詰まっている人はテックアカデミー無料メンター相談もおすすめです。

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5