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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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


◆パターン1:
複数のボタンを横に並べた際にボタン間に隙間が空いてしまう例(画像)
▲ボタンとボタンの間を詰めたいのに、なぜか空いてしまう。

これは、前回の画像編でご紹介したのと同じ原因です。 ソース中に存在する「改行」の存在が問題なのです。以下に、詳しくご説明致します。

原因

HTMLソースは、見やすく書いた方が後から分かりやすいですよね。ですから、次のような感じで書いてしまいがちです。

<FORM>
   <INPUT TYPE="button" VALUE="あっち">★改行
   <INPUT TYPE="button" VALUE="こっち">★改行
   <INPUT TYPE="button" VALUE="そっち">★改行
</FORM>

しかし、この記述方法だと、ボタン間を詰めたい場合(隙間を無くしたい場合)に、望み通りにはなりません。

問題は、3つの<INPUT>タグの間に改行が入っている点です。
※改行だけでなく、半角スペース・タブが入っている場合も同様です。

理由

HTMLでは、「改行・タブ・(半角)スペース」の文字は無視されると考えていないでしょうか? それは、正しいようで誤っています。
実際には、HTMLでは「改行・タブ・(半角)スペース」の文字は、「いくつ連続していても1つのスペース」として解釈されます。

ですから、ソース中に改行があるとそれは「1つの半角スペース」として解釈されるわけです。 その結果、ボタンとボタンの間に半角スペース1つ分の空間ができてしまうわけですね。
それを防ぐには、タグとタグの間に改行を入れない(=改行しない)ようにすれば良いことになります。

解決法

というわけで、ソースは少々見えにくくなるかも知れませんが、次のように、タグ間の改行をなくして記述すれば解決します。

<FORM>
<INPUT TYPE="button" VALUE="あっち"><INPUT TYPE="button" VALUE="こっち"><INPUT TYPE="button" VALUE="そっち">
</FORM>

実際の表示

次のように表示されます。

それでは、原因2の解決策へ →

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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