HOME > 開発者向けBLOG > Webデザイン >  幅を指定せずにフォーム部品の下にテキストを回り込ませない

Technology Note 開発者向けBLOG

Webデザイン

幅を指定せずにフォーム部品の下にテキストを回り込ませない

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

テキストとフォーム部品に幅を指定せず、テキストが下に回り込むのを防止する方法をご紹介いたします。

1行目の「ul.keep input」でinput要素をブロック要素にして、floatプロパティを指定します。これによりinput要素とテキストが横並びになります。

6行目の「ul.keep span」ではspan要素をブロック要素にしています。8行目の「overflow: hidden;」、10行目の「zoom: 1;」プロパティにより、テキストが折り返す際にモダンブラウザとIE6ブラウザでテキストの回り込みを防止することができます。

1
2
3
4
5
6
7
8
9
10
11

ul.keep input {
  display: block;
  float: left;
}
 
ul.keep span {
  display: block;
  overflow: hidden; /* モダンブラウザ用 */
  padding: 0 10px;
  zoom: 1; /* IE6用 */
}

下記のhtml例ではlabel要素の上にspan要素を記述しています。labelの上にspanを記述する理由は、label要素に「ul.keep label」として「display: block;」を適用すると、labelがブロック要素になることにより、テキストが存在しない場所でもクリックするとチェックボックスにチェックが入ってしまうので、span要素に対して「display: block;」を指定するために記述しています。

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
38
39
40
41
42

<ul class="keep clearfix">
    <li>
        <input type="checkbox" name="check01" id="check01" value="" />
        <span>
            <label for="check01">
                チェックボックステキスト1チェックボックステキスト1チェックボックステキスト1チェックボックステキスト1
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check02" id="check02" value="" />
        <span>
            <label for="check02">
                チェックボックステキスト2チェックボックステキスト2チェックボックステキスト2チェックボックステキスト2
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check03" id="check03" value="" />
        <span>
            <label for="check03">
                チェックボックステキスト3チェックボックステキスト3チェックボックステキスト3チェックボックステキスト3
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check04" id="check04" value="" />
        <span>
            <label for="check04">
                チェックボックステキスト4チェックボックステキスト4チェックボックステキスト4チェックボックステキスト4
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check05" id="check05" value="" />
        <span>
            <label for="check05">
                チェックボックステキスト5チェックボックステキスト5チェックボックステキスト5チェックボックステキスト5
            </label>
        </span>
    </li>
</ul>

サンプルではチェックボックスと同じスタイルをラジオボタンにも適用させてみました。

サンプルを参照するとliで幅を指定している場所でテキストが折り返していることがわかります。またテキストが折り返した際に、チェックボックスとラジオボタンの下にテキストが回り込んでいないことがわかります。

限定的ではありますが、なんらかの事情でinput要素とテキストに幅を指定することができず、かつテキストを下に回り込ませたくない状況では心強いのではないでしょうか。

サンプル

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
38
39
40
41
42
43
44
45
46
47

ul,li {
  margin: 0;
  padding: 0;
}
 
ul {
  list-style: none;
}
 
ul.keep {
  width: 400px;
  margin: 0 0 20px;
  padding: 10px 10px 0;
  border: 1px solid #CCC;
  background: #EFEFEF;
}
 
ul.keep li {
  float: left;
  width: 150px;
  margin: 0 10px 10px 0;
  background: #6CF;
}
 
ul.keep input {
  display: block;
  float: left;
}
 
ul.keep span {
  display: block;
  overflow: hidden; /* モダンブラウザ用 */
  padding: 0 10px;
  zoom: 1; /* IE6用 */
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<ul class="keep clearfix">
    <li>
        <input type="checkbox" name="check01" id="check01" value="" />
        <span>
            <label for="check01">
                チェックボックステキスト1チェックボックステキスト1チェックボックステキスト1チェックボックステキスト1
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check02" id="check02" value="" />
        <span>
            <label for="check02">
                チェックボックステキスト2チェックボックステキスト2チェックボックステキスト2チェックボックステキスト2
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check03" id="check03" value="" />
        <span>
            <label for="check03">
                チェックボックステキスト3チェックボックステキスト3チェックボックステキスト3チェックボックステキスト3
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check04" id="check04" value="" />
        <span>
            <label for="check04">
                チェックボックステキスト4チェックボックステキスト4チェックボックステキスト4チェックボックステキスト4
            </label>
        </span>
    </li>
    <li>
        <input type="checkbox" name="check05" id="check05" value="" />
        <span>
            <label for="check05">
                チェックボックステキスト5チェックボックステキスト5チェックボックステキスト5チェックボックステキスト5
            </label>
        </span>
    </li>
</ul>
 
<ul class="keep clearfix">
    <li>
        <input type="radio" name="radio_group" id="radio01" value="" />
        <span>
            <label for="radio01">
                ラジオボタンテキスト1ラジオボタンテキスト1ラジオボタンテキスト1ラジオボタンテキスト1
            </label>
        </span>
    </li>
    <li>
        <input type="radio" name="radio_group" id="radio02" value="" />
        <span>
            <label for="radio02">
                ラジオボタンテキスト2ラジオボタンテキスト2ラジオボタンテキスト2ラジオボタンテキスト2
            </label>
        </span>
    </li>
    <li>
        <input type="radio" name="radio_group" id="radio03" value="" />
        <span>
            <label for="radio03">
                ラジオボタンテキスト3ラジオボタンテキスト3ラジオボタンテキスト3ラジオボタンテキスト3
            </label>
        </span>
    </li>
    <li>
        <input type="radio" name="radio_group" id="radio04" value="" />
        <span>
            <label for="radio04">
                ラジオボタンテキスト4ラジオボタンテキスト4ラジオボタンテキスト4ラジオボタンテキスト4
            </label>
        </span>
    </li>
    <li>
        <input type="radio" name="radio_group" id="radio05" value="" />
        <span>
            <label for="radio05">
                ラジオボタンテキスト5ラジオボタンテキスト5ラジオボタンテキスト5ラジオボタンテキスト5
            </label>
        </span>
    </li>
</ul>

<

>

PAGETOP