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

HTMLで2つのdivを横並びに配置する方法｜CSSのfloatプロパティの使い方を解説

HTMLで2つの

要素を水平方向（横並び）に配置したい場合、CSSのfloatプロパティにleftの値を指定するのが定番の方法です。

floatは本来、画像に対してテキストを回り込ませるためのプロパティですが、ブロック要素であるdivを左寄せで浮かせることで、複数のdivを同じ行に並べることができます。

floatを使った横並び配置のコード例

以下のコードでは、親要素（.demo）の中にある2つの子divにfloat: left;を適用し、横並びに表示しています。clear: none;を指定することで、回り込みが解除されずに並びが維持されます。

<!DOCTYPE html>
<html>
<head>
<style>
.demo div {
    float: left;
    clear: none;
}
</style>
</head>
<body>
<div class="demo">
    <div>
        <span>div1</span>
        <select size="5">
            <option value="c1">India</option>
            <option value="c2">US</option>
            <option value="c3">UK</option>
            <option value="c4">Australia</option>
        </select>
    </div>
    <div>
        <span>div2</span>
        <select size="5">
            <option value="r1">1</option>
            <option value="r2">2</option>
            <option value="r3">3</option>
            <option value="r4">4</option>
        </select>
    </div>
</div>
</body>
</html>

実行結果のポイント

  • 各divにfloat: left;が適用されるため、div1とdiv2が左から順に横並びになります。
  • select要素などのコンテンツも、それぞれのdiv内にそのまま収まります。

補足：モダンな代替手段としてのFlexbox

floatは手軽な方法ですが、レイアウト崩れやクリアフィックス（clearfix）の管理が必要になることがあります。近年では、より柔軟で直感的なFlexboxを使うのが一般的です。

.demo {
    display: flex;
}

親要素にdisplay: flex;を指定するだけで、子要素のdivが自動的に横並びになります。余白調整（gap）や中央揃えも簡単に行えるため、新規のプロジェクトではFlexboxの採用をおすすめします。

  1. HTML `<option>` 要素の disabled 属性

    <option> 要素の disabled 属性は、選択肢のリストから特定のオプションを無効化するために使用します。無効化されたオプションはクリックできなくなり、ユーザーは選択できなくなります。 構文 基本的な構文は以下の通りです。 <option disabled> 値を持たせる場合は以下のように記述します。 <option value=value disabled>表示テキスト</option> 使用例 以下は、<optgroup> でグループ分けされたセレクトボックス内で、特定のオプションを無効化する例です。 <!DO

  2. HTMLのtextarea disabled（無効）属性の使い方

    <textarea>要素のdisabled（無効）属性は、テキストエリアを操作できない状態にするために使用します。この属性を指定すると、ユーザーは<textarea>内のテキストを編集することはもちろん、テキストを選択することすらできなくなります。 構文 disabled属性の基本的な構文は以下のとおりです。 <textarea disabled> 使用例 それでは、<textarea>要素のdisabled属性を実装した具体例を見ていきましょう。以下のコードでは、学生情報フォームの中で「Info」欄のテキストエリアを無効化しています。 <