ホームへ

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

2022年04月13日

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

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

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

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

1つめ
2つめ
<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」を指定すると右寄せになります。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【方法2】float:right

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

1つめ
2つめ
<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を指定すると横並びしつつ右寄せできます。

1つめ
2つめ
<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を指定すると横並びしつつ右寄せできます。

1つめ 2つめ
<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を横並びにしつつ右寄せする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