【ホームページ作成】フォームの背景や文字を装飾する方法

背景の装飾方法

過去の記事「背景画像の表示方法を自在に指定」でも解説していますが、スタイルシートの background-imageプロパティを用いれば、様々な要素に背景画像を加えることができます。フォームの入力欄も対象です。
同様に、background-colorプロパティを用いれば、背景色を加えることができます。

■フォームへの背景色の指定

まずは、名前とメールアドレスの入力欄に背景色を加えてみましょう。スタイルシートの background-colorプロパティを用いて値「 #ffffcc 」を指定します。

スタイルシートは、

background-color: #ffffcc;

と記述します。
※「#ffffcc」の部分は色の指定です。ここでは16進数で「淡い黄色」を指定しています。他にも、「skublue」など色名での指定も可能です。
これを、名前欄を作っているinput要素に加えると、（style属性を使って）

<input type="text" name="name" style="background-color: #ffffcc;">

と記述することになります。

■フォームへの背景画像の指定

次に、メッセージ入力欄に背景画像を加えてみましょう。スタイルシートの background-imageプロパティを用いて、画像ファイル「mail.jpg」を指定しています。

スタイルシートは、

background-image: url('mail.jpg');

と記述します。
※style属性を用いて記述することを考えて、ファイル名はダブルクオーテーションではなく、シングルクオーテーションで囲んでいます。（style属性を用いない場合でもシングルクオーテーションで囲んで問題ありませんので、常にシングルクオーテーションで囲むようにしておいても良いでしょう。）

これを、メッセージ入力欄を作っているtextarea要素に加えると

<textarea col="40" row="5" style="background-image: url('mail.jpg');"></textarea>

となります。
これで、背景の装飾はできあがりです。

次に、入力される文字を装飾してみましょう。

それでは、次のページへ →