【CSS】divを横並びにしつつ右寄せする方法4選

「divとかを横並べにする方法はわかったけど左寄せじゃなくて右寄せにしたい！」

divを横並びにしつつ右寄せする方法を4つ紹介します。

【方法1】display:flexとjustify-content:flex-end

親要素にdisplay:flexとjustify-content:flex-endを指定すると横並びしつつ右寄せできます。

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/justify-content: flex-end;
    border: 1px solid #333;
    padding: 5px;
    background: #dff0ff;
}
.example>div{
    border: 1px solid #333;
    padding: 5px;
    background: #ffffff;
    margin: 5px;
}
</style>
<div class="example">
    <div>1つめ</div>
    <div>2つめ</div>
</div>

display:flexは子要素の位置調整をするCSSです。これを使うとカンタンに横並べができます。

justify-contentはflexの子要素の横方向の位置調整をするCSSです。

「justify-content:flex-end」を指定すると右寄せになります。

【方法2】float:right

float:rightを指定すると横並びしつつ右寄せできます。

<style>
.example2{
    overflow: hidden;
    border: 1px solid #333;
    padding: 5px;
    background: #dff0ff;
}
.example2>div{
    /*コレ*/float: right;
    border: 1px solid #333;
    padding: 5px;
    background: #ffffff;
    margin: 5px;
}
</style>
<div class="example2">
    <div>1つめ</div>
    <div>2つめ</div>
</div>

floatは要素を横並べするCSSです。

よく使うのはfloat:leftですが、float:rightにすると右に寄せることができます。

ただし、順番が逆になるので注意です。

また、floatは崩れやすいためdisplay:flexの方法がおすすめです。

【方法3】display:inline-blockと親にtext-align:right

display:inline-blockと親にtext-align:rightを指定すると横並びしつつ右寄せできます。

<style>
.example3{
    /*コレ*/text-align: right;
    border: 1px solid #333;
    padding: 5px;
    background: #dff0ff;
}
.example3>div{
    /*コレ*/display: inline-block;
    border: 1px solid #333;
    padding: 5px;
    background: #ffffff;
    margin: 5px;
}
</style>
<div class="example3">
    <div>1つめ</div>
    <div>2つめ</div>
</div>

inline-blockはブロック要素とインライン要素を合わせ持った要素です。

inline-blockならCSSを効かせつつ横並びできます。

ただし、左右に少し空白ができる特徴があるため、ピッタリそろえたいときは不向きです。

【方法4】tableにmargin-left:auto

tableにmargin-left:autoを指定すると横並びしつつ右寄せできます。

<style>
.example4{
    border: 1px solid #333;
    padding: 5px;
    background: #dff0ff;
}
.example4>table{
    /*コレ*/margin-left: auto;
}
</style>
<div class="example4">
    <table border="1">
        <tr>
            <td>1つめ</td>
            <td>2つめ</td>
        </tr>
    </table>
</div>

margin-left:autoはブロック要素やtableを右寄せすることができます。

tableはhtmlだけでカンタンに横並べできます。

ただしtableは表（ひょう）として使うべきもので、レイアウト目的で使うのはふさわしくありません。

【まとめ】divを横並びにしつつ右寄せする方法

【方法1】display:flexとjustify-content:flex-end

→オススメの方法です。

【方法2】float:right

→逆順になります。崩れやすいです。

【方法3】display:inline-blockと親にtext-align:right

→左右に空白ができます。

【方法4】tableにmargin-left:auto

→レイアウト目的で使ってはいけません。

以上、divを横並びにしつつ右寄せする方法でした。