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

HTMLで3つのdiv要素を横並びに配置する方法

CSSのプロパティを使えば、HTML内の3つの<div>を簡単に横並びに配置できます。その鍵となるのが、CSSのfloatプロパティです。

各<div>にfloat: left;を指定すると、要素が左から順番に回り込んで並びます。さらに、高さ（height）を100pxに設定し、marginで余白を調整することで、見た目のバランスの良いレイアウトになります。HTMLで3つのdiv要素を横並びに配置する方法

サンプルコード

以下のコードを実行すると、3つの<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>
      <div style="width: 100px; float:left; height:100px; background:red; margin:10px">
         Third DIV
      </div>
   </body>
</html>

補足：float以外の方法

floatは従来から使われている手法ですが、近年ではFlexboxを使う方法もおすすめです。親要素にdisplay: flex;を指定するだけで、子要素を自動的に横並びにでき、余白や配置の制御もより柔軟に行えます。

<div style="display:flex">
  <div style="width:100px; height:100px; background:gray; margin:10px">First DIV</div>
  <div style="width:100px; height:100px; background:yellow; margin:10px">Second DIV</div>
  <div style="width:100px; height:100px; background:red; margin:10px">Third DIV</div>
</div>

floatを使用した場合は、後続の要素への影響を避けるためにclearプロパティなどで回り込みを解除する必要がある点にも注意しましょう。

  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プロパティに設定できる各値