【HTML】align属性の使い方まとめ(center/right/left)
  • facebookページ
  • twitterページ
  • 2020.02.10

    【HTML】align属性の使い方まとめ(center/right/left)

    align属性とは?

    align属性とは、要素内容の配置を決める属性のことです。

    align属性の属性値に方向・位置を設定することで、要素内容の配置が決まります。

    ※HTML4.01ではalign属性は非推奨とされています(参考:https://www.tagindex.com/html_tag/basic/deprecated.html

    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”を属性値として記述します。

    ■表示結果

    指定なし

    左寄せ表示

     

    中央寄せ表示

     

    右寄せ表示

    それぞれ指定した位置に文字列が配置されているはずです。

    justify(均等割付で表示)

    次に、justifyで均等割付した場合の表示を確認してみましょう。

    均等割付にする場合は、pタグにalign=”justify”を記述します。

    ■表示結果

    ■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”を属性値として記述します。

    ■表示結果

    指定なし 上揃え 中央揃え 下揃え

    align属性が効かない時は?

    align属性が効かない時はどうすればいいですか?

    HTML4.01ではalign属性は非推奨とされています。これに当てはまっていないか確認してみましょう。

    もしくは、「text-align」や「vertical-align」を利用してみるのもよいでしょう。

    まとめ

    HTMLのalign属性について解説しました。

    align属性は水平方向、valign属性は垂直方向の表示位置の指定が可能です。

    それぞれ使い分けて表示位置の指定をしてみてくださいね。

    また、HTML4.01ではalign属性は非推奨とされていますので、ご自身の開発環境に合わせて使い分けてください。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料25万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE