HTMLで要素を横並びにする方法【現役エンジニアが解説】
今回は、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要素を親要素から全て横並びに表示させています。