CSSでtextareaを自由自在に変化させる方法を徹底解説

CSSは、ウェブサイトには欠かせないものです。

レイアウトを整える、文字の色や大きさを変える、余白を調整する、見出しを装飾するなど、デザインを表現するための、さまざまな役割を持っていますね。HTMLは情報を記述するだけで、見た目に関することの大半は、CSSが担っているのです。CSSによってさまざまな要素の見た目を変えることが可能です。

この記事では、CSSでtextareaの見た目を変える方法を紹介しています。textareaはお問い合わせページなどに設定するプロパティです。

CSSでtextareaに装飾することで、ユーザーにも使いやすいtextareaを作成することができます。様々な装飾方法を紹介しますので、最後までご覧ください。

textareaとは

まずtextareaとはなんなのかについて解説していきます。ページ上でユーザーが任意の文字を入力できる、複数行の入力欄のことをtextareaといいます。似たような要素に<input type=”text”>がありますが、こちらは1行の入力欄です。1行と複数行の違いがあると憶えておいてください。

textareaは以下のように記述します。

HTML
<textarea></textarea>

上記のようにテキストの入力欄が作成されます。

HTML
<textarea>テキストを入力してください</textarea>

テキストを入力してください

このように、開始タグと閉じタグの間にテキストを挿入すると、textareaにデフォルトで表示される内容となります。

テキストを入力できるエリアだということが分かりやすくなりますが、ユーザーがデフォルトのテキストを削除しなければならないことが不便です。

テキストを入力できるエリアだということを知らせるためにはlabelを使用するとよいでしょう。

HTML
<label for="sample">テキストを入力してください</label>
<textarea id="sample"></textarea>

テキストを入力してください

これで、textareaのすぐそばにテキストが表示されて分かりやすくなります。属性「for」と「id」に同じ文字列を指定することで、labelとtextareaが紐づけられ、labelをクリックすることでtextareaにフォーカスが当たるようにもなります。

または、以下のような記述法もあります。

HTML
<textarea placeholder="テキストを入力してください"></textarea>

属性「placeholder」で指定した内容は、デフォルトで表示されますが、ユーザーがテキストを入力した瞬間に消えるので削除という作業の必要がありません。

textareaには他に重要な属性として「name」、「cols」、「rows」があります。

HTML
<textarea name="sample" cols="40" rows="4" ></textarea>

nameは入力欄につけられる名前です。フォームが送信された際、情報を識別するときに使われます。

colsは列数（横幅）、rowsが行数（縦幅）であり、textareaの大きさを指定します。デフォルトはcolsが20、rowが4です。

textareaは、それ単体で使われることがほとんどありません。内容を送信するためにbuttonと一緒に使われます。

HTML
<form>
<textarea></textarea>
<button>送信</button>
</form>

送信

textareaとbuttonを記述し、formタグで囲います。送信ボタンに関しては、以下のような記述もあります。

<form>
<textarea></textarea>
<input type="submit" value="送信">
</form>

このようにtextareaはフォーム関連の要素として使われるものです。formタグにも指定すべき属性がありますが、今回はtextareaの記事なので割愛します。

ここから先は、textareaのCSSについて解説します。

CSSでtextareaの大きさを指定する

textareaの大きさがcolsとrowsで指定できるのは前述のとおりです。しかし、この指定は意図した大きさにぴったりと合わせるということが難しく、作成者の完全な思い通りにはならないという難点があります。

完全に意図した大きさで表示させるには、CSSが便利です。

CSS
textarea {
width:100%;
}

これでtextareaが、親要素の横幅いっぱいまで広げることができます。もちろん縦幅の指定も可能です。

CSS
textarea {
width:100%;
height:100px;
}

これで横幅が100%、縦幅が100ピクセルとなります。このようにパーセンテージやピクセルで、textareaの大きさを思いのままに変更できるのです。

cols、rowsの指定よりもCSSの指定が優先されます。

CSSでtextareaの大きさ変更を不可にする

textareaの右下の角にある斜めの2本線をドラッグし、そのままカーソルを動かすと、textareaを引っ張るようにして大きさを変更することができます。この仕様を無効化するのが、以下の記述です。

CSS
textarea {
resize:none;
}

これで右下の2本線が消えて、大きさを変更できなくなります。

CSSでtextareaの文字のサイズや色、余白を指定する

textarea内も他の要素と同じように、文字のサイズや色、余白などを独自に指定することができます。

CSS
textarea {
padding:10px;
font-size:16px;
color:#666666;
}

