HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLでspanを使用して右寄せ表示する方法について解説しています。最初にインライン要素であるspanの基本を説明します。次にtext-alignプロパティを使った場合、floatプロパティを使用した場合の右寄せの方法を見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
Mak Tak
4年間Web制作会社にてフロントエンドを担当したのち、現在はフリーランスとして活動。居場所に縛られない働きかたを謳歌しています。
HTMLのspan要素はご存じでしょうか。
一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。
この記事では、HTMLでspanを使用して右寄せ表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
spanを使用して、右寄せ表示する方法について詳しく説明していくね！
お願いします！
span要素について
spanタグは、インライン要素の性質を持つタグです。
divタグと同じく、汎用的にグループ化を定義するためのタグとして活用されます。
spanタグはテキストや要素をカスタマイズするのに向いています。
以下はコード例です。
See the Pen
2020-03-23-sample-05 by YOHEI INAI (@yohei_inai)
on CodePen.
spanタグは、おもに一部分の装飾を目的としたタグとして扱われています。
全体というより、部分的な調整の役割として使用されるパターンが多いです。
divタグとの違い
似たような性質のタグとしてdivタグを挙げましたが、ブロックレベル要素かインラインレベル要素かの違いがあります。
ブロックレベルの要素を右寄せにしたい場合は、ブロックレベル要素を右寄せする方法の記事で解説しています。
span要素で囲った部分を右寄せする方法
インライン要素を右側に表示したい時には、次の方法があります。
text-alignプロパティを使う
CSSのプロパティであるtext-alignを使う方法です。
値にrightを定めることによって、ブロック要素の内部のインライン要素レベルを右寄せにできます。
HTML:
<p>この<span>テキスト</span>です。</p>
CSS:
p {
text-align: right;
}
こちらの方法は、あくまでもspan要素ではなく、それを子要素として扱うブロックレベル要素である親要素を対象とします。
インライン要素自体を右寄せする場合には、floatプロパティを使用します。
floatプロパティを使う
CSSのプロパティであるfloatを使う方法です。
値にrightを定めることによって、インライン要素であるspanそのものを右寄せにできます。
HTML:
<p>この<span>テキスト</span>です。</p>
CSS:
p span{
float: right;
}
実際に書いてみよう
span要素を右寄せにする方法として、text-alignプロパティを使用する場合と、floatプロパティを使用する場合の2通りのコードを解説します。
コードを確認しながら、ご自分のPCでも実践してみましょう。
text-alignプロパティを使用した場合のサンプルコード
See the Pen
2020-03-23-sample-06 by YOHEI INAI (@yohei_inai)
on CodePen.
親要素であるdivの内部のインライン要素が、すべて右側に表示されています。
floatプロパティを使用した場合のサンプルコード
See the Pen
2020-03-23-sample-07 by YOHEI INAI (@yohei_inai)
on CodePen.
親要素であるdivの内部のインライン要素自体が、右側に表示されています。
まとめ
いかがでしたでしょうか？
今回は、CSSでspanタグを右側に表示する方法をご紹介しました。
Webサイトのデザインとして、左詰めからテキストが表示される仕組みであるため、視認性のためにもテキストを右に寄せることは滅多にありません。
レイアウトを整える目的にて使用することがありますので、参考までに留めてください。
span要素内の改行については、こちらの記事もあわせてチェックしてみください。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
