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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

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

 

右寄せにしたい場合

右寄せにしたい場合は、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デザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。