https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

外側、部品の余白を指定する

{margin:値;}、{margin-位置:値;}でフォーム全体やフォームの部品の外側の余白を指定することができます。 ブロック要素である<form>~</form>の外側には 余分な余白が入ってしまいます。しかしmarginの値を0にすることで

余白を無くすことができます。

余白の指定方法は以下の通りです。(marginの方)

余白を入れたい位置 説明
margin:値;
padding:値;
値が1個の場合、上下左右 全ての余白が入ります。
margin:値1 値2;
padding:値1 値2;
値1が上下、値2が左右の余白です。
margin:値1 値2 値3;
padding:値1 値2 値3;
値1が上、値2が左右、値3が下の余白です。
margin:値1 値2 値3 値4;
padding:値1 値2 値3 値4;
値1が上、値2が右、値3が下、値4が左の余白です。
margin-top:値;
padding-top:値;
上の余白だけ指定します。
margin-right:値;
padding-right:値;
右の余白だけ指定します。
margin-left:値;
padding-left:値;
左の余白だけ指定します。
margin-bottom:値;
padding-bottom:値;
下の余白だけ指定します。

【ブラウザ表示】

上部まで50px

下部まで50px
ソース

上部まで50px
<form method="POST" class="outspace1" action="xxx.cgi">
<p>
<input type="text" name="text1" value="左から70pxの距離→">
<input type="submit" value="送信" class="outspace2">
</p>
</form>
下部まで50px

外部ファイル

form.outspace1{margin:50px 0px;}
input.outspace2{margin-left:70px;}


<body>~</body>に直接記入する場合

上部まで50px
<form method="POST" style="margin:50px 0px;" action="xxx.cgi">
<p>
<input type="text" name="text1" value="左から70pxの距離→">
<input type="submit" value="送信" style="margin-left:70px;">
</p>
</form>
下部まで50px

■ フォームの部品の内側の余白を指定する

{padding:値;}、{padding-位置:値;}でフォームの部品の内側の余白を指定することができます。 内側の余白の指定パターンは上の表を参照して下さい。(paddingの方)

【ブラウザ表示】


ソース

<form method="POST" action="xxx.cgi">
<p>
<input type="text" name="text1" value="テキストフィールド" class="inspace1">
<input type="submit" value="送信" class="inspace2">
</p>
</form>

外部ファイル

input.inspace1{
width:200px;
height:100px;
padding:50px;
}
input.inspace2{padding:50px;}


<body>~</body>に直接記入する場合

<form method="POST" action="xxx.cgi">
<p>
<input type="text" name="text1" value="テキストフィールド"
style="width:200px; height:100px; padding:50px;">
<input type="submit" value="送信" style="padding:50px;">
</p>
</form>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

ボタンや入力欄のサイズを変える
文字のサイズや色を変える
枠線の太さ、色、種類を指定する
背景色や画像を指定する
フォームを並べる
入力欄の入力モードを変更する
フォームの部品の色を変える

スタイルシート一覧のページに戻る