【レビュー】IEのテキストエリアから不要なスクロールバーを消す方法 | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【レビュー】

IEのテキストエリアから不要なスクロールバーを消す方法

後藤大地　 [2010/08/24]

印刷

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にデモンストレーションとして掲載されているコードをベースに、もっとシンプルに変更したもの。