【簡単】CSSでdivを右寄せする方法 – 中央寄せや左寄せも解説
コードのこと
今回は、CSSを使ってdiv要素を簡単に右寄せする方法を解説します！
右寄せだけでなく、中央寄せや左寄せ、縦の真ん中寄せについても解説しますので、いろんなレイアウトに応用できるようになりますよ♪
CSSで要素を右寄せする方法
まずは、div要素を右寄せするための方法を順番に見ていきましょう。
marginを使った右寄せ
marginプロパティを使って右寄せすることができます。margin-left: auto; を使用することで、要素を右側に押しやることが可能です。
HTML
<div class="container">
<div class="box">右寄せのボックス</div>
</div>CSS
.container {
display: block; /* デフォルトのblockレイアウト */
}
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin-left: auto; /* 左側の余白を自動で調整して右寄せ */
}この方法は、実務で本当によく使います！
Flexboxを使った右寄せ
Flexboxを使って右寄せする方法をご紹介します。
HTML
<div class="container">
<div class="box">右寄せのボックス</div>
</div>CSS
.container {
display: flex;
justify-content: flex-end;
}
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}justify-content: flex-end; を使うことで、要素を右端に寄せることができます。
Gridレイアウトを使った右寄せ
Gridレイアウトを使って右寄せする方法をご紹介します。
HTML
<div class="container">
<div class="box">右寄せのボックス</div>
</div>CSS
.container {
display: grid;
justify-items: end;
}
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}justify-items: end; を使用することで、Grid内のアイテムを右端に配置することができます。
text-alignを使った右寄せ
text-alignプロパティを使って右寄せする方法もあります。この方法は、主にインライン要素やインラインブロック要素に有効です。
HTML
<div class="container">
<div class="box">右寄せのボックス</div>
</div>CSS
.container {
text-align: right;
}
.box {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightblue;
}text-align: right; を使うことで、要素が右側に配置されます。
floatを使った右寄せ
float: right; を使って右寄せする方法です。
HTML
<div class="container">
<div class="box">右寄せのボックス</div>
</div>CSS
.box {
float: right;
width: 200px;
height: 100px;
background-color: lightcoral;
}floatでスタイリングする時の注意点
floatを使う時は使い方にコツがあるので、普段floatを使っていない方は以下の記事を参考にしてみてください。
CSSで要素を左寄せする方法
続いて、div要素を左寄せする方法についても見ていきましょう。
marginを使った左寄せ
margin-right: auto; を使用して左寄せにします。
.box {
width: 200px;
height: 100px;
background-color: lightcoral;
margin-right: auto; /* 右側の余白を自動で調整して左寄せ */
}Flexboxを使った左寄せ
Flexboxを使って左寄せする方法です。justify-content: flex-start; を使うことで、要素を左側に配置します。
.container {
display: flex;
justify-content: flex-start;
}
.box {
width: 200px;
height: 100px;
background-color: lightcoral;
}Gridレイアウトを使った左寄せ
Gridレイアウトを使って左寄せする方法です。justify-items: start; を使うことで、要素を左端に配置します。
text-alignを使った左寄せ
text-alignプロパティを使って左寄せする方法です。text-align: left; を使うことで、要素が左側に配置されます。
.container {
text-align: left;
}
.box {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightcoral;
}floatを使った左寄せ
float: left; を使って左寄せする方法です。
.box {
float: left;
width: 200px;
height: 100px;
background-color: lightcoral;
}CSSで要素を中央寄せする方法
要素を中央寄せする方法について解説します。
marginを使った中央寄せ
margin: 0 auto; を使って、要素を中央に配置します。
.box {
width: 200px;
height: 100px;
background-color: lightgreen;
margin: 0 auto; /* 自動で左右の余白を均等にして中央寄せ */
}margin-topとmargin-bottomに影響を与えたくない時は、margin-left:autoとmargin-right:autoをつければOKです！
Flexboxを使った中央寄せ
justify-content: center; を使うことで、要素が中央に配置されます。
.container {
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 100px;
background-color: lightgreen;
}Gridレイアウトを使った中央寄せ
justify-items: center; を使うことで、要素を中央に配置します。
.container {
display: grid;
justify-items: center;
}
.box {
width: 200px;
height: 100px;
background-color: lightgreen;
}text-alignを使った中央寄せ
text-align: center; を使うことで、要素が中央に配置されます。
.container {
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightgreen;
}縦の真ん中寄せについて
要素を縦の真ん中に寄せる方法も見ていきましょう。
Flexboxを使った縦の真ん中寄せ
Flexboxを使うことで、要素を縦の真ん中に寄せることができます。align-items: center; を使うことで、要素を親要素の縦の中央に配置します。
.container {
display: flex;
align-items: center;
height: 200px; /* 親要素の高さを指定 */
}
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}Gridレイアウトを使った縦の真ん中寄せ
Gridレイアウトでも、要素を縦の真ん中に配置できます。align-items: center; を使うことで、要素が縦の中央に配置されます。
.container {
display: grid;
align-items: center;
height: 200px; /* 親要素の高さを指定 */
}
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}CSSでdivを右寄せ・左寄せ・中央寄せする方法まとめ
今回の記事では、CSSを使ってdivを右寄せする方法を順番に解説しました。ポイントは次の通りです。
margin-left: auto;を使って右寄せする方法- Flexboxを使って、
justify-content: flex-end;で右寄せする方法 - Gridレイアウトを使って、
justify-items: end;で右寄せする方法 text-align: right;でインライン要素やインラインブロック要素を右寄せする方法float: right;で右寄せする方法- 左寄せや中央寄せも同様に解説
- 縦の真ん中寄せは、FlexboxやGridを使って実現可能
どの方法も、状況に応じて使い分けることで、思い通りのレイアウトが簡単に実現できます。ぜひ、色々試してみてくださいね！
