ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

ぴったりくっつけたい!-FORM編(4ページ目)

「なぜ隙間ができるんだ!?」「どうしてくっつかないんだ!?」という疑問を解決。フォーム(ボタンや入力フォームなど)と周囲をぴったりくっつける方法を、原因・理由と共にご紹介!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

パターン3の原因と解決策

※備考※
この記事は2002年5月に書かれたものです。ここでは解決策としてHTMLソースの記述を工夫する方法をご紹介しています。 しかし、デザインに関する問題なので、現在ではスタイルシートを使って解決する方が望ましいでしょう。下記の解決策は「そういう手もあった」という程度の参考にして下さい。

◆パターン3:
文章中にフォームを入れると上下に余計な空白ができてしまう例(画像)
▲上下の行との隙間を詰めたいのに詰められない。または、1/2行くらいの空白にできたら良いのにと思う。

解決策は2つあります。パターン2の解決策を利用する方法と、スタイルシートを活用する方法です。

原因と理由

この原因は、パターン2の場合と全く同じです。
ブラウザが自動的に<FORM>タグの前後に空白行を挿入するために、上記のような空白が空いてしまうのです。 つまり、「空いてしまう」のではなく「(ブラウザが)空けている」のですね。

ちなみに、HTMLソースは次の通りです。

…(省略)…ボタンを1度だけクリックして下さい。
<FORM>
   <INPUT TYPE="text" SIZE="30" NAME="email">
   <INPUT TYPE="submit" VALUE="送信">
</FORM>
また、登録を解除されたい方々は…(以下略)…

フォームの中身は例であって、何でも構いません。何を入れた場合でも同様の現象になります。

解決法

解決策には2通りあります。
  • パターン2と同じように、TABLEを使う方法。枠線の太さを0にしたダミーの枠を作成して、そこにフォームを記述します。
  • スタイルシートを使ってFORM要素の上下のマージンを0にします。
後者の方法なら、フォーム上下の空白(マージン)量の調節が可能ですので、『1/2行分だけ空白を空けたい』という要求も実現可能です。 しかし、スタイルシートが無効になっている場合や解釈できないブラウザでアクセスされた場合には、望み通りの表示にはなりません。

以下に、両方のHTMLソースを掲載しますので、どちらでも都合の良い方を使って下さい。

前者の方法:
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><FORM><TD>
   <INPUT TYPE="text" SIZE="30" NAME="email">    <INPUT TYPE="submit" VALUE="送信"> </TD></FORM></TR>
</TABLE>
後者の方法:
<FORM STYLE="margin: 0px;">
   <INPUT TYPE="text" SIZE="30" NAME="email">
   <INPUT TYPE="submit" VALUE="送信">
</FORM>

なお、後者の記述方法を使って、上下の空白量を調整したい場合(例えば、1/2行分の空白を空けたいなど)は、 スタイル定義部分(上記の赤色の部分)を次のように記述します。

STYLE="margin: 5px 0px;"

上記の場合は、上下に 5px の空白を空ける場合の例です。「5px」の右側にある「0px」とは、左右の空白量の指定です。

実際の表示

次のように表示されます。(前者の例)

…(省略)…下記の入力フォームにメールアドレスを入力して「送信」ボタンを1度だけクリックして下さい。
また、登録を解除されたい方々は、下記の入力フォームにご登録済みの(以下略)

というわけで、今回は、ボタンやプルダウンメニューなど、フォームのパーツ同士をぴったりくっつける方法や、フォームとその周囲をぴったりくっつける方法をご紹介致しました。
ぜひ、活用してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます