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

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

新規登録して質問してみよう
ただいま回答率
85.49%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

5032閲覧

【HTML】textareaのrowsを指定すると上に伸びる

mio_51

総合スコア9

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/02/20 09:32

編集2018/02/20 09:33

メールフォームを作成していたところ、お問い合わせ内容のtextareaでrowsを指定すると
下に伸びるのではなく、上にエリアが広がっていくような状況になります。
(基準点が左下にあるようなイメージです)
「お問い合わせ内容」という文字もテキストエリアの下部に整列されています。
イメージ説明

本来としては下記イメージのようにテキストエリアの中央に文字があるような状況にしたいです。
(基準点が左上にあるようにしたい)
イメージ説明

このCSS、HTMLが邪魔してるのでは?というのでも大丈夫ですので
なにか引っ掛かる点があれば教えて頂けますと幸いです。

UTF

1<form method="post" action="mail.php"> 2 <table class="formTable"> 3 <tr> 4 <th>お名前【必須】</th> 5 <td><input size="20" type="text" name="お名前" /></td> 6 </tr> 7 <tr> 8 <th>フリガナ【必須】</th> 9 <td><input size="20" type="text" name="フリガナ" /></td> 10 </tr> 11 <tr> 12 <th>電話番号(半角)【必須】</th> 13 <td><input size="30" type="text" name="電話番号" /></td> 14 </tr> 15 <tr> 16 <th>メールアドレス(半角)</th> 17 <td><input size="30" type="text" name="Email" /></td> 18 </tr> 19 <tr> 20 <th>お問い合わせ内容</th> 21 <td><textarea name="お問い合わせ内容" cols="50" rows="6"></textarea></td> 22 </tr> 23 </table> 24 <p align="center"> 25 <input type="submit" value="  確認  " /> 26 </p> 27 </form>

UTF

1.formTable{ 2 width: 90%; 3 margin: 40px auto; 4 border: solid 1px #bfbfbf; 5} 6 7.formTable tr th{ 8 font-weight: normal; 9 text-align: left; 10 padding: 1.5rem 0; 11 width: 40%; 12 padding-left: 3rem; 13 border: solid 1px #bfbfbf; 14 background-color: #eeeeee; 15} 16 17.formTable tr td{ 18 width: 60%; 19 border: solid 1px #bfbfbf; 20 padding-left: 2rem; 21}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

投稿後に解決できました…。
こんな初歩的な事だったとは、共有だけ出来たらと思うので記載しておきます。

お騒がせいたしました。

UTF

1textarea{ 2 vertical-align: middle; 3}

投稿2018/02/20 09:44

mio_51

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問