初心者向けにHTMLでspanを使用して右寄せ表示する方法について解説しています。最初にインライン要素であるspanの基本を説明します。次にtext-alignプロパティを使った場合、floatプロパティを使用した場合の右寄せの方法を見ていきましょう。2018/3/26テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。Takイラストレーター兼Webエンジニア。4年間Web制作会社にてフロントエンドを担当したのち、現在はフリーランスとして活動。居場所に縛られない働きかたを謳歌しています。HTMLのspan要素はご存じでしょうか。一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。この記事では、HTMLでspanを使用して右寄せ表示する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTMLの書き方について解説した記事を読むとさらに理解が深まります。今回は、HTMLに関する内容だね!大石ゆかりどういう内容でしょうか?田島悠介spanを使用して、右寄せ表示する方法について詳しく説明していくね!大石ゆかりお願いします!span要素についてspanタグは、インライン要素の性質を持つタグです。divタグと同じく、汎用的にグループ化を定義するためのタグとして活用されます。spanタグはテキストや要素をカスタマイズするのに向いています。CodePen.spanタグは、おもに一部分の装飾を目的としたタグとして扱われています。全体というより、部分的な調整の役割として使用されるパターンが多いです。divタグとの違い似たような性質のタグとしてdivタグを挙げましたが、ブロックレベル要素かインラインレベル要素かの違いがあります。ブロックレベルの要素を右寄せにしたい場合は、ブロックレベル要素を右寄せする方法の記事で解説しています。span要素で囲った部分を右寄せする方法インライン要素を右側に表示したい時には、次の方法があります。text-alignプロパティを使うCSSのプロパティであるtext-alignを使う方法です。値にrightを定めることによって、ブロック要素の内部のインライン要素レベルを右寄せにできます。HTML:<p>この<span>テキスト</span>です。right;}こちらの方法は、あくまでもspan要素ではなく、それを子要素として扱うブロックレベル要素である親要素を対象とします。インライン要素自体を右寄せする場合には、floatプロパティを使用します。floatプロパティを使うCSSのプロパティであるfloatを使う方法です。値にrightを定めることによって、インライン要素であるspanそのものを右寄せにできます。HTML:<p>この<span>テキスト</span>です。実際に書いてみようspan要素を右寄せにする方法として、text-alignプロパティを使用する場合と、floatプロパティを使用する場合の2通りのコードを解説します。コードを確認しながら、ご自分のPCでも実践してみましょう。CodePen.親要素であるdivの内部のインライン要素が、すべて右側に表示されています。CodePen.親要素であるdivの内部のインライン要素自体が、右側に表示されています。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。独学には向き不向きがあり、実はスクールが向いている人も大勢います。スクールが向いているかもしれません。お気軽にご参加ください。無料相談はこちらまとめいかがでしたでしょうか?今回は、CSSでspanタグを右側に表示する方法をご紹介しました。Webサイトのデザインとして、左詰めからテキストが表示される仕組みであるため、視認性のためにもテキストを右に寄せることは滅多にありません。レイアウトを整える目的にて使用することがありますので、参考までに留めてください。span要素内の改行については、こちらの記事もあわせてチェックしてみください。大石ゆかり内容が分かりやすくて良かったです!田島悠介ゆかりちゃんも分からないことがあったら質問してね!大石ゆかり分かりました。ありがとうございます!HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいHTMLを学習していて、このように思ったことはありませんか?テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。30分間、オンラインでどんなことでも質問し放題です。あなたの相談に真摯に向き合います。「漠然としているがプロの話を聞いてみたい」こんな気持ちでも大丈夫です。お気軽にご参加ください。※体験用のカリキュラムも無料で配布いたします。関連する記事HTMLでアクセスからスマホ判定して動作を替える方法を現役デザイナーが解説【初心者向け】HTMLでアクセスからスマホ判定して動作を替える方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...HTMLHTMLに1行だけコメントアウトする方法を現役デザイナーが解説【初心者向け】ファイルの作成をしていると、一度注視して、別日に改めて作業をした時に、どこから再開すれば良いか分からなくなることがありますよね。他にも、人に作業を依頼す...HTMLHTMLでcode要素を使ってソースコードを表示する方法を現役デザイナーが解説【初心者向け】HTMLでcode要素を使ってソースコードを表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説しま...HTMLHTMLでstrongタグが効かない原因と対処法を現役エンジニアが解説【初心者向け】HTMLで太字で強調するstrongタグが効かない原因と対処法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解...HTMLHTMLのbr要素を現役デザイナーが解説【初心者向け】HTMLのbr要素について解説します。記事を読むとさらに理解が深まります。外部サイトのRSS配信を取得してHTMLに表示させる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説しま...HTMLあわせてよく読まれている記事CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。<span>要素の数だけを数えて、x番目の<span>要素のみを選択します。nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。兄弟関係にある全ての要素を数えるため、x番目にある要素が<span>ではない場合、適用できません。nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。span:nth-child(2)もspan:nth-of-type(2)も<span>2</span>を選択します。下記のようなHTMLの場合には、span:nth-child(2)は、<p>を1番目と数えるので、<span>1</span>を選択し、span:nth-of-type(2)は<span>だけを数えるので、<span>2</span>を選択します。次は下記のようなHTMLで考えてみましょう。h2{CSS3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。参考にしてみてください。CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。このように、条件や状態を追加することができる擬似クラスはたくさんあります。