SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Craig Buckler氏がSitePointにおいてHow to Remove Textarea Scrollbars in IEのタイトルのもと、あるひとつのCSSテクニックを紹介している。新規のテクニックというわけではなく、すでに長い間使われているテクニックだが、再度そのポイントに焦点を当てた記事として参考になる。特に新人のWebデベロッパやWebデザイナは目を通しておきたい記事。

特に何も指定しない場合、IEはテキストエリアの右端にスクロールバーを表示する。たとえスクロールする必要がないとして、最初から表示され選択できない状態になっている。複数行のテキストを表示、または入力されてスクロールする必要がでてくると、表示されているスクロールバーが利用できるようになる。

Firefox、Chrome、Safari、Operaなどほかの主要ブラウザの挙動はこれとは異なっており、スクロールする必要がでてくるまでスクロールバーは表示されない仕組みになっている。IEとそれ以外のブラウザではテキストフィールドのスクロールバーの扱いが違っている。How to Remove Textarea Scrollbars in IEで紹介されているテクニックはIEのテキストエリアにおけるスクロールバーの挙動をほかの主要ブラウザと同じようにするというもの。指定は簡単。CSSでtextareaに「overflow: auto;」を指定すればいい。

テキストエリア表示例 IE9 PP4

テキストエリア表示例 IE8

テキストエリア表示例 IE7

テキストエリア表示例 IE6

テキストエリア表示例 Firefox 3.6

テキストエリア表示例 Chrome 6開発版

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Textare scrollbar demo</title>
<style type="text/css">
fieldset
{
    clear: both;
    float: left;
    padding: 10px;


}
textarea#text2
{
  overflow: auto;
}
</style>
</head>
<body>
<form action="?" method="get">
<fieldset>
<legend>ノーマルテキストエリア</legend>
<textarea id="text1" name="text1" rows="6" cols="40"></textarea>
</fieldset>


<fieldset>
<legend>テキストエリア overflow: auto指定あり</legend>
<textarea id="text2" name="text2" rows="6" cols="40"></textarea>
</fieldset>
</form>
</body>
</html>

IE9 PP4、IE8、IE7、IE6のどれもテキストエリアにおけるスクロールバーの表示は同じ。スクロールの必要がなくても表示され、スクロールの必要がでてくると選択可能になり利用できるようになる。しかし「overflow: auto;」を指定するとほかの主要ブラウザと同じように、スクロールする必要性がない場合には表示されなくなる。

上記サンプルコードはHow to Remove Textarea Scrollbars in IEにデモンストレーションとして掲載されているコードをベースに、もっとシンプルに変更したもの。