HTMLで要素を横並びにする方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLで要素を横並びにする方法について、displayとfloat、flexを使う方法に分け、簡単に解説していきます。

displayで横並びにする方法

スタイルのdisplayプロパティの値をinline-blockにした要素は横並びにできます。

div要素やp要素はブロック要素のため、インライン要素に変えることで横並びにすることが可能です。

<div style="display:inline-block;">A</div>
<div style="display:inline-block;">B</div>
<div style="display:inline-block;">C</div>

上記のコードでは、AとB、Cのそれぞれの文字を含むdiv要素を全てインライン要素にし横並びで表示させています。

floatで横並びにする方法

スタイルのfloatプロパティの値をleftやrightにすると左右に配置できます。

ただし、続く要素がある場合には回り込みを防ぐため、clearプロパティの値をbothに設定します。

<div style="float:left;width:50%;margin:0;padding:0;">A</div>
<div style="float:right;width:50%;margin:0;padding:0;">B</div>
<div style="clear:both;width:100%;margin:0;padding:0;">幅100%</div>

上記のコードでは、AとBのそれぞれの文字を含むdiv要素を左右に並べ、続く要素はその下に表示させています。

flexで横並びにする方法

スタイルのdisplayプロパティの値をflexにしても横並びになります。

flexの場合は、横並びにする要素の親要素のdisplayプロパティの値をflexにします。

<div style="display:flex;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

上記のコードでは、AとB、Cのそれぞれ文字を含むdiv要素を親要素から全て横並びに表示させています。