フォームのスタイリング★input要素のスタイルを属性値で指定し分ける今回は、「メールアドレス」入力欄と「お名前」入力欄の横幅を揃えようと思います。入力欄の横幅を揃えるのが本当にスタイルとして良いかどうかはともかく、現在の表示領域に対して横幅70%で統一することにします。入力欄のスタイルを指定するのですから、input要素にスタイル指定すれば良いように思います。そこで、form.cssに以下の記述を追加してみましょう。{width:70%;}保存をしたらブラウザで表示してみましょう。「メールアドレス」入力欄と「お名前」入力欄だけではなく、「お問合せ区分」のラジオボタンまで横幅が広がってしまっています。指定すると、ラジオボタンまでスタイル指定の影響を受けてしまうのです。このような場合には、属性値セレクタをします。先ほどform.cssに追加した部分を、以下のように書き換えてください。{width:70%;}保存をしたらブラウザで表示してみましょう。「メールアドレス」入力欄と「お名前」入力欄の横幅が70%で統一され、かつ、ラジオボタンへのスタイルの影響が無くなれば成功です。今回追加したCSSソースの内容を確認しておきましょう。いう2つのセレクタを、カンマ区切りで並べています。これは、「input要素のtype属性の値がtextの場合、および、input要素のtype属性の値がemailの場合」という意味です。セレクタをカンマで区切って並べると、複数のセレクタに対して同じスタイルをまとめて指定することができます。「input要素のtype属性の値がtextの場合」という意味です。「input要素のtype属性の値がemailの場合」という意味です。このような属性値セレクタを使えば、特定の属性値を持つ要素にだけスタイルを適用できます。例:属性値がtextの場合にだけスタイルを適用input[type="text"]{スタイル内容}属性値セレクタを使うことで、ラジオボタンにはスタイルが適用されずに、テキスト入力欄とメール入力欄のみに横幅70%のスタイルを適用することが可能になります。インターネット上で提供されているフォームサービスを利用ここまででフォームの入力画面(contact_jisaku.html)が完成しました。入力画面であり、実際には問い合わせメールを送信することはできません。これを実際にメールが送信できるものにしたいのですが、メール送信フォームをすべて自力で作成しようとすると、CGIやPHPなどのサーバー側で処理するプログラムの知識が必要となってきます。これらの知識はHTMLとCSSの範囲を超えているため、このチュートリアルではメール送信のプログラム部分については扱いません。メール送信フォームをすべて自力で作成したい方は、さらにCGIやPHPなどのプログラムの勉強をされると良いでしょう。実際にメール送信できない単なるフォーム入力画面では、ウェブサイトとして使いものになりません。そこで、インターネット上で提供されているフォームサービスを利用することで、HTMLとCSSの範囲で実際にメール送信ができるお問合せページを作成していくことにします。ここまでの制作段階で、「お問合せ(自作)」ページは以下の状態となっています。