Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

HTMLでテーブルタグを使用してテキストを流し込むとき、左寄せや右寄せ、中央指定などをするのはごく当たり前のことですが初心者の方にとっては何をすれば良いのかさえ分からないことがあります。

そこで今回は「HTMLで左寄せや右寄せ・中央寄せをするための方法」について解説していきたいと思います。

align属性

寄せを行うためには、要素にalign属性を指定することでテキストを寄せることが出来ます。

alignには「左寄せ」「中央寄せ」「右寄せ」の三つがあり、それぞれ「align=”left”」「align=”center”」「align=”right”」が対応しています。

なおalignを使用できる要素は「ブロックレベル要素」と「テーブルセル」限定となっています。

またalignはHTML属性ですので、CSSでは使用できません。

text-alignと混同する方がいらっしゃいますが、alignとtext-alignは作用は一緒ですが全くの別物ですので混同しないようにしましょう。

ブロックレベル要素

ブロックレベル要素とは次の要素を指しています。

<address>、<blockquote>、<center>、<dir>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<isindex>、<menu>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

alignの記述方法

それでは早速記述方法について見ていきましょう。

次のコードは上から順に「左寄せ」「中央寄せ」「右寄せ」を行うためのコードとなっています。

  1. // 左寄せ
  2. <p align="left">align="left"で右寄せにしています。</p>
  3.  
  4. // 中央寄せ
  5. <p align="center">align="center"で右寄せにしています。</p>
  6.  
  7. // 右寄せ
  8. <p align="right">align="right"で右寄せにしています。</p>

a今回のサンプルコードではpタグを使用していますが、先ほども解説したようにalignプロパティは「ブロックレベル要素」と「テーブルセル」ならどの要素でも使用可能です。

よって、divタグやhタグなどでもテキストを寄せることが出来ます。

実際に記述してみる

今度は実際にHTMLに記述して全体を見てみましょう。

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <style>
  5. 	p {
  6. 		border: solid #000000 1px;
  7. 		width: 500px;
  8. 		padding: 1em;
  9. 	}
  10. </style>
  11. <title>alignのサンプルコード</title>
  12. </head>
  13.  
  14. <body>
  15. 	<p align="left">align="left"で左寄せにしています。</p>
  16. 	<p align="center">align="center"で中央寄せにしています。</p>
  17. 	<p align="right">align="right"で右寄せにしています。</p>
  18. </body>
  19. </html>

表示結果

上のコードは、先ほど解説を行った全ての寄せについての検証コードとなっていますが、表示結果を見ても、pタグに記述されているalignが適用されていることが確認できます。

画像にも適用できる

alignプロパティはテキスト以外でも適用されます。

画像などのオブジェクトも時には寄せを行いたい場合がありますが、そういった場合にもテキストと同じくalignを使用することで寄せることが可能です。

使い方は特に変わらないため、ここでは実際に画像を寄せて確認をしてみます。

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <style>
  5. 	div {
  6. 		border: solid #000000 1px;
  7. 		width: 500px;
  8. 		height: 200px;
  9. 		margin: 2em 0 0 2em;
  10. 	}
  11. </style>
  12. <title>alignのサンプルコード</title>
  13. </head>
  14.  
  15. <body>
  16. 	<div align="left">
  17. 		<img src="img/bouquet-3.jpg">
  18. 	</div>
  19. 	<div align="center">
  20. 		<img src="img/bouquet-3.jpg">
  21. 	</div>
  22. 	<div align="right">
  23. 		<img src="img/bouquet-3.jpg">
  24. 	</div>
  25. </body>
  26. </html>

表示結果

HTML5では廃止された属性

ここまでalignについてかなりしっかりと解説してきましたが、実はこの属性、HTML5では廃止されました。

というのも、HTML5は「見た目に関する設定は全てCSSに依存させる」ことを宣言しているため、CSSで使用できないalign属性は生存できなくなったというわけです。

もちろんHTML5以前の環境なら普段通り使用できますので、自身の環境を確認して使い分ける必要があります。

ではHTML5以降はどうすれば良いのかという部分についてですが、HTML5以降では代替として、元々CSSプロパティとして活躍していた「text-align」を使用すれば解決します。

text-alignの記述は次のようにします。

  1. text-align: start | end | left | right | center | justify | match-parent | justify-all

若干解り難いかもしれませんので、補足を入れておきます。

text-alignの値には [ start | end | left | right | center | justify | match-parent | justify-all ] のうちどれか一つを指定します。

text-alignの注意点

text-alignは「要素内のインライン要素の配置を指定するプロパティ」となっています。

解りやすく例を挙げるなら、divタグの中に記述しているpタグにtext-alignを指定しても適用されないということです。

「divタグ」「pタグ」どちらもブロックレベル要素であるため、「要素内のインライン要素」という適用枠に当てはまらないために起きる現象です。

これを回避するためには「margin」や「float」を駆使して指定していく必要があります。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. 	div {
  7. 		border: solid #000000 1px;
  8. 		background-color: #FF9091;
  9. 		width: 500px;
  10. 		margin: 2em 0 0 2em;
  11. 	}
  12. 	p {
  13. 		border: solid #000000 1px;
  14. 		background-color: #C4C9FF;
  15. 		width: 100px;
  16. 	}
  17. 	.left {
  18. 		margin-right: auto;
  19. 	}
  20. 	.center {
  21. 		margin-left: auto;
  22. 		margin-right: auto;
  23. 	}
  24. 	.right {
  25. 		margin-left: auto;
  26. 	}
  27. </style>
  28. <title>alignのサンプルコード</title>
  29. </head>
  30. <body>
  31. 	<div>
  32. 		<p class="left">ブロック要素</p>
  33. 		<p class="center">ブロック要素</p>
  34. 		<p class="right">ブロック要素</p>
  35. 	</div>
  36. </body>
  37. </html>

表示結果

まとめ

今回は「HTMLで左寄せを行う方法」として、align属性とtext-alignプロパティについての解説を行ってみましたが、いかがでしたか？

画像やテキストを左・右・中央に振るならalignでも同じことが出来ますが、根本的にHTML属性とCSSプロパティという違いがあります。

またalignを使用する際にはHTML5からは廃止された属性ということは必ず頭に入れておきましょう。

こういった情報を理解していないといざ設定しようと思った場合に「あれ？alignが反映されない…」ということにもなりかねませんので、しっかりと理解できるよう何度も読み返しましょう。

 

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。