CSSで要素を右寄せさせたい
デフォルトではテキストなどのがコンテンツが左寄せになるHTML。CSSを使って要素を右寄せにする方法を知っていますか？
このように、右寄せしてページコンテンツにメリハリをつけて見やすくしたいけどやり方が分からないという方がいるでしょう。
そんな右寄せを実現する方法はいくつかあり、それぞれどのように右寄せされるのかといった仕様が異なります。
CSSで要素を右寄せさせる方法
先ほども言ったように、CSSで要素右寄せする方法はいくつかあります。
要素によっては上手く右寄せできない方法や後処理が必要な方法もあるので順番に解説していきます。
要素内のコンテンツを右寄せしたい場合
特定の要素内のコンテンツだけ右寄せしたいということがあるでしょう。
そういう場合はtext-alignプロパティにrightを設定します。
<style>
.box{
width:300px;
border:4px solid #ccf;
text-align:right;
}
</style>
<div class="box">
こんにちわ、世界！
</div>text-alignプロパティはテキストだけに影響するものではなく、その要素内のすべての要素(画像などのリソースも含む)に影響します。そのため、要素内のコンテンツを左寄せ・中央寄せ・右寄せしたいだけであればtext-alignプロパティの汎用性が優れています。
子要素にもtext-alignプロパティは継承されるので、一部の子要素は中央揃えにしたい、左揃えにしたい場合は別途div子要素などに「text-align:center」や「text-align:left」を与えて変更するようにしてください。
<style>
.box{
width:600px;
border:4px solid #ccf;
text-align:right;
}
.child{
width:300px;
text-align:left;
border:4px solid #cfc;
}
</style>
<div class="box">
こんにちわ、世界！
<div class="child">
子要素コンテンツ
</div>
</div>
このように子要素側で上書きすることで、右寄せ設定が上書きされて寄せる方法を再設定できます。
ちなみに、text-alignプロパティで右寄せできるのはblock要素かinline-block要素限定ですので注意してください。
要素をまるごと右寄せする
要素内のコンテンツを右寄せにするのではなく、要素をまるごと右揃えにする場合はmarginプロパティを使用します。
marginプロパティは要素の周りの余白を指定するプロパティですが、設定値としてautoを与えることで余白を自動で計算してくれます。
例えば「margin:0 0 0 auto」にすると、左側以外の余白が0pxと決めた上で左側の余白を自動計算してくれるので、結果的に右寄せが実現できるということです。
<style>
.box{
width:500px;
border:4px solid #ccf;
}
.child{
padding:1em;
width:300px;
margin:0 0 0 auto;
border:4px solid #cfc;
}
</style>
<div class="box">
こんにちわ、世界！
<div class="child">
子要素コンテンツ
</div>
</div>実際にmarginプロパティを使って右寄せした結果が上記のサンプルコードです。
ちなみにこの方法を応用すると中央寄せも実現できます。
<style>
.box{
width:500px;
border:4px solid #ccf;
}
.child{
padding:1em;
width:300px;
margin:auto;
border:4px solid #cfc;
}
</style>
<div class="box">
こんにちわ、世界！
<div class="child">
子要素コンテンツ
</div>
</div>要素をまるごと右寄せ・中央寄せする際の必須テクニックであり、要素の高さもheightプロパティで定義しておけば上寄せや下寄せも実現できます。
右に回り込みさせる
特定の要素を右に寄せて、その左に別の要素を起きたい場合があるでしょう。いわゆる回り込みの処理ですが、これはfloatプロパティを使用します。
<style>
.box{
width:500px;
border:4px solid #ccf;
clear:both;
}
.child{
width:300px;
float:right;
border:2px solid #faa;
box-sizing:border-box
}
</style>
<div class="box">
こんにちわ、世界！
<div class="child">
子要素コンテンツ
</div>
</div>
<p>
サンプルコンテンツ
</p>
floatプロパティを使うことで回り込みの処理を行うことができ、特定の要素を右に回り込ませることが可能です。
floatプロパティを使用する際の注意点
float プロパティの設定は、次の要素以降にも引き継がれます。
つまり、一度「float:right」で右寄せ設定してまうと、それ以降の要素が全て右寄せかつ回り込む設定が有効になってしまい、レイアウトが大きく崩れてしまいます。
floatプロパティで位置調整した後は、floatプロパティを使用している要素の親要素、もしくは次の要素に「clear:both」をCSS設定として与えておいてください。
clear:both;
「clear:both」とはfloatプロパティによる回り込み設定をリセットする意味を持っています。最低限回り込み設定のリセット方法さえ知っておけば問題ありません。
また、positionプロパティで要素の配置方法をカスタマイズしていた場合もレイアウトが崩れやすいので、そちらについても注意が必要です。
またfloatを使った際によくセットでfloat解除で利用されるclearfixについてはぜひ下記の記事を参考にしてみて下さい。
