HOME > 開発者向けBLOG > Webデザイン >  テキストエリアに角丸背景の画像を表示

Technology Note 開発者向けBLOG

Webデザイン

テキストエリアに角丸背景の画像を表示

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

テキストエリアに対して、任意で高さを変更できる、角丸背景の画像を表示する方法をご紹介いたします。

まず、テキストエリアのスタイルをリセットするプロパティを指定します。

「-webkit-appearance: none;」、「-webkit-border-radius: 0;」はスマートフォン用に記述しています。

1
2
3
4
5
6
7
8
9
10
11

textarea {
  outline: none;
  overflow: auto;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  resize: none;
}

任意で高さを変更できるようにするために、高さ専用のクラスを用意します。比較するために高さの値が違う二つのクラスを用意しました。「.height01」、「.height02」が該当するクラスになります。

高さが変更されても中央の画像が伸びる用に「.middle」で下に同じ画像を繰り返して表示しています。ここの幅は画像と同じ横幅を指定します。

14行目～17行目ではテキストエリアとボトムに表示されるコーナー画像の幅に同じ値を指定しています。「.middle」の画像幅より値が20px小さくなっていますが、これはテキストエリアにテキストが入力された時の左右のパディングを調整した分の値を引いています。実際の記述は25行目の「padding: 0 10px(左右) 10px;」にあたります。

19行目の「.top_corner」はトップのコーナー画像と表示位置を指定しています。

24行目の「.bottom_corner」はボトムのコーナー画像と表示位置を指定しています。

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

.height01 {
  height: 180px;
}
 
.height02 {
  height: 280px;
}
 
.middle {
  width: 571px;
  background: url(img_bg_area_middle.gif) repeat-y;
}
 
.middle textarea,
.bottom_corner {
  width: 551px;
}
 
.top_corner {
  padding: 10px 0 0;
  background: url(img_bg_area_top.gif) no-repeat 0 top;
}
 
.bottom_corner {
  padding: 0 10px 10px;
  background: url(img_bg_area_bottom.gif) no-repeat 0 bottom;
}

サンプルを見ると高さが異なる二つのテキストエリアが表示されています。「.height01」、「.height02」の高さの値を変更することによって、 高さが違う角丸のテキストエリアを表示させることができます。

サンプル

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

textarea {
  outline: none;
  overflow: auto;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  resize: none;
}
 
.height01 {
  height: 180px;
}
 
.height02 {
  height: 280px;
}
 
.middle {
  width: 571px;
  background: url(img_bg_area_middle.gif) repeat-y;
}
 
.middle textarea,
.bottom_corner {
  width: 551px;
}
 
.top_corner {
  padding: 10px 0 0;
  background: url(img_bg_area_top.gif) no-repeat 0 top;
}
 
.bottom_corner {
  padding: 0 10px 10px;
  background: url(img_bg_area_bottom.gif) no-repeat 0 bottom;
}

HTML

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

<p>
    高さ200px
</p>
<div class="middle">
    <div class="top_corner">
        <div class="bottom_corner height01">
            <textarea name="area01" cols="55" rows="10" class="height01"></textarea>
        </div>
    </div>
</div>
 
<p>
    高さ300px
</p>
<div class="middle">
    <div class="top_corner">
        <div class="bottom_corner height02">
            <textarea name="area02" cols="55" rows="15" class="height02"></textarea>
        </div>
    </div>
</div>

<

>

PAGETOP