このチュートリアルはどのように良い形でのみラベルとHTMLのテーブル構造をシミュレートするためのタグを入力きれいなCSSのデザインを使用して設計する方法について説明します。 お使いのWebプロジェクトのためのカスタムフォームを設計すること、すべてのCSS / HTML要素を使用することができます：

ステップ1 ：基本的なHTML構造を作成します。

  <form> 
  > <div クラス = "box" > 
  <h1>お問い合わせフォーム： < / h1 > 
  <label> 
  <span>フル名< / span > 
  class = "input_text" name = "name" id = "name" / > = "text" クラス = "input_text" 名 = "name" <inputタイプ= "name" /番号> 
  < /ラベル> 
  <label> 
  <span>メール< / span >の 
  class = "input_text" name = "email" id = "email" / > = "text" クラス = "input_text" 名 = "email" <inputタイプ= "email" /番号> 
  < /ラベル> 
  <label> 
  <span>題目< / span >の 
  class = "input_text" name = "subject" id = "subject" / > = "text" クラス = "input_text" 名 = "subject" <inputタイプ= "subject" /番号> 
  < /ラベル> 
  <label> 
  <span>メッセージ< / span >の 
  name = "feedback" id = "feedback" > </textarea> <textarea クラス = "message" 名 = "feedback" = "feedback" > < /テキスト>番号 
  class = "button" value = "Submit Form"  / > = "button" クラス = "button" 値 <inputタイプ= "Submit Form" / > 
  < /ラベル> 
 
 
  < /部> 
  < /フォーム> 

ステップ： 2 CSSコードを作成する

  ; padding : 0 ; } * （マージン： 0 ;パディング： 0 ; ） 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; }体（フォント： 100 ％ 、 通常の MSゴシック、ヘルベチカ、 サンセリフ系 ; 背景 ： ＃ 161712 ; ） 
  ; padding : 0 ; color : #ffffff ; }フォーム、入力、テキスト（マージン： 0 ;パディング： 0 ; 色 ： ＃ ffffffを ; ）を選択してください 

 部ボックス （ 
  ;マージン： 0 自動 ; 
 幅： 500px ; 
  ; 背景 ： ＃ 222222 ; 
 位置：相対 ; 
 先頭： 50px ; 
  # 262626 ;国境： 1px 固体 ＃ 262626 ; 
  ） 

 部ボックス h1 （  
  ; 色 ： ＃ ffffffを ; 
 文字サイズ： 18px ; 
 テキスト変換：大文字 ; 
  5px 5px ;パディング： 5px 0 5px 5px ; 
  # 161712 ;下部ボーダー： 1px 固体 ＃ 161712 ; 
  # 161712 ;国境トップ： 1px 固体 ＃ 161712 ;  
  ） 

 部ボックスラベル（ 
 幅： 100 ％ ; 
  ; 表示 ： ブロック ; 
  ; 背景 ： ＃ 1C1C1C ; 
  # 262626 ;国境トップ： 1px 固体 ＃ 262626 ; 
  # 161712 ;下部ボーダー： 1px 固体 ＃ 161712 ; 
  10px 0 ;パディング： 10px 0 10px 0 ; 
  ） 

 部ボックスラベルスパン（ 
  ; 表示 ： ブロック ; 
  ; 色 ： ＃ bbbbbb ; 
 フォントサイズ： 12px ; 
 フロート：左 ; 
 幅： 100px ; 
 テキストの配置：右 ; 
  0 0 ;パディング： 5px 20px 0 0 ; 
  ） 

 部ボックス。 input_text （ 
  ;パディング： 10px 10px ; 
 幅： 200px ; 
  ; 背景 ： ＃ 262626 ; 
  double # 171717 ; ボーダー下 ： ダブル 1px ＃ 171717 ; 
  double # 171717 ; 国境トップ ： ダブル 1px ＃ 171717 ; 
  # 333333 ;国境左： ダブル 1px ＃ 333333 ; 
  # 333333 ;国境右： ダブル 1px ＃ 333333 ; 
  ） 

 部ボックスにメッセージを （ 
  ;パディング： 7px 7px ; 
 幅： 350px ; 
  ; 背景 ： ＃ 262626 ; 
  double # 171717 ; ボーダー下 ： ダブル 1px ＃ 171717 ; 
  double # 171717 ; 国境トップ ： ダブル 1px ＃ 171717 ; 
  # 333333 ;国境左： ダブル 1px ＃ 333333 ; 
  # 333333 ;国境右： ダブル 1px ＃ 333333 ; 
 オーバーフロー：隠し ; 
 高さ： 150px ; 
  ） 

 部ボックスボタン 
  （ 
  10px 0 ;マージン： 0 0 10px 0 ; 
  ;パディング： 4px 7px ; 
  ; 背景 ： ＃ CC0000 ; 
 国境： 0px ; 
  ; 位置 ： 相対 ; 
 先頭： 10px ; 
 左： 382px ; 
 幅： 100px ; 
  double # 660000 ; ボーダー下 ： ダブル 1px ＃ 660000 ; 
  double # 660000 ; 国境トップ ： ダブル 1px ＃ 660000 ; 
  #FF0033 ;国境左： ダブル 1px ＃ FF0033 ; 
  #FF0033 ;国境右： ダブル 1px ＃ FF0033 ; 
  ） 

最後に行われています。 テーブルを作成している我々は良いことなく探しています。 表示例

報告Filed under ： CSSを 、 管理者によるチュートリアル