メールアドレスの入力フォームの幅を画面のサイズに合わせて変える方法

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
メルマガの登録フォームの入力欄の幅は設定できますか?

よしたか
CSSで調整しましょう。

メール・マガジンの登録フォームで入力欄が小さくなったり、大きくなったりします。
ウィンドウのサイズに合わせて、入力フォームの大きさを変えるにはどのようにしたら良いかを説明しています。

この記事を読むことで
  • ウィンドウのサイズに合わせて入力フォームの大きさを変えるCSSがわかります。

Contents

フォームの事例

ウィンドウサイズに合わせて入力フォームサイズを変化させる

<tr><td> 入力フォーム </td>

<td> <html:text property="hoge" ~ /></td>

textはsizeの指定ができ、フォームの長さを調節できます。
固定値を入れるとできることになりますが・・・・

ポイント
  • 「textarea」(テキストエリア)だと、ウィンドウサイズに合わせて、フォームのサイズも変化する。

解決策

「text」のまま、ウィンドウサイズの変化に合わせて、フォームサイズを変化させる方法は・・・

<input type="text" style="width:100%">

上記のようにCSSを使ってwidthで、横幅をパーセントで指定します。

まとめ

入力フォームはスタイルによって変形させることができます。

input タグの中でテキストや CSS を見つけて、その後にstyleを利用して、幅を決定していきましょう。
HTMLは詳しい人じゃないと簡単にわかるものではありませんので、タグの意味が分からない方はもう調べてから、コピペをしてみてください 。

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事