こんにちは。
プログラミング学習を始めた方の大部分はhtml/cssからのスタートではないでしょうか？自分のコードが実際に表示され、文字の大きさや色を変えたり…「私、プログラミング意外と出来るじゃん」って楽しいですよね！
今日はそんな駆け出し学習者の方がつまづきやすい、html右詰め(右寄せ)の方法についてとにかく分かりやすく紹介しようとおもいます。肩の力を抜いて読んでみてくださいね。
銀行口座の番号を書くときなどは「右詰め」という言葉が使われます。
目次
htmlの右寄せはまずtext-alignで解決！
まずは基本的なtext-alignでの右寄せからみていきましょう。
text-alignとは？
text-alignは指定した要素の水平方向への配置を指定するプロパティです。WordやExcelの「左揃え」「中央揃え」「右揃え」する機能をイメージしてもらうと分かりやすいかもしれません。
ただし、垂直方向の位置は変更することができません。
text-alignでよく使う3つの値を紹介します。
- left : 左寄せ
- center：中央寄せ
- right：右寄せ
初期設定では文字が左寄せtext-align: leftの状態です。
text-alignで右寄せできる要素とは？
では実際にtext-alignでの右寄せをしてみましょう。
text-align: right
See the Pen
右寄せ1 by mi (@mi_86)
on CodePen.
このようにtext-alignを使ってhtmlの右寄せが出来ました。意外と簡単ではないですか？
…ですが text-align の右寄せにはいくつか注意事項があるんです。次の段落で紹介します。
htmlの右寄せでtext-alignが使えない？
htmlの右寄せが使える条件を確認していきましょう。
text-alignが上手く使えない原因は？①
上の例で text-alignを使った右寄せを行いました。しかし text-alignの使用には注意事項があるので、一緒に確認していきましょう。
では実際にtext-alignの右寄せが上手く機能していない例を見てみましょう。
pタグの中にspanタグがある構造のコードです。text-align: rightを右寄せしたい文章を囲んでいるspanタグに指定してみます。
See the Pen
右寄せ2 by mi (@mi_86)
on CodePen.
テキストが右寄せになっていない事が確認できるかと思います。
次に同じhtmlの記述でspanタグの親要素であるpタグにtext-align: rightを設定してみましょう。
See the Pen
右寄せ3 by mi (@mi_86)
on CodePen.
pタグ内のテキストを無事に右寄せすることが出来ました。
text-alignのポイントは、右寄せしたい要素そのものではなく、右寄せしたい要素の親要素に指定をすることです。text-alignはその要素自体の位置を指定するものではないため、親要素に指定することで上手く動作させることができます。
発展： text-alignが上手く使えない原因は？②（ display: block/ display: inline）
上の解説で text-alignの使い方に関して、右寄せしたい要素の親要素に指定することを紹介しました。
displayに対する値として、今回はtext-alignの右寄せに関係する2つを見ていきます。私たちが普段目にしているウェブページではほとんどの要素がdisplay:blockまたはinlineのどちらかになっています。
- display: blockの要素 縦並び、要素が横一杯に広がる（p,div,ul,h1~h6などのタグ）
- display: inlineの要素 横並び、いくつかの要素が横並び（a,span,imgなどのタグ）
つまり、横一杯に広がっている display: block要素には text-alignが効きません。 text-alignは指定した親要素の中にあるdisplay: inline要素の配置を決めるプロパティです。
text-alignが使用できる条件まとめ
「text-align: rightの右寄せ」は次のポイントを押さえておいてください。
- 右寄せしたい要素が display: Inline要素の時に使える
- 右寄せしたい要素の親要素に指定する
ここまで確認できればもう text-alignを使ったhtmlの右寄せは完璧ですね！
marginを使ったhtmlの右寄せ
margin右寄せとは
marginを使った右寄せは、上で解説したdisplay:blockの要素を右寄せする事が出来ます。
margin-left: auto
See the Pen
右寄せ4 by mi (@mi_86)
on CodePen.
marginは要素の周りの余白を指定する際に使うプロパティです。数値を指定するのが一般的ですがautoと指定する場合には自動算出されます。
右寄せをする場合には右の余白が0pxを指定した状態で、左の余白を自動算出することで、右に寄せた状態にすることができます。
margin右寄せの注意事項
margin-left:autoでの右寄せはdisplay:blockの要素の右寄せのみに使えます。左側の余白をautoで自動計算し伸ばすことによって右寄せしている状態です。そのため右寄せした要素の左側に別の要素を持ってくることができませんので、注意が必要です。
floatを使ったhtmlの右寄せ
float右寄せとは
最後に紹介するのが、float: rightを使った右寄せの方法です。これまで見てきた2つの方法と使用できる条件をまとめてみましょう。
- text-alignを使った右寄せ→ display:inline要素
- marginを使った右寄せ→ display:block要素
- floatを使った右寄せ→ display:inline要素とdisplay:block要素の両方に使える
早速実際のコードを見てみましょう。
float: right
See the Pen
右寄せ5 by mi (@mi_86)
on CodePen.
floatは要素を浮かび上がらせるプロパティです。値を指定することで、浮かせた要素をどこに配置するかを決めることができます。
また、先ほどmarginでの右寄せでは左側は引き伸ばされた余白部分であるため、他の要素を配置できないとお伝えしました。float: rightの場合は要素の左側に他の要素が回り込む形となります。
float右寄せの注意事項
display:inline要素とdisplay:block要素の両方に使用でき、左側に要素も配置できるfloatですが、ここにも注意点があります。floatは要素が浮いている状態になるため、要素の高さがなくなってしまいます。
右から順に要素を並べたりする場合には、下にある要素が上にぐいっと入り込んできてしまいレイアウトが崩れることがあります。そういう場合は、clearプロパティなどを活用して高さを復活させる必要があります。
まとめ
いかがでしょうか。htmlにおける右寄せの方法がマスターできたでしょうか。
プログラミングを始めるとつまづくこともあるかもしれません。
そんな時は落ち着いて知識を整理してみると意外なところにヒントがあるものです。
少しでも学習の手助けができれば嬉しく思います。
