Home > P.392

P.392

  • Last Modified: 2008年12月 2日 00:01

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説

デフォルトでは味気ないフォームもちょっとしたことできれいに見せることや、使い勝手を高めたりすることができます。 CSS を使ってフォームの見た目を変更してみましょう。

XHTML

<form action="#" method="post">
  <fieldset>
  <legend>お問い合わせフォーム</legend>
    <dl>
      <dt><label for="name">お名前</label></dt>
        <dd><input type="text" id="name" name="your-name" size="40" tabindex="1" /></dd>
      <dt><label for="email">メールアドレス</label></dt>
        <dd><input type="text" id="email" name="your-email" size="40" tabindex="2" /></dd>
      <dt><label for="text">お問い合わせ内容</label></dt>
        <dd><textarea id="text" name="your-text" rows="5" cols="40" tabindex="3" >お問い合わせ内容を記入してください。</textarea></dd>
    </dl>
    <p><input type="submit" value="送信する" tabindex="4" /></p>
  </fieldset>
</form>

CSS

/* (1)デフォルトをリセット */
* {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

/* (2)フォームの幅と背景色およびボーダーを指定 */
form {
  padding: 1em;
  border: 10px solid #bbb;
  width: 32em;
  background-color: #f9f6f1;
}

/* (3)paddingを調整してセンタリング */
fieldset {
  border: none;
}

legend {
  margin-bottom: 1em;
  padding-left: 11em;
  font-weight: bold;
}

/* (4)フロートで横並び */
dt {
  float: left;
  width: 9em;
}

dd {
  margin-left: 9em;
  margin-bottom: 1em;
}

/* (5)入力欄をボーダーでスタイリング */
input#name,
input#email,
textarea {
  border: 1px solid #666;
  border-bottom-color: #ccc;
  border-right-color: #ccc;
  width: 20em;
}

p {
  text-align: center;
}

/* (6)ボタンをボーダーでスタイリング */
p input {
  padding: 0.2em;
  border: 3px double #666;
  border-top-color: #bbb;
  border-left-color: #bbb;
  background-color: #ededed;
  font-weight: bold;
}

/* (7)ボタンが押下されたときのスタイリング */
p input:active {
  border: 3px double #bbb;
  border-top-color: #666;
  border-left-color: #666;
}

/* (8)フォーカスされた入力欄をハイライト */
input:focus,
textarea:focus {
  background-color: #fffacd;
}

Download

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/152
Listed below are links to weblogs that reference
P.392 from lh3.jp

Home > P.392

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top