【CSS】div,p,h1,ul,liなどブロック要素を右寄せする方法

divやp、h1またはdisplay:blockなどブロック要素は通常横幅いっぱいになります。

widthを指定することで横幅を小さくすることはできますが、その場合左に寄ります。

「divを右寄せしたいんだけど!?」

div,p,h1,ul,liなどブロック要素を右寄せする方法を解説します。

【方法1】自身にmargin-left:auto

ブロック要素を右寄せするにはその要素自身に「margin-left:auto」を指定しましょう。

<style>
.example{
    /*コレ*/margin-left: auto;
    width: 50%;
    border: 1px solid #333;
    background: #b8c9f7;
}
</style>
<div class="example">div</div>

margin-leftは要素の外の左の余白を調整するCSSです。

この値を「auto」にすると最大値になります。

margin-leftが最大になることで要素が右に押されて右寄せになるというわけです。

【方法2】親にdisplay:flexとjustify-content:flex-end

右寄せするには親に「display:flex」と「justify-content:flex-end」を指定しましょう。

<style>
.example2{
    /*コレ*/display: flex;
    /*コレ*/justify-content: flex-end;
}
.example2>div{
    width: 50%;
    border: 1px solid #333;
    background: #b8c9f7;
}
</style>
<div class="example2"><div>div</div></div>

justify-contentは「display:flex」とセットで使い、横の位置を調整するCSSです。

値をflex-endにすると右寄せになります。

この方法は要素がブロックでもインラインでも右寄せできます。

【ブロック要素の中のテキストを右寄せ】text-align:right

ブロック要素の中のテキストを右寄せしたい場合はその要素にtext-align:rightを指定します。

<style>
.example3{
    /*コレ*/text-align: right;
    border: 1px solid #333;
    background: #b8c9f7;
}
</style>
<div class="example3">divの中のテキスト</div>

【まとめ】ブロック要素を右寄せする方法

【方法1】自身に「margin-left:auto」を指定

【方法2】親に「display:flex」と「justify-content:flex-end」を指定

以上、div,p,h1などブロック要素を右寄せする方法でした。