HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLとCSSでテキスト入力欄とセレクトボックスの幅を揃える方法

box-sizingプロパティとは

CSSで要素のwidth（幅）やheight（高さ）を指定しても、実際に表示されるサイズが指定した値より大きくなってしまうことがあります。これは、デフォルトではpadding（内側の余白）とborder（境界線）が要素のwidth・heightに外側に加算されて計算されるためです。

この問題を解決するのが「box-sizing」プロパティです。このプロパティを設定すると、paddingとborderがwidth・heightの内側に含まれて計算されるため、指定したサイズどおりに要素を表示できます。書式は次のとおりです。

box-sizing: border-box;

なお、古いブラウザに対応させる場合は、ベンダープレフィックス付きの「-moz-box-sizing」（Firefox用）や「-webkit-box-sizing」（旧WebKit系ブラウザ用）も併せて記述しておくと安心です。

実装例：テキスト入力欄とセレクトボックスの幅を揃える

以下のコードでは、<input>要素と<select>要素に同じwidthとheightを指定し、box-sizing: border-box;を適用することで、両者を完全に同じ幅・高さに揃えています。

<!DOCTYPE html>
<html>
<head>
  <style>
    input, select {
      width: 250px;
      border: 2px solid #000;
      padding: 0;
      margin: 0;
      height: 22px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    input {
      text-indent: 3px;
    }
  </style>
</head>
<body>
  <input type="text" value="Name of Candidate"><br>
  <select>
    <option>Select Choice</option>
    <option>Student</option>
    <option>Teachers</option>
    <option>Head</option>
  </select>
</body>
</html>

コードのポイント

  • 共通スタイルの一括指定： input, select { ... }のようにセレクタをカンマで区切ることで、両方の要素に同じスタイルをまとめて適用しています。
  • box-sizing: border-box： borderの2px分がwidth（250px）の中に含まれるため、inputとselectの見た目上のサイズが完全に一致します。
  • text-indent: 3px： input要素内のテキスト位置を微調整し、select要素の表示位置との視覚的なズレを抑えています。

このようにbox-sizing: border-box;を活用すれば、フォーム部品同士のサイズのズレを簡単に解消でき、整列された美しいフォームを作成できます。

  1. HTMLとCSSを使って画像の上にテキストを配置する方法

    Webページ制作では、バナーやヒーローセクション、写真のキャプションなど、画像の上にテキストを重ねて表示したい場面がよくあります。HTMLとCSSを使えば、画像の四隅や中央など、好きな位置にテキストを自由に配置できます。ポイントは、画像を包むコンテナ要素に position: relative を指定し、テキスト要素に position: absolute を指定することです。絶対配置されたテキストは、コンテナを基準として任意の位置に置くことができます。サンプルコード以下は、HTMLとCSSを使用して画像の上にテキストを配置するコード例です。<!DOCTYPE html> <

  2. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動