にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

テキスト入力フォームの横幅はCSSで指定する [フォーム,]

HTMLで作るテキスト入力欄の横幅はsize属性を使えば指定できます。しかし、その指定によって実際の入力欄が何ピクセルの横幅になるかはブラウザによって異なります。スタイルシート(CSS)を使って横幅を指定すれば、1ピクセル単位で自由自在にサイズに調整できます。

テキスト入力フォームの横幅はCSSで指定する

テキスト入力フォームをHTMLで作成する際、横幅を何文字分にするかはsize属性で指定できます。でも、その指定によって実際に何ピクセルの横幅が確保されるかはブラウザによって異なります。ですから、あまり細かなデザイン調整ができません。しかし、スタイルシートを使えば1ピクセル単位で自由自在にサイズを調整できます。

そもそもデザインをHTML側で調整するのは望ましくありません。入力フォームのサイズはスタイルシートで指定するのが良いでしょう。

なお、HTMLで(size属性を使って)入力フォームの横幅を指定している場合でも、スタイルシートで横幅を指定すればスタイルシート側の横幅指定の方が優先されます。なので、スタイルシートを解釈できないブラウザ(もはやそんなものはないに等しいですが)のために、HTMLのsize属性で横幅を指定しておきつつ、スタイルシートで望みの横幅を指定することもできます。

入力フォームに限らず、要素の横幅を指定するにはwidthプロパティを使います。
例えば、以下のようなHTMLソースがあるとき…

HTMLソース

<input type="text" size="12" class="hoge">

class名が「hoge」であるinput要素の横幅を指定するには、

CSSソース

input.hoge { width: 120px; }

と書くだけです。この場合、120ピクセルの横幅が確保されます。
親要素に対する割合で指定することもできます。例えば以下のように値に「75%」と指定すれば、親要素(=外側のブロック)の横幅の75%のサイズで表示されます。

CSSソース

input.hoge { width: 75%; }

上記のソースを表示させると以下のように見えます。

例1:
例2:

上側は120px、下側は75%の横幅になっているはずです。

上側の例ではピクセル数で指定しているのでブラウザの幅に関係なく入力欄の幅は一定ですが、下側の例ではブラウザのウインドウ幅を変化させると入力欄の幅も変化します。

class属性を使わずに、テキスト入力欄だけを対象にして装飾する方法

なお、input要素すべてを対象にしてスタイルを指定するのは避けた方が良いでしょう。「テキスト入力フォーム」だけでなく「チェックボックス」や「ボタン」もinput要素で作られますから。それらに対しても同じ横幅を指定すると、困ったことになることが多いでしょう。(^_^;)

しかし、だからといって「テキスト入力フォーム」に対してだけ、いちいちclass名を割り振っていくのが面倒だ……という場合は、属性セレクタという仕組みを使って以下のように記述すると便利です。

CSSソース

input[type="text"] { width: 15em; }

上記の場合は、「input要素のうち、type属性の値が『text』であるもの」だけに限定して、横幅を15文字分にする装飾指定になります。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---