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

入力文字の装飾

さて、次に、入力される文字を装飾してみましょう。
HTMLでは無理ですが、スタイルシートを使うと、フォームの入力欄にこれから入力される文字も装飾することができます。

この方法を用いたフォームは以下の通りです。何か文字を入力してみて下さい。

さて、ではこれらの実現方法についてご紹介致しましょう。

入力文字の装飾方法

文字を装飾するには、 font-familyプロパティを用います。 このプロパティでは、フォント名やフォント種類を指定することができます。これをフォームの入力欄を構成する要素に指定すれば、フォームに入力される文字を望みのデザインにすることができます。

■フォームへの文字の指定

スタイルシートの font-familyプロパティを用いて フォント名を指定しています。
1つしか指定しないでおくこともできますが、それだと、指定のフォントを持っていないアクセス者にどう見えるか分かりません。 そこで、複数のフォントを候補順に並べておくことができます。

スタイルシートは、フォントを1つだけ指定する場合には、

font-family: Verdana;

と記述します。複数指定する場合は、優先順に、

font-family: Verdana, Arial, Helvetica, Geneva;

と記述します。日本語フォント名などによくある「スペースを含む名称」を指定する際は、クオーテーション記号で囲みます。

font-family: 'HG丸ゴシックM-PRO','ＭＳ ゴシック';

※欧文フォントでも「Century Gothic」や「Times New Roman」などスペースを含む名称の場合は、クオーテーションで囲む必要があります。

これらの指定を、名前欄を作っているinput要素に加えると

<input type="text" name="name" style="background-color: #ffffcc; font-family: Verdana, Arial, Helvetica, Geneva;">

などのようになります。

■フォント種類での指定

フォント名で指定すると、そのフォントがインストールされている環境でないと（作成者の意図通りに）見えない可能性があります。 そこで、フォントの名称ではなく「種類の名称」で指定する方法が用意されています。

これらの種類での指定は、フォント指定リストの最後に必ず記述しておくようにしましょう。 そうすれば、並べたすべてのフォントがインストールされていない環境で閲覧された場合でも、作成者の意図に近いフォントで表示される可能性が高くなります。

例えば、ゴシックで表示したいなら、

font-family: 'ＭＳ Ｐゴシック', sans-serif;

と記述しておくことで、「ＭＳ Ｐゴシック」フォントのない環境でも、ゴシック系のフォント（＝sans-serif系フォント）で表示されるようになります。

※これらの種類名は、クオーテーションで囲まないように注意して下さい。フォントの名称ではありませんから、クオーテーションで囲んではいけません。

■フォームへの文字の指定

文字サイズを指定することもできます。その場合は、 font-sizeプロパティを用います。

font-size: 18pt;

上記の例だと、18ポイントの大きさで表示されることになります。
具体的な「数値＋単位」での指定のほか、「smaller」や「larger」・「80%」や「120%」など、相対的な指定も可能です。

おわりに

今回は、フォームのデザイン方法をご紹介致しました。 ぜひ、個性的なフォームを作ってみて下さい。とはいえ、あまりにも凝りすぎて、入力した文字が極端に見えにくくなるようなデザインはしないように注意しましょう。

【関連記事】

• 未記入の入力フォームに案内画像を表示する
• テキスト入力欄の内側にアイコンを表示する
• ボックスに背景画像を使う際の落とし穴
• フォームのボタンにアイコンや装飾を加える
• 背景がアニメーション！？
• 背景画像の表示方法を自在に指定