これで枠線と文字が表示されるエリアの間の余白が10ピクセルになり、テキストの大きさが16ピクセル、色が#666666（グレー）になりました。

textarea内を他の要素と差別化させたいときなどに便利です。

CSSでtextareaの背景色を指定する

textareaは透明なので、親要素の背景色の影響を受けてしまいます。影響を受けたくないというときは、以下のように指定してください。

CSS
textarea {
background:#ffffff;
}

これでtextarea内が#ffffff（白）になります。また、textareaを目立たせたいときにも便利です。

CSS
textarea {
background:#fffade;
}

これでtextarea内が#fffade（薄い黄色）になります。他の部分とは違うエリアだということが、すぐに分かるようになるでしょう。

CSSでtextareaのborderを指定する

線というものはデザインにおいて非常に重要な要素です。textareaのデフォルトの線では、周囲のデザインとマッチしないということも多いかもしれません。

そんなときは、CSSでborderを指定してみてください。

CSS
textarea {
border: 2px solid #cccccc;
border-radius: 6px;
}

これでborderが#cccccc（薄いグレー）の2ピクセルの直線となります。さらに四隅に6ピクセルの角丸を設定しました。

デフォルトの線よりもかなり柔らかな印象となったのではないでしょうか。

CSSでtextareaのフォーカス時の設定を指定する

フォーカスとはtextareaに文字が入力できる状態ということです。textareaにカーソルを合せてクリックすると、フォーカスの状態になります。

デフォルトでも通常時とは表示が変わりますが、CSSで指定することによりさらに際立たせることが可能です。

CSS
textarea:focus {
border:2px solid #0000ff;
outline:0;
}

これで、textareaがフォーカスされたときのみ、borderが#0000ff（青）の2ピクセルの直線となります。枠がかなり際立ち、フォーカスされているということが分かりやすくなるでしょう。

「outline:0;」はデフォルトの黒い影を消すためのものです。

条件を満たしていないときに表示を変える

入力欄の条件を満たしていないとき、アラートが出るフォームを見たことがある方は多いのではないでしょうか。一部のことはCSSでも実行可能です。

まずHTMLに条件を指定します。

HTML
<textarea required maxlength="20"></textarea>

「required」は入力必須、「maxlength=”20″」は最大文字数20という意味です。CSSは以下のように記述します。

CSS
textarea:invalid {
background: #ffd3d3;
border:2px solid #ff0000;
}

「:invalid」は、入力値が不正な場合という疑似クラスです。正常な場合は「:valid」です。

入力必須と最大文字数20が満たされていない場合、つまり空欄か、20文字以上の場合、背景が#ffd3d3（薄い赤）、borderが#ff0000（赤）の2ピクセルの直線となります。かなり目立つので、アラートとして十分な役割を果たすでしょう。

CSSでlabelを装飾する

textareaとセットで使われることが多いlabelも、CSSで見た目を変えることができます。

HTML
<label for="sample">テキストを入力してください</label>
<textarea id="sample"></textarea>

CSS
label {
display:block;
border-bottom:1px solid #cccccc;
margin-bottom:10px;
}

テキストを入力してください

まずlabelはインライン要素なので、ブロック要素に変更しました。そして#cccccc（グレー）の1ピクセルの直線をテキストの下に設定しています。

これで「テキストを入力してください」が見出しのようになり、より注意を引くことができるようになるでしょう。

CSSでbuttonを装飾する

buttonも、labelと同様にCSSで装飾が可能です。

HTML
<form>
<label for="sample">テキストを入力してください</label>
<textarea id="sample" required maxlength="20"></textarea>
<button>送信</button>
</form>

CSS
button {
border:none;
box-shadow:none;
display:block;
background:#ff0000;
color:#ffffff;
font-weight:bold;
padding:10px 15px;
}

「border:none;」と「box-shadow:none;」はデフォルトの指定を解除するためのもので、「display:block;」はbuttonをブロック要素にするための記述です。

その下が装飾に関する記述となります。#ff0000（赤）の背景に白い太字という、かなり目立つボタンになりました。

これでボタンが見落とされるということは起きないでしょう。ボタンのデザインはページによって違うので、それぞれのアイディアを試してみてください。

CSSでtextareaを装飾する：まとめ

見落とされがちですが、textareaもCSSでさまざまな指定ができます。テキストを入力するエリアだということが分かりやすくなり、使いやすさも格段にアップするでしょう。

送信にいたるまでの割合も増える筈です。ぜひ、textareaにもCSSを指定して装飾しましょう。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！