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

HTMLで2つのdiv要素を横並びに配置する方法【floatの使い方を解説】

CSSのプロパティを使えば、HTML内の2つの<div>要素を簡単に横並びに配置できます。その代表的な方法が、CSSのfloatプロパティを使う手法です。

floatを使って要素を左右に回り込ませることで、複数のdivを同じ行に並べることが可能になります。さらに、height: 100px;で高さを指定し、marginで要素間の余白を調整すると、見た目も整ったレイアウトになります。

実装例

以下のコードを実行すると、2つの<div>が横並びに表示されます。ぜひ実際に試してみてください。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML div</title>
   </head>
   <body>
      <div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
         First DIV
      </div>
      <div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
         Second DIV
      </div>
   </body>
</html>

コードのポイント

  • float: left; — 各divを左に浮かせることで、次の要素が右側に回り込み、横並びになります。
  • width / height — 要素のサイズを明示的に指定することで、意図した通りのレイアウトを実現します。
  • margin — div同士の間隔を確保し、要素がくっついて見えるのを防ぎます。

補足：Flexboxという現代的な選択肢

floatは手軽な方法ですが、近年ではFlexbox（フレックスボックス）を使うのが主流になっています。親要素にdisplay: flex;を指定するだけで、子要素を簡単に横並びにでき、float特有の回り込み解除（clearfix）も不要になるため、メンテナンス性の高いレイアウトを構築できます。

  1. HTML DOMのflexGrowプロパティとは？構文と使い方をサンプルコード付きで解説

    flexGrowプロパティとは？HTML DOMのflexGrowプロパティは、フレックスコンテナの中で各要素（フレックスアイテム）が余ったスペースをどの割合で受け取って伸びるかを設定するためのプロパティです。値には単位を付けない数値を指定します。構文flexGrowプロパティをJavaScriptから設定する場合は、次のような構文を使用します。object.style.flexGrow = number|initial|inheritそれぞれの値の意味は以下のとおりです。number … 他の要素と比べて、その要素がどれだけ伸びるかを示す数値。デフォルト値は0です。initial … プロパ

  2. HTML DOMスタイルのflexFlowプロパティの使い方を徹底解説

    HTML DOMのスタイルにおけるflexFlowプロパティは、要素のflexDirection（フレックスアイテムの方向）とflexWrap（折り返しの可否）をまとめて指定するためのプロパティです。これら2つのプロパティに対するショートハンド（一括指定）として機能し、記述した順序に従って値が適用されます。flexFlowプロパティの構文flexFlowプロパティを設定する際の基本的な構文は以下の通りです。object.style.flexFlow = flex-direction flex-wrap|initial|inherit;指定できる値の一覧flexFlowプロパティに設定できる各値