2015年4月版 input size について

2015年04月03日UP
  • このエントリーをはてなブックマークに追加

このブログ、長いこと放置で、すごーーく更新をしていなかったのですが、
過去に書いた「input size はブラウザによる幅の違いが生まれる」という記事にそれなりの数のアクセスをいただいていることに気づき、その記事を2015年4月版にリライトします。

まずはその記事の簡単なおさらいから・・・

1、<input size=”30″>というHTMLのsizeでの指定は、
  ブラウザによって幅に違いが出る
2、CSSのwidth指定では違いがでない
3、だからCSS(もしくはstyle=”width:000px”)で書け!

ざっくり、こんな感じのお話でした。

該当記事は内容が古いもの(以前の記事は2010年9月22日の投稿・・・。5年も前・・・。)となっていますので、IE8が最新とか、firefox3とか、macでなくMacintoshと書いているとか、、、突っ込みどころ満載な記事になっていました。

これを期に書き直す、と言いますか、あなたが疑問に思っている答えを書いてみます。

ただ、主に「input size」関連のキーワードでのアクセスが多かったので、なにを求めてきてくださったのかイマイチわかりませんでした・・・。

なので、「input size」について今思いつくものをありったけ書いていきます。

単純にHTMLでinputの書き方を知りたい

「<input size=”30″ name=”〇〇〇” value=””>」
です。

size=””の数値は何を表している?

だいたい「半角文字での文字数」です。
※ 昨今のブラウザでは変わってきているので『だいたい』とつけました。

inputにsizeは必要?

絶対ではありません。
CSSで記述する場合は特に書かなくても大丈夫です。

「<input name=”〇〇〇” value=”” style=”width: 200px;”>」
こんな書き方でもOKです。

inputにsizeを書かないとどうなる?(CSSでも書かない場合)

どうにもなりません。
今のブラウザでは「size=”20″」を指定したときと同じサイズになります。

これが無いからといって送信できないということはありません。

input sizeが効かない!

おそらくCSSでも指定しているのではないでしょうか?
CSSの記述のほうが優先されます。

CSSで記述されているかがわからない・・・

該当のページを開いて、
Windowの場合は「F12」、macの場合は「option + command + U」を押してみてください。
(mac firefoxは「F12」かも・・・)

ブラウザの下か、横か、別ウィンドウで、ソースコードが表示されますので、虫眼鏡マークかポインタみたいなマークか、要素を選択できるボタンを押して、該当のinputにカーソルを合わせてください。

すると、右側に適用されているCSSが表示されます。

※ OSやブラウザによって若干違いがあります。

inputをスマホに対応したい

是非してください。
デザイン諸々はCSSで書くことをおすすめします。

inputをレスポンシブWebデザインにするには?

「<input name=”〇〇〇” value=”” style=”width: 80%;”>」
とか、widthを%値で指定すれば自動でサイズを拡大・縮小します。

※ 範囲内に収めるには親要素の幅が決める必要があります。
※ スマホではタップしづらくなるため、極力100%に近い値にすることをおすすめします。

具体的なCSSでの書き方を知りたい

■HTML
<input name=”〇〇〇” value=””>

■CSS
input{ width: 80%; }

@media screen and (max-width:568px){
input{ width: 100%; }
}

こんな感じです。

↑の書き方だと全部のinputが変わっちゃうじゃないか!

■HTML
<input name=”〇〇〇” value=”” class=”re-width”>

■CSS
input.re-width{ width: 80%; }

@media screen and (max-width:568px){
input.re-width{ width: 100%; }
}

これでどうでしょう?


このようなところでしょうか。

まぁ、昨今ではスマートフォン&タブレットという素晴らしい端末が尋常じゃないスピードで広まってきていますので、inputの横幅もCSSでの指定することは当たり前になっているかと思われます。

input size につきまして、
他にわからない点がありましたらどうにかお伝えください。
(4年ぶりにこのWordPressにログインしたらなぜだかコメントが使えなくて。。。)

あ、
おそらく、このブログの更新は、5年後になります(笑)
※ 要望が多かったら近いうちにまた書くかもしれません。

現在もサイト制作やEFO施策、Webコンサルタント的な仕事をしていますので、
このようなノウハウや技術を大量に持ちあわせています。

何か聞きたいことやご依頼がありましたら直接連絡を下さいましたら幸いです。(連絡は無償です。笑)

筆者桐山の連絡先
メール : kiriyama@ht-produce.com
facebook : https://www.facebook.com/h.t.p.kiriyama

ちなみに、
会社サイトやEFOツール「フォームキーパー」サイトも例によって全く更新していません。
(もちろんスマホ対応もできていません)

これ、今のところ、更新する気も必要もないと思っているので、
「これだけ言っておいて、お前のとこのサイトは出来てないじゃん」
とかは一切受け付けません。

何卒よろしくお願いいたします。

タグ: | | |