Webシステム用管理者画面作成マニュアル　デザイン/HTML/CSS/JavaScript集

こちらでは、フォームに対してCSSを適用した装飾例をご紹介します。フォームの部品とそれに適用したCSSを書きます。一部分だけのご利用や、適用すると他のフォーム部品ではどうなるのかなど、ご参考にしていただけたらと思います。
また、フォームの部品を、「デザイン>ベーステーブル」をベースに、装飾をいたします。同じスタイルで、色を変えたものを5種に分けけて装飾例を作成します。（後日アップロード）

(1)基本となる、<form>について

まずは、<form>のmarginとpaddingの設定をします。これは<form>の基本となりますので、調整する場合は必ずCSSを適用させましょう。 <form>タグを入れると、そのタグ前後に妙に広いスペースが残るのをどうにかした、もっとスペースを空けたいなど、全体的に調整する方法と、id・classなどを利用し部分的に調整する方法があります。最初にこれを設定しておきましょう。

<form>にCSSを適用しない場合	あいうえおあいうえお		※このフォームは例用にCSSを適用して、デフォルト状態のmargin、paddingにしてあります（大体ですが）。デフォルト状態の参考にしてください。
<form>全体に適用	あいうえおあいうえお	<form> <input type="text"> </form>	form{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
一部の<form>に適用[1]	あいうえおあいうえお	<form class="css_ex_form" > <input type="text"> </form>	form .css_ex_form{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
一部の<form>に適用[2] ※idで適用しておくと、フォームの各部品へのCSSの適用が楽チンですよ。	あいうえおあいうえお	<div id="css_ex_form_id"> <form> <input type="text"> </form> </div>	#css_ex_form_id form{ margin: 15px 0px 15px 0px; padding: 0px 0px 0px 0px; }

フォーム装飾例 ｜基本となる<form>｜

(1)基本となる、<form>について

フォーム装飾例　｜基本となる<form>｜