HOME > 開発者向けBLOG > Webデザイン >  スマートフォンでinput type text等の幅を揃える

Technology Note 開発者向けBLOG

Webデザイン

スマートフォンでinput type text等の幅を揃える

こんにちは、ゼノフィ渡部です。

スマートフォンで見たときに「input type text」等の幅を合わせる方法をご紹介いたします。

「input type text」や「textarea」で幅が合わない場合、大抵の理由はその要素が持っているパディングやボーダーにあります。

左右のパディングに対して「0px」を指定すると、実際に指定した「width」以外の幅の要素を除外することができますが、その場合、入力時に表示されるカーソルが左右にピッタリくっつくような表示になります。

パディングを戻すにしても、一度リセットしたパディングの値を各ブラウザが持っている値に戻すのはなかなか大変です。

下記のスタイルのポイントは「box-sizing: border-box;」になります。「box-sizing: border-box;」を指定するとパディングとボーダーを幅に含めることができるので、パディングを0に指定せずとも幅を揃えることができます。

幅が「100%」と「50%」のクラスを用意し、比較をします。「box100 」と「box50 」がdiv要素、「width100」と「width50」が、「input type text」、「input type password」と「textarea」のクラスになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.box100 {
  width: 100%;
}
 
.box50 {
  width: 50%;
}
 
.width100,
.width50 {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
.width100 {
  width: 100%;
}
 
.width50 {
  width: 50%;
}

下記のHTMLでは、「input type text」、「input type password」と「textarea」、その他の要素(div)の幅を揃えた表示を見るために幅が100%と50%用の要素を記述しています、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="p10">
    <input type="text" name="text" value="" maxlength="100" class="width100" />
    <input type="password" name="password" value="" maxlength="100" class="width100" />
    <textarea name="textarea" cols="50" rows="5" class="width100"></textarea>
</div>
 
<div class="p10">
    <div class="box100">
        幅100%
    </div>
</div>
 
<div class="p10">
    <input type="text" name="text" value="" maxlength="100" class="width50" />
    <input type="password" name="password" value="" maxlength="100" class="width50" />
    <textarea name="textarea" cols="50" rows="5" class="width50"></textarea>
</div>
 
<div class="p10">
    <div class="box50">
        幅50%
    </div>
</div>

サンプルを見ると幅が「input type text」、「input type password」と「textarea」、青色背景を指定したdivの幅が揃って表示されていると思います。

サンプルはAndroid2.2、2.3、3、3.2.1、iOS4、iOS5、iOS6の標準ブラウザで確認ができます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

body {
  margin: 0;
  padding: 0;
}
 
.p10 {
  padding: 0 10px;
}
 
.box100,
.box50 {
  margin-bottom: 30px;
  color: #FFFFFF;
  background: #3366FF;
}
 
.box100 {
  width: 100%;
}
 
.box50 {
  width: 50%;
}
 
.width100,
.width50 {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
.width100 {
  width: 100%;
}
 
.width50 {
  width: 50%;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="p10">
    <input type="text" name="text" value="" maxlength="100" class="width100" />
    <input type="password" name="password" value="" maxlength="100" class="width100" />
    <textarea name="textarea" cols="50" rows="5" class="width100"></textarea>
</div>
 
<div class="p10">
    <div class="box100">
        幅100%
    </div>
</div>
 
<div class="p10">
    <input type="text" name="text" value="" maxlength="100" class="width50" />
    <input type="password" name="password" value="" maxlength="100" class="width50" />
    <textarea name="textarea" cols="50" rows="5" class="width50"></textarea>
</div>
 
<div class="p10">
    <div class="box50">
        幅50%
    </div>
</div>

<

>

PAGETOP