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

ぴったりくっつけたい!-FORM編

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ぴったりくっつけたい!

HTMLを編集しているとよく感じる疑問の1つに、「なぜ、ぴったりくっつかないのか?」というものがあります。 例えば、画像と画像がくっつかなかったり、フォームと文字がくっつかなかったりといったものです。 前回は画像と画像をくっつける方法をご紹介致しました。

今回は、ボタンやプルダウンメニューなど、フォームのパーツ同士をぴったりくっつける方法や、フォームとその周囲をぴったりくっつける方法をご紹介致します。

なぜここに隙間ができる!?

フォームを表示させた際、次のような問題に遭遇したことはありませんか?

◆パターン1: ◆パターン2:
複数のボタンを横に並べた際にボタン間に隙間が空いてしまう例(画像) 枠の中にフォームを入れると下部に余計な空白ができてしまう例(画像)
▲ボタンとボタンの間を詰めたいのに、なぜか空いてしまう。 ▲フォームの下に余計な空白が表示されてしまって、見栄えが悪い。
◆パターン3:
文章中にフォームを入れると上下に余計な空白ができてしまう例(画像)
▲上下の行との隙間を詰めたいのに詰められない。または、1/2行くらいの空白にできたら良いのにと思う。

※上記のイメージは、Windows XP 上での Internet Explorer 6 での表示例です。(他のブラウザでは何もしなくても望み通りに見える場合もあります)

これらの隙間はなぜ空いてしまうのでしょうか? また、これらを詰めるには、どうすればよいでしょうか? 次のページから順にご紹介いたします。

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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