HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】

初心者向けにHTMLで右寄せ・中央寄せ・左寄せの指定方法を解説しています。テーブル作成の際などに役立つ知識なので、実際にソースコードを書きながら慣れていきましょう。align属性を使って説明しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLのテーブルタグで、左寄せや右寄せ、中央寄せを指定したい場合があるでしょう。

この時に使うのがalign属性です。書き方は難しくないので、実際に書きながら慣れていきましょう。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

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

田島悠介

右寄せ・中央寄せ・左寄せをする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

右寄せにしたい場合

右寄せにしたい場合は、divタグにalign=”right”を属性として記述します。

<td align="right">align="right"を指定すると右寄せです。</td>

 

中央寄せにしたい場合

中央寄せにしたい場合は、divタグにalign=”center”を属性として記述します。

<td align="center">align="center"を指定すると中央寄せです。</td>

 

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

左寄せにしたい場合

左寄せにしたい場合は、divタグにalign=”left”を属性として記述します。

<td align="left">align="left"を指定すると左寄せです。</td>

 

実際に書いてみよう

それでは実際に書いてみましょう。「align.html」を作成し、以下を記述します。

align.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <table border="1" width="500px">
    <tbody>
      <tr><td align="right">align="right"を指定すると右寄せです。</td></tr>
      <tr><td align="center">align="center"を指定すると中央寄せです。</td></tr>
      <tr><td align="left">align="left"を指定すると左寄せです。</td></tr>
    </tbody>
    </table>
  </body>
</html> 
------------------------------------------------------------------------

ブラウザで開いてみます。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。