【スタイルシートを使ったホームページ作成♪】
−初心者の初心者による初心者のためのCSS入門−


◆第19回 メールフォームの装飾 ◆

その1 メールフォームページを用意して・・・・一気に(おい!
これは、特殊(?)ぢゃから、もしもメールフォームを設置しておられる方がここを読んでいたらやってみてくだされ。
一応わしは手元にあるメールフォームを変更してみるかの。
おお、そうぢゃ!送信すれば管理人に届くぞい!(w


さて、一気に行ってしまおうかいの?

メール送信ボタンのところのみ、変更したいから。まずは、フォームメールのページのhtmlを表示させ、submitボタンのところを下のようにクラス分けしてくだされ。

<input class="submit" type="submit" value="送信">


そして、一気にスタイルシートぢゃ!

input, textarea {
background-color: lavender;
color: lightseagreen;
border-style: dotted;
border-color: blue;
border-width: 1px;
}

input.submit{
width: 10em;
border-style:solid;
border-color: red;
}
テキストエリアの指定と宣言
背景色
文字色
枠線のスタイル
枠線の色
枠線の太さ
{
送信ボタンの指定と宣言
(inputタグのクラス分け。クラス名submit)

送信ボタンの幅指定
枠線のスタイル
枠線の色
}

 


input, textarea のところぢゃが、クラス分けなら.(ドット)だが、ここは、(コンマ)ぢゃから気を付けてくだされ。


こうなったんぢゃが、スタイルシートの内容の意味は、一応書いておいたが、もうお分かりなんぢゃないかのぉ?
毎回、設定する項目が違うだけで、設定内容はほぼ同じぢゃからの。というより、同じことができるんぢゃが。(w


枠線は消すこともできるんぢゃ。
border-style: none; とすれば、なくなるぞい!
そして、背景色の変わりに、背景画像もOKぢゃ。指定プロバティはもう分かっておるちゃろ?background-image: url(画像名)ぢゃな。(^^)


にこにこ顔の助手
いつものように、今回もいろいろテストしてみて、素敵なフォームメールを作ってくださいね。



Back INDEX Next◆ ページトップ