ボックス内で左寄せや右寄せをする5つの方法

CSSによって、要素を左右に並べる方法について考えます。並べたときの幅まで考慮する方法については、多段レイアウトで解説します。

パターン1

<div>
    左
    <span style="float: right">右</span>
</div>
<div style="clear: right">後続する要素</div>
  • 右寄せする要素にのみ、float:rightを適用する。
  • 後続する要素がfloatの影響を受けないように、clearを指定する。
左 右
後続する要素

パターン2

<div>
    <div style="float: left">左</div>
    <div style="text-align: right">右</div>
</div>
<div>後続する要素</div>
  • 左寄せする要素に、float:leftを適用する。
  • 右寄せは、text-align:rightで行う。
左
右
後続する要素

パターン3

<div style="text-align: right">
    <div style="float: left">左</div>
    <div>右</div>
</div>
<div>後続する要素</div>
  • 左寄せする要素に、float:leftを適用する。
  • 右寄せは、親要素にtext-align:rightを指定する。内包されるすべての子要素が右寄せされる。
左
右
後続する要素

パターン4

<div style="text-align: right">
    <div style="float: left">左</div>
    右
</div>
<div style="clear: left">後続する要素</div>
  • 左寄せする要素に、float:leftを適用する。
  • 右寄せは、親要素にtext-align:rightを指定する。内包されるすべての子要素が右寄せされる。
  • 後続する要素がfloatの影響を受けないように、clearを指定する。
左
右
後続する要素

パターン5

<div style="position: relative">
    左
    <span style="position: absolute; right: 0">右</span>
</div>
<div>後続する要素</div>
  • 右寄せする要素を、親要素を基準にright:0の絶対位置に配置する。
左 右
後続する要素

参考

関連ページ

HTMLの情報サイトから、まとめて検索