三十四日目！（～フォームのスタイリング）

フォームのスタイリングの続きをやっていきます。

●ブログのコメント投稿フォームのリッチなスタイリング
テキストフィールドやボタン類であれば、背景画像を使ってデザインを忠実に再現できる。XHTMLの制作上注意しなければならない点は、お問い合わせフォームと同様。

XHTML


<h2><img src="comment.png" alt="Please Your Comments!" /></h2>
<p>この記事に関係の無い内容のコメントは削除させていただく場合があります。また、コメントに対するお返事は必ず行われるとは限りませんのでご了承ください。</p>
<form id="comments_form" method="post" action="comment.cgi">
   <fieldset>
     <legend>コメント投稿フォーム：</legend>
     <dl>
       <dt><label for="comment-author">お名前
       <span class="note">（必須） </span></label></dt>
       <dd><input type="text" id=comment-author" class="text" name="author"
       size="30" value="" tabindex="1" /></dd>
       <dt><label for="comment-email">E-mail
       <span class="note">（必須ですが、公開されません） </span></label></dt>
       <dd><input type="text" id="comment-email" class="text" name="email"
       size="30" value="" tabindex="2" /></dd>
     </dl>
　　・・・・中略・・・・
     <div class="submit">
       <input type="button" value="確認" name="preview" id="comment-preview"
       class="submit" tabindex="6" />
       <input type="submit" value="投稿" name="post" id="comment-post"
       class="submit" tabindex="7" />
     </div>
   </fieldset>
</form>


フォームパーツの線をなくし、代わりに背景画像を指定する方法でスタイリングする。ただし、この方法ではCSSオン・画像表示オフのときフォームパーツがどこにあるのかわからなくなってしまう。この問題を最小限にとどめるために、親要素の背景色との差が認識でき、文字色がきちんと判別できる背景色をあわせて指定しておくか、画像のデザイン自体は枠線を含まないものにし、CSSでボーダーを指定するという解決策もある。

CSS


legend {
  display: none;    /* マークアップ的に必要でも視覚的には不要となるので非表示に */
}


input.text {
  border: none;    /* テキストボックスの線を消す */
  color: #336581;
  background: transparent url(textbox.png> no-repeat left top; /* テキストボックス用の背景画像を                     指定 */
}


textarea {
  border: none;    /* テキストエリアの線を消す */
  background: transparent url(textarea.png) no-repeat left top; /* テキストエリア用の背景画像を指定 */
}


input.submit {
  padding: 4px 8px 0 8px;
  height: 19px;
  color: #fff;
  background: transparent url(button.png) no-repeat left top;  /* 送信ボタン用の背景画像を指定 */
}

きりがいいので今日はここまで。