TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのvertical-alignが効かない原因と対処法【初心者向け】現役デザイナーが解説
CSS

CSSのvertical-alignが効かない原因と対処法【初心者向け】現役デザイナーが解説

初心者向けにCSSのvertical-alignが効かない原因について解説しています。verticla-alignはインライン要素の縦の位置を調整するために使用しますが、効かないことがあります。CSSに書いていてもどのような場合に効かないのか確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSのvertical-alignが効かない原因について解説します。vertical-alignはインライン要素の縦の位置を揃える場合などに使用します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

目次

本記事は、テックアカデミーのWebデザインコースのカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

CSSのvertical-alignが効かない原因について詳しく説明していくね！

大石ゆかり

お願いします！

 

vertical-alignが効かない原因

vertical-alignは、「インライン要素」または、「テーブルセル」のみに適用できるCSSプロパティです。

「CSSにvertical-alignを書いたのに、全く効かない！」という場面に遭遇したら、適用している要素が、何の要素であるかに注目してみてください。

 

vertical-alignが適用できる要素の例

  • <a>、<span>、<strong>、<small>などのインライン要素
    （CSSでdisplay:inline;または、display:inline-block;を適用している要素）
  • <td>、<th>などのテーブルセル要素
    （CSSでdisplay:table-cell;を適用している要素）

ブロック要素に対して、縦方向の位置を揃えたい場合には、vertical-align以外の方法を使います。

こちらの記事も参考にしてみてください。

CSSで上下中央揃えの仕方を現役エンジニアが紹介【初心者向け】

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

vertical-alignを使用する場面

vertical-alignは大きな文字と小さな文字が混在するテキストや、文中に画像を使用する場合などに、縦方向の位置調整に使用されることが多いです。

また、テーブルセル要素で使用する場合には、セルの中での縦方向の整列位置の調整、インライン要素の場合は、行（または親要素）に対して縦方向の整列位置の調整を行います。

 

vertical-alignの書き方

vertical-alignの値は、top、middle、bottomなどのキーワードや、%、その他pxやemなどの単位での指定も可能で、以下のように書きます。

 

vertical-align:top; /* 上で揃える */
vertical-align:middle; /* 中央で揃える */
vertical-align:bottom; /* 下で揃える */
vertical-align:100px;  /* 10px上へ移動 */
※％や単位での指定は、テーブルセルには適用できません。

 

表示の例：

vertical-alignで縦方向の整列位置

vertical-align:baseline;（初期値）

 

vertical-align 縦方向の整列位置

vertical-align:middle;

 

vertical-alignで縦方向の整列位置

vertical-align:top;

 

画像に対して適用した場合：

vertical-alignで縦方向の整列位置

vertical-align:top;

 

vertical-alignで縦方向の整列位置

vertical-align:middle;

 

vertical-alignで縦方向の整列位置

vertical-align:bottom;

 

実際に書いてみよう

文中に注釈のあるテキストの注釈の縦方向の整列位置を調整してみます。

HTML

<p>vertical-alignはインライン要素<span>（※注1）</span>または、テーブルセル<span>（※注2）</span>に対して適用できます。</p>

 

CSS

span{
  font-size:.5em;
  color:red;
}

vertical-alignを書かない場合（初期値）は以下のような表示になります。

vertical-alignで縦方向の整列位置

次に注釈の文字を行の上端に揃えてみます。

CSS

span{
font-size:.5em;
color:red;
vertical-align:top;
}

表示結果：
vertical-alignで縦方向の整列位置

注意点は、top、middle、bottomは行の高さに対して適用される点です。

<p>の行の高さ（line-height）が変わると、注釈の位置も変わります。

CSS

p{
  line-height:3;  /*行の高さを文字の高さの3倍*/
}
span{
  font-size:.5em;
  color:red;
  vertical-align:top; 
  line-height:1;  /*行の高さは文字の高さと同じ*/
}

表示結果：
vertical-alignで縦方向の整列位置
行の高さの上端に注釈の文字が整列されるので、文章の文字自体の高さよりも上に飛び出て見えます。

文章の文字自体の高さに合わせたい場合は、以下のように書きます。

 

