バナー画像

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属性の属性値は次の通りになります。

ブロック要素、セル要素の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属性の属性値は次の通りになります。

矩形要素の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属性を指定します。

ポテパンダの一言メモ

align属性は水平方向、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属性は非推奨とされていますので、ご自身の開発環境に合わせて使い分けてください。

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

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

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

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

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

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

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

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

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

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

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