3/3 フォームの背景や文字を装飾する方法 [ホームページ作成] All About

入力文字の装飾

さて、次に、入力される文字を装飾してみましょう。
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%」など、相対的な指定も可能です。

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

【関連記事】

※記事内容は執筆時点のものです。最新の内容をご確認ください。

※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。