vertical-align:text-top; /* 親要素のテキストの上端で整列 */
vertical-align:text-bottom; /* 親要素のテキストの下端で整列 */

表示結果：

vertical-alignで縦方向の整列位置

vertical-align:text-top;

 

vertical-alignで縦方向の整列位置

vertical-align:text-bottom;

※text-top、text-bottomの値はテーブルセルでは使用できません。

 

次に、テーブルセルの縦方向の整列位置を調整してみます。

HTML

<table>
  <tr>
    <td>デフォルト</td>
    <td class="top">上揃え</td>
    <td class="middle">中央揃え</td>
    <td class="bottom">下揃え</td>
  </tr>
</table>

CSS

td{
  width:10em;
  height:5em;
  background:gold;
}
.top{
  vertical-align:top;
}
.middle{
vertical-align:middle;
}
.bottom{
vertical-align:bottom;
}

 

表示結果：

テーブルセルでvertical-alignで縦方向の整列位置

表示結果からも分かるように、テーブルセルの場合、何も指定しない場合は中央揃えになります。

また、テーブルセルの高さに対して整列位置を調整するため、セル自体の高さが設定されている必要があります。

また、テーブルセルではvertical-alignの値は、top、middle、bottom、baselineのみが使用できます。

 

vertical-alignでは、様々なキーワードで縦方向の整列位置を調整することができます。

それぞれ整列する位置がの基準が親要素だったり、行の高さだったりと、言葉で説明するとややこしく感じるプロパティです。

実際にいろんな場面で、vertical-alignの様々な値を適用してみて、違いを体感してみるのがわかりやすいと思います。

監修してくれたメンター

橋本真理

フリーのWeb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。

テックアカデミーではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

CSSで画像に指定色の透過カラーを重ねる方法を現役エンジニアが解説【初心者向け】

CSSで画像に指定色の透過カラーを重ねる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでcalcが効かない原因と正しい使い方を現役エンジニアが解説【初心者向け】

CSSでcalcが効かない原因と正しい使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

レイアウトの調整に役立つ！CSSのflexboxの使い方【初心者向け】

CSSのflexboxの使い方について解説しています。 PCでは横並び、スマホでは縦並びをしたいという時にレイアウトの調整ができます。PCとスマホの両方に...
CSS

要素の表示の仕方を覚える！CSSのdisplayとvisibilityの使い方【初心者向け】

CSSで書くdisplayとvisibilityの使い方について解説しています。 要素の表示を自在にコントロールするためには重要な知識になります。特に難し...
CSS

HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方を現役デザイナーが解説【初心者向け】

HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方につ...
CSS

SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】

SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

あわせてよく読まれている記事

CSSでmarginが効かない原因と対処法【初心者向け】現役Webデザイナーが解説

