ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeCSS「type=”input”は、widthとmax-widthを併用する作戦」の記事

type=”input”は、widthとmax-widthを併用する作戦

インプットタイプイメージ

ウサヲです。

お問い合わせ先の名前やメールアドレス欄など、 許されるだけの横幅全体にビヨーンと長くしたくない場合には、width と max-width を併用するといい、と聞いたので、メモ。

input欄の幅を変えてみます。

当初、ウサヲブログの「お問い合わせ」ページの見てくれは、コンナでした。

旧インプット画面

 

お名前やメルアドなど、実に無駄にビヨーンと長い領域が確保されています。レスポンシブにも対応するようにと、98%の幅で指定してありますが、・・・しかしみっともない。ビョーン。

そしてこのようにしました。

新インプット画面

いかがでしょう!夏のシャワー後のようにサッパリしました!

CSS、こうしました。

 input[name="your-name"],
 input[name="your-email"],
 input[name="your-subject"],
 textarea[name="your-message"] {
    max-width: 98%;
}
 input[name="your-name"],
 input[name="your-email"] {
    width: 18em;
}
 input[name="your-subject"] {
    width: 28em;
}

アドバイスくださった神と崇めるウェブの師匠に感謝であります。ウサヲはリフレッシュしました。

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP