span要素にtext-alignで右寄せする方法を紹介!

span要素にtext-alignで右寄せする方法をサンプルコード付きで紹介します。span要素にtext-alignで右寄せするにはtext-alignの特性とspan要素はインライン要素であるという点に着目する必要があります。

コンテンツ [表示]

  1. 1span要素でtext-alignが効かない
  2. 2span要素で右寄せする方法
  3. 2.1右寄せできない原因
  4. 2.2span要素をブロックレベル要素に変換する
  5. 2.3ブロックレベル要素で囲みそのブロックレベル要素にtext-alignを設定した場合
  6. 3まとめ

span要素でtext-alignが効かない

span要素でtext-alignを効かせて、右寄せしたり、センタリングをしたりしたいという時があります。

しかしspan要素そのものに、ただ単にCSSでtext-alignだけを設定してもtext-alignを効かせることはできません。

ではどうしたらいいのかを以下の項目で解説します。

Photo byStockSnap

span要素で右寄せする方法

右寄せできない原因

span要素にtext-alignで右寄せするにはまず、text-alignの特性を知る必要があります。

text-alignは通常ブロックレベル要素に設定し、そのブロックレベル要素の中身を左寄せ、センタリング、右寄せさせます。

ここでなぜspan要素にはtext-alignが効かないかと言うと、span要素はインライン要素だからです。

ですのでspan要素にtext-alignで右寄せするには、span要素にdisplay: block;を設定するか、span要素をブロックレベル要素であるdiv要素などで囲んで、div要素にtext-alignを設定する必要があります。

span要素をブロックレベル要素に変換する

このようにspan要素をブロックレベル要素に変換することで、無事に右寄せされていることが分かります。

ブロックレベル要素で囲みそのブロックレベル要素にtext-alignを設定した場合

こちらのやり方でもspan要素を右寄せできます。span要素をdiv要素などブロックレベル要素で囲み、そのブロックレベル要素に対してtext-align: right;を指定します。

このように右寄せされていることが分かります。

まとめ

いかがでしたでしょうか?

ここで紹介した方法を用いてぜひspan要素をtext-alignにて、左寄せ、センタリング、右寄せさせてみてください。

またここで紹介したのはspan要素にtext-alignで右寄せする方法ですが、同じ要領で以下の記事でspan要素を中央寄せする方法も解説しているので参照してください。

あわせて読みたい
span要素を中央寄せする方法をサンプルコード付きで紹介!のイメージ
span要素を中央寄せする方法をサンプルコード付きで紹介!
span要素を中央寄せする方法をサンプルコード付きで解説します。span要素を中央寄せさせる方法には様々な方法があり、それぞれ使いどころが違ってきますので、今回紹介する方法はすべて押抑え、実際に使えるようにマスターしてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。