CSSでmarginが効かない原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次vertical-alignが効かない原因vertical-alignを使用する場面vertical-alignの書き方実際に書いてみよう監修してくれたメンターCSSを学習中の方へ そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   marginが効かない原因 よくあるmarginが効かない場合にはいくつかの原因が考えられます。まずは、CSSのボックスモデルを確認しおきます。 1つのボックスには、上下左右に2種類の余白があります。 padding：内側の余白 margin：外側の余白 marginは隣接するボックス同士の間隔です。 人間で言うところのソーシャルディスタンスです。 paddingは内側の余白で、ボックスの内部という扱いになります。 実は、marginはボックスがブロックレベル要素なのか、インライン要素なのか、インラインブロック要素なのかによって、振る舞いが変わります。 どう変わるのか、実際に書いて検証していきます。   実際に書いてみよう ブロックレベル要素、インライン要素、インラインブロック要素、それぞれの要素に対して、同じpadding、同じmarginを適用して確認してみます。   HTML： <p>ブロックレベル要素</p> <div class="box block">Box</div> <div class="box block">Box</div> <div class="box block">Box</div> <div class="box block">Box</div> <div class="box block">Box</div> <p>インライン要素</p> <div class="box inline">Box</div> <div class="box inline">Box</div> <div class="box inline">Box</div> <div class="box inline">Box</div> <div class="box inline">Box</div> <p>インラインブロック要素</p> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> <div class="box inline-block">Box</div> CSS： .box{ background:gold; padding:1em; margin:1em; border:black 1px solid; } .inline{ display:inline; } .inline-block{ display:inline-block; } 表示結果： paddingとmarginを上下左右に1emを適用したボックスを5つずつ並べてみました それぞれの要素に対してmarginがどのように適用されているのか表示結果を観察してみてください。   ブロックレベル要素の場合 ブロックレベル要素は横幅を指定しない場合、親要素いっぱいまで伸びる性質があります。 そのため、ひとつのボックスの横幅が他の要素に比べて長くなっています。 また、ボックスは横に並びませんので、ボックスは上から下に間隔をあけて並んでいます。 ここで注目して欲しいのが、インラインブロック要素と見比べた場合に、上下のボックスの間隔が狭くなってるところです。 これはmarginの相殺が起こるためです。 ボックスのmargin-top 1em + margin-bottom 1em = 2em の間隔ができるような気がするのですが、実際にはボックスとボックスの間隔は1emになります。 marginが効いていない！と思ってしまいがちなのですが、隣接するブロックレベル要素のmarginは重なり合って、結果的に大きい方の値が適用されるというふうに思っておくと良いです。   インライン要素の場合 インライン要素は本来文章の一部として扱われるような要素で、marginの上下は適用しても他の要素との間隔を作ることができません。 インライン要素の大きさは、中にあるテキスト（文字）などの量やサイズ、行の高さなどによって変化し、CSSでwidthやheightも適用することができません。 インライン要素はあくまでも文章の一部として扱いたいような場合に使用して、他の要素との間隔を作りたい場合や、ボックスとして表現したい場合には、インライン要素以外にするのがよいです。 例えば、<a>タグを使ってリンクのボタンを作る場合などは、display: inline-block; や
CSS

CSSで画像の下に隙間ができる原因と消す方法を現役エンジニアが解説【初心者向け】

CSSで画像の下に隙間ができる原因と消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 画像の下に隙間ができる原因と消す方法について詳しく説明していくね！ 大石ゆかり お願いします！   隙間が生じる例を見てみよう 画像の下部の余白としてmargin-bottom、padding-bottomを設定しているわけでもなく、違和感のある隙間を確認できることが可能です。 初見は、全角スペースや半角スペースが表示されていることにも見受けられるものの、その一例を再現するために枠としてブロックレベル要素のdivタグとその子要素としてインライン要素のimgタグを定義しています。 See the Pen 2019-12-16-sample-01 by YOHEI INAI (@yohei_inai) on CodePen. ブロックレベル要素の高さが子要素の高さと一致しておらず、高さに差が生じているため、隙間を見つけることができます。 この隙間は、デベロッパーツールのエレメンツの項目（Google Chrome）、または、インスペクタの項目（Mozilla Firefox）で検証可能です。   隙間が生じる主な原因と対処法 原因 画像のimgタグに標準的なスタイルとして、vertical-align: baseline;が設定されており、この値が隙間を作り出しています。 ブラウザの標準的なスタイルシートとして、あらかじめ定義されてあることが多いため、デベロッパーツールでもこの値を確認することに対して困難でした。 この原因を特定する場合、ブラウザの標準的なスタイルシートを解体しなければわからないほどでした。   対処法 ブラウザの標準的な装飾を初期化するためのスタイルシートのreset.cssなどには、この設定の値を上端に整えて、隙間を埋めるための初期化のスタイルが定義されていません。 ブロックレベル要素の高さも、その子要素と同じ値として定義してから隙間を埋めることが可能です。 そして、本質的な原因となっているvertical-alignの値をbaselineからtopなどに変更することでも隙間を埋めることができるでしょう。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に対処して隙間を消してみよう インライン要素の画像に対してvertical-align: top;を設定します。 See the Pen 2019-12-16-sample-02 by YOHEI INAI (@yohei_inai) on CodePen. インライン要素のimgタグとその親要素であるdivタグの下部に生じた隙間が解消されました。 CSSに隙間が生まれた際には、vertical-alignの値を変化させて対応しましょう。 執筆してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり CSSで画像の下に隙間ができる原因と消す方法がよくわかったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。
CSS

