htmlでinputの枠を大きく表示したいです。

こんにちは。
Windows10でwebpageを開発しています。

###前提・実現したいこと
htmlでinputの枠を大きく表示したいです。
下記のコードだと、最近の高解像度(1,920×1,080とか、2,560×1,440とか)のスマホだと、左上にちいさーい枠がちょこっと表示されるだけです。
これは使いにくい。
もっと大きくしたいのですが、どの要素を設定したらよいでしょう?

###試したこと
size='100'とか、height='50'とかをしてみたのですが、うまくいきませんでした。

###発生している問題・エラーメッセージ
スマホだと、左上にちいさーい枠がちょこっと表示されるだけです。

###該当のソースコード

html
1<html><body><form action='test.cgi' method='post'><input type='text' name='name' ></form></body></html>

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

スタイルシートでfont-sizeに適当な倍数をいれてください

CSS
1input{font-size:3em;}

投稿2017/08/14 07:02

yambejp

総合スコア114814

cancat

2017/08/14 07:17

ありがとうございます。スタイルシートでなくhtmlで指定できますか？

cancat

2017/08/14 07:18

<html><body><form action='test.cgi' method='post'><input type='text' name='name' font-size='3em'></form></body></html>ではだめっぽいです。

yambejp

2017/08/14 07:21

それをやるなら以下ですね <input type='text' name='name' style=’font-size:3em;'> でも、下手にサイズをいじると今度は低解像度の際に大きすぎることになります。解像度によって読み込むcssを変えるなどの仕組みが必要になると思います

cancat

2017/08/14 07:50

ありがとうございます。できました。おっしゃるように、低解像度の場合に問題起きそうですね。 htmlやcssはとんとうとくて、ほとんど初心者なので、ちっともぴんと来ないのですが、とりあえず今回に限れば3emとか5emでうまくいきそうです。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

htmlでinputの枠を大きく表示したいです。

関連した質問