＜input＞ はインライン要素　max-widthは効きません

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

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

と困っていませんか？

結論として

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

ということです。

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

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

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

<input>の注意点

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

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

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

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

解決方法

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

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

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

まとめ

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

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

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

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