CSSで画像を縦に並べる方法を現役デザイナーが解説【初心者向け】

CSSで画像を縦に並べる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次vertical-alignが効かない原因vertical-alignを使用する場面vertical-alignの書き方実際に書いてみよう監修してくれたメンターCSSを学習中の方へ そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 画像を縦に並べる方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像はそのままだと横に並ぶ HTMLの要素は大きく分けて、インライン要素とブロックレベル要素があります。 インライン要素は横に並び、ブロックレベル要素は横には並ばず縦に並んでいきます。 画像を配置する際の<img>は、インライン要素になるので、CSSで何も設定しない場合には横に並んでいきます。 HTML <img src="image.png" alt=""> <img src="image.png" alt=""> <img src="image.png" alt=""> 表示結果   画像にdisplay: block;を適用して縦に並べる ブロックレベル要素なら縦に並ぶので、<img>をブロックレベル要素にするだけで画像は縦に並びます。 上下や左右の間隔はmarginやpaddingで調整が可能です。   HTML <img src="image.png" alt=""> <img src="image.png" alt=""> <img src="image.png" alt=""> CSS img{ display:block; } img:first-child{ margin:0 auto; } img:nth-child(2){ margin-left:3em; } img:nth-child(3){ padding-left:10em; }   表示結果 上記の例では、以下の3つの方法で、ボックスの表示位置を変えています。 1番目の画像は左右のmarginをautoにして中央に表示 2番目の画像は左に3emのmarginを適用 3番目の画像には左に3emのpaddingを適用   [PR] HTML/CSSで挫折しない学習方法を動画で公開中display: flex;で縦に並べる flexboxレイアウトを使用して、画像を縦に並べることも可能です。 flexboxを使う場合は、縦に並べたい画像を囲む要素（<div>など）を作って、display: flex;を適用します。 さらに、縦並びにする場合は、flex-direction: column;も適用します。   HTML <div class="flexbox"> <img src="image.png" alt=""> <img src="image.png" alt=""> <img src="image.png" alt=""> </div> CSS .flexbox{   display: flex;   flex-direction: column; } 表示結果 display:flex;を適用した要素の直下に<img>を配置した場合は、align-itemsプロパティの初期値 stretch が適用されるため、画像の幅が指定されていないと画像が親要素の幅に合わせて伸縮します。 align-itemsプロパティの値でstretch以外を適用すると、画像の幅は親要素の幅に合わせて伸縮しなくなると同時に、整列する位置を指定できます。   HTML <div class="flexbox flexbox-left"> <p>ボックスを左端に整列</p> <img src="image.png" alt="">
CSS

横並びにできる！CSSのtable-cellの使い方【初心者向け】

CSSのtable-cellの使い方について解説します。table-cellは名前の通りテーブルやエクセルのセルのような表示を行うことが出来ます。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSのtable-cellの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   table-cellとは table-cellは、テーブルタグの子要素のようなスタイルを与えることができる、displayプロパティの値です。 よく、「要素をカンタンに横並びにできるもの」として登場しているのではないかと思います。 そもそもこの「テーブル」の部分ですが、元をたどればテーブルタグというものが存在します。（ご存知の方は読み飛ばしてください。）いわゆるWebサイトが普及し始めた頃、フレームワークはほぼテーブルタグで行われていました。 HTMLタグ自体が、強制的に表のようになるようにできているので、「表示幅によっては縦並び」みたいなことが不可能で、今ではWebのレスポンシブ化とともに、すっかり見かけなくなってしまいました。 その「テーブル」の「セル」。エクセルなどで「セル」って聞いたことないでしょうか。つまり、display: table-cell; とは、テーブルの中身の枠をを再現できるものだということです。 通常のブロック要素とは違う動きをしますので、注意が必要です。   table-cellの書き方 基本的には、親要素にdisplay: table;を与えた上で使います。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう HTML <div class="container"> <div class="box apple"> <p>りんご</p> </div> <div class="box orange"> <p>みかん</p> </div> <div class="box grape"> <p>ぶどう</p> </div> </div>   CSS .container{ display: table; width: 600px; height: 200px; } .box{ display: table-cell; text-align: center;
CSS

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 position: fixedを使うと文字が重なる原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 positionプロパティについて 位置を固定する場面 重なる順番と調整方法 実際に位置を固定して文字の重なりをチェックしよう   positionプロパティについて positionプロパティでは、要素の配置方法を指定することができます。positionプロパティで使える値について確認してみます。   static（デフォルト値）／通常の配置 positionを特に指定しない場合の配置です。 relative／相対位置配置 通常の配置位置（staticで配置される位置）を基準にした配置 absolute／絶対位置配置 直近の先祖でrelative、absolute、fixedが指定されている要素を基準にした配置です。先祖にrelative、absolute、fixedが指定されている要素がない場合は、bodyが基準。  fixed／固定位置配置 absoluteと同じようなイメージですが、基準がウインドウ範囲のため、スクロールしても位置を固定することができます。 sticky／粘着位置配置 absoluteとfixedを組み合わせたような振る舞いをします。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中位置を固定する場面 よく使用されるのは、スクロールしてもナビゲーションをページのトップ常に表示し続けたり、ページトップへのボタンをウインドウの右下に常に表示しておきたい場面です。 TECHACADEMY MAGAZINEのナビゲーションも位置を固定して表示しているので、スクロールしてもずっと表示され続けています。   重なる順番と調整方法 重なり順のデフォルトは、HTMLで後に書いたものの方が前面に表示されます。重なり順を調整したい場合にはz-indexプロパティを使用します。 z-indexプロパティの値には整数を指定することができ、より大きい数値が指定されているものが前面に表示されます。 詳しくはこちらへ→ CSSで重なり順を指定するz-indexの正しい使い方を現役エンジニアが解説【初心者向け】   実際に位置を固定して文字の重なりをチェックしよう ページ上部に位置を固定したナビゲーションと、ページ下部に位置を固定したボタンのあるページのレイアウトを作ってみます。 HTML： <div class="bar">ナビゲーション</div> <div class="page"> <p>スクロールしてみよう↓<br> この文章はダミー文章。この文章はダミー文章。・・・・・</p> <a class="btn" href="#">ボタン</a> </div> CSS： .bar{ position:fixed; top:0; width:400px; box-sizing:border-box; height:100px; padding:20px; background:skyblue; z-index:500; } .page{ padding:50px; width:300px; padding-bottom:150px;/*ボタンとの重なり回避*/ margin-top:100px;/*ナビゲーションとの重なり回避*/ background:linear-gradient(lightpink,tomato,gold); } .btn{ position:fixed; display:block; bottom:0; left:0; width:400px; height:100px;
CSS

CSSで上付き下付き文字を表示する方法を現役エンジニアが解説【初心者向け】

CSSで上付き下付き文字を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 上付き下付き文字を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 上付き下付き文字とは CSSで文字を上付き下付き表示するには 実際に上付き下付き表示してみよう まとめ   上付き下付き文字とは アルファベットはベースラインという基準にしたがって記述されます。ベースラインは以下で示した赤い線でpなどの文字はベースラインを超えて記述されます。 上付き文字は以下のような文字の上側にそろえて表記される文字です。数式などでよく用いられています。 下付き文字は以下のような文字の下側にそろえて表記される文字です。こちらも数式などでよく用いられています。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中CSSで文字を上付き下付き表示するには CSSで文字を上付き下付きで表示するにはvertical-alignプロパティを使用します。 上付き文字 vertical-align: super; 下付き文字 vertical-align: sub; vertical-alignはインライン要素とテーブルセルにしか適用できません。divタグなどにvertical-alignを適用する方法については以下の記事を参考にしてください。 CSSのvertical-alignが効かない原因と対処法【初心者向け】 vertical-alignプロパティについて、詳しくは以下の記事も参考にしてください。 MDN – vertical-align   実際に上付き下付き表示してみよう 今回のサンプルプログラムではCSSで文字を上付き下付きで表示する方法について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> #parent { font-size: 3rem; } .text1 { vertical-align: sub;
CSS

TechAcademyから
現役エンジニアの方へ
お知らせ

藤門千明
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのvertical-alignが効かない原因と対処法【初心者向け】現役デザイナーが解説