テキストやボタンを右寄せにする方法（6パターン）
はじめに
コーディング作業をしていてテキストやボタンを右端に配置したいというケースがよくあります。
テキストやボタンを右寄せにする方法はいくつかありますが、結局どの方法が良いのか悩んだので思いつく方法すべて一度洗い出してみると、私が知る限りで6パターンありました。
仕上がりイメージ
テキスト
ボタン6パターンありますが、先に結論を言いますと上の3つの中からお好きな物を選んだら良いと思います（下の2つはオマケみたいなものです）。
目次
親要素に text-arign:right を設定する
まずは親要素divにtext-arign:rightを設定して要素を右寄せする方法です。
恐らく一番シンプルな方法だと思いますし、初めてテキストを右寄せしたい時に行った設定ではないでしょうか。
HTML
<div class="test01"> <p>テキスト</p> <a class="btn">ボタン</a> </div>
CSS
ボタン部分のCSSは省略しています
.test01 {
text-align: right;
}
できあがったもの
テキスト
ボタン注意点としては、親要素にtext-arign:rightを設定する必要があるので、目的の要素そのものにtext-arign:rightを設定しても右寄せにはなりません（私はいまだにたまに間違えます）。
また、親要素への設定をするので、その子要素は全て右寄せになってしまうという点は注意が必要です。
親要素に justify-content: flex-end を設定する
現在、私が最も好んで使っている方法です。
親要素をFlexBoxにして横方向にjustify-content: flex-endを設定する事で右寄せにする方法です。
HTML
<div class="test02"> <p>テキスト</p> </div>
CSS
.test02 {
display: flex;
align-items: flex-start; /*ここは任意の値でOK*/
justify-content: flex-end;
}
できあがったもの
テキスト
注意点としては、縦に2つ並べたい時に上記のCSSを使うと正しく設定できず横並びになってしまいます。
FlexBoxを使って要素を縦並びにしたい場合はflex-direction: columnを使う必要があります。
flex-direction: columnを使う時は、align-itemsとjustify-contentの扱いが逆になります。
CSS
test02_2 {
display: flex;
flex-direction: column; /*この行を追加*/
align-items: flex-end; /*ここの値を修正する*/
justify-content: flex-start; /*ここは任意の値でOK*/
}
できあがったもの
テキスト
ボタンこちらも親要素に右寄せの設定をしているため、子要素全てが右寄せの対象になってしまう点は要注意です。
block要素にして text-align: right を設定する
上記2つは親要素に対して設定をしましたが、次の2つは対象の要素そのものに右寄せにする設定をします（こちらはテキストを右寄せにする場合です。）。
具体的には対象の要素をblock要素にして、text-align: rightにすることで右寄せにします。
HTML
<p class="test03">ボタン</p>
CSS
.test03 {
display: block;
text-align: right;
}
テキスト
ボタンを右寄せにしたい場合は、次のように設定します。
block要素にして margin-left:auto を設定する
ボタンを右寄せにしたい場合は、対象の要素をblock要素にして、margin-left:autoにすることで右寄せにします。
HTML
<a href="" class="test03">ボタン</a>
CSS
.test03 {
display: block;
width: 80px;
height: 36px;
line-height: 36px;
text-align: center;
margin-left: auto;
background: #338DC9;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
できあがったもの
同じ方法でmargin-left:autoとmargin-right:autoを併記すると左右中央配置もできます。
block要素にしているため、要素にwidthを設定する必要があります。そのため、テキストの場合だと同じ方法では右寄せにできません。
float:right を設定する
ここから先はオススメ度は低いです（上記3パターンのうちどれかを使った方が良いと思います）。
要素にfloat:rightを設定して回り込みをさせる方法です。
HTML
<p class="test04">テキスト</p>
CSS
test04 {
float:right;
}
できあがったもの
テキスト
HTML・CSSともに非常にシンプルにできたのですが、デメリットは縦に要素を並べる事ができないことと、floatを使うので下の図のように親要素の枠をはみ出してしまう場合があります。
対策としては、以前「floatさせた画像がdivからはみ出すのを回避する方法」で紹介したように、疑似要素を追加する方法があります。
親要素の枠からはみ出してしまう例
何か入れないと枠が表示されないから挿入したテキスト
position: absolute を設定する
たぶん実用性が一番薄い方法になります。position: absolute;で要素の配置を絶対値指定にして、right: 0;で右端に配置してしまおうという物です。
HTML
<a href="" class="test05">ボタン</a>
CSS
.test05 {
position: absolute;
right: 0;
top: 0;
}
できあがったもの
これは普通のテキスト。
ボタン絶対値で指定するため、横方向はright:0で良いのですが、縦位置の調整が難しいではないかと思います。
今回のサンプルではtop:0としていますが、目的の場所に配置しようと思ったら微調整が必要になります。
また、親要素にposition: relative;を設定しないと思わぬ場所に配置されてしまいます。
また、2つ以上の要素を縦に並べようとすると、それぞれ調整が必要になるので、実的でないと思います。
