align属性とは？
align属性とは、要素内容の配置を決める属性のことです。
align属性の属性値に方向・位置を設定することで、要素内容の配置が決まります。
※HTML4.01ではalign属性は非推奨とされています（参考：https://www.tagindex.com/html_tag/basic/deprecated.html）
align属性の記述方法
align属性は次のように記述します。
<タグ名 align="属性値">
属性値は要素によって指定できるものが異なります。
次は、 align属性の要素ごとの使用法について見ていきましょう。
align属性の要素ごとの使用法
align属性は、「ブロック要素、セル要素」と「矩形要素」によって使用できる属性値がちがいます。
それぞれの属性値について説明しますね。
①ブロック要素、セル要素
ブロック要素とは、見出しや段落など1つのブロックとして認識される要素のことです。
次のようなタグがブロック要素になります。
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
セル要素は、<th>や<td>など表のセルを示す要素のことです。
ブロック要素、セル要素で使うalign属性の属性値は次の通りになります。
- left：左寄せ表示
- center：中央寄せ表示
- right：右寄せ表示
- justify：均等割付で表示
②矩形要素
矩形要素は、「ブロックレベル要素の内容」として扱われる要素のことです。
<img>や<textarea>など文章の一部にあたるものになります。
インライン要素とも言われるものです。
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
ブロック要素、セル要素で使うalign属性の属性値は次の通りになります。
- top/texttop：同じ行の一番高いテキスト、画像の上端に合わせて表示
- center/middle/absmiddle：同じ行の一番高いテキスト、画像の上端と、一番低いテキスト、画像の下端の中央に表示
- bottom/baseline/absbottom：同じ行の一番低いテキスト、画像の下端に合わせて表示
- left：画像を左端によせて、周りはテキストが回り込んで表示
- right：画像を右端によせて、周りはテキストが回り込んで表示
align属性についてより詳しい使い方を知りたい場合は、リファレンスを参考にしてみるとよいでしょう。
http://www.tohoho-web.com/html/attr/align.htm
align属性の使い方【サンプル】
では、サンプルを用いて表示を確認してみましょう。
left（左寄せ）/center(中央)/right（右寄せ）
ここでは<p>にそれぞれalign属性を指定します。
左寄せにしたい場合は、pタグにalign=”left”を記述しましょう。
他も同様に、中央寄せにしたい場合は、align=”center”を、右寄せにしたい場合は、align=”right”を属性値として記述します。
<!DOCTYPE html>
<html>
<head>
<title>align属性サンプルページ</title>
</head>
<body>
<div style="background-color: #f5f5f5;">
<p>指定なし</p>
<p align="left">左寄せ表示</p>
<p align="center">中央寄せ表示</p>
<p align="right">右寄せ表示</p>
</div>
</body>
</html>
■表示結果
指定なし
左寄せ表示
中央寄せ表示
右寄せ表示
それぞれ指定した位置に文字列が配置されているはずです。
justify（均等割付で表示）
次に、justifyで均等割付した場合の表示を確認してみましょう。
均等割付にする場合は、pタグにalign=”justify”を記述します。
<!DOCTYPE html>
<html>
<head>
<title>align属性サンプルページ</title>
</head>
<body>
<div style="background-color: #f5f5f5;">
<p style="width: 30%; border: 1px #333 solid;">
■justifyなし<br>
ポテパンと一緒にHTMLのalign属性について学びましょう！Let's learn about the align attribute of HTML with potepan
</p>
<p align="justify" style="width: 30%; border: 1px #333 solid;">
■justifyあり<br>
ポテパンと一緒にHTMLのalign属性について学びましょう！Let's learn about the align attribute of HTML with potepan
</p>
</div>
</body>
</html>
■表示結果
■justifyなし
ポテパンと一緒にHTMLのalign属性について学びましょう！Let’s learn about the align attribute of HTML with potepan
■justifyあり
ポテパンと一緒にHTMLのalign属性について学びましょう！Let’s learn about the align attribute of HTML with potepan
ブラウザの幅を動かしてみると、justifyありなしの違いがわかりやすいです。
justifyありの方は、ボックスの右端に文字列が統一して表示されているのがわかります。
top（上揃え）/middle（中央揃え）/bottom（下揃え）
次に、<td>にそれぞれvalign属性を指定します。
上揃えにしたい場合は、tdタグにvalign=”top”を記述しましょう。
他も同様に、中央揃えにしたい場合は、valign=”middle”を、下揃えにしたい場合は、valign=”bottom”を属性値として記述します。
<!DOCTYPE html> <html> <head> <title>align属性サンプルページ</title> </head> <body> <table border="1" width="100%"> <tr> <td align="center" height="100">指定なし</td> <td align="center" valign="top">上揃え</td> <td align="center" valign="middle">中央揃え</td> <td align="center" valign="bottom">下揃え</td> </tr> </table> </body> </html>
■表示結果
| 指定なし | 上揃え | 中央揃え | 下揃え |
align属性が効かない時は？
align属性が効かない時はどうすればいいですか？
HTML4.01ではalign属性は非推奨とされています。これに当てはまっていないか確認してみましょう。
もしくは、「text-align」や「vertical-align」を利用してみるのもよいでしょう。
<!DOCTYPE html>
<html>
<head>
<title>align属性サンプルページ</title>
</head>
<body>
<div style="background-color: #f5f5f5;">
<p style="text-align: left;">左寄せ表示</p>
<p style="text-align: center;">中央寄せ表示</p>
<p style="text-align: right;">右寄せ表示</p>
</div>
<table border="1" width="100%">
<tr>
<td height="100">指定なし</td>
<td style="vertical-align: top;">上揃え</td>
<td style="vertical-align: middle;">中央揃え</td>
<td style="vertical-align: bottom;">下揃え</td>
</tr>
</table>
</body>
</html>
まとめ
HTMLのalign属性について解説しました。
align属性は水平方向、valign属性は垂直方向の表示位置の指定が可能です。
それぞれ使い分けて表示位置の指定をしてみてくださいね。
また、HTML4.01ではalign属性は非推奨とされていますので、ご自身の開発環境に合わせて使い分けてください。
align属性は水平方向、valign属性は垂直方向の表示位置を指定できます。