【HTML初心者入門】align属性とは?使い方も解説!

2021.09.09

みなさんはHTMLの学習をしていませんか?

今回の記事では<align>属性の使い方や注意点について紹介していきます!

要素内容の左右配置を決める

<align> 属性は要素内容の配置方向を設定するための属性です。属性値に方向を示す文字列を指定することで、要素内容の配置方向を設定することができます。属性を設定する要素によって、指定できる値は異なります。


「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

記載方法

<タグ名 align=”値”>

要素ごとの使用法

1.ブロック要素、セル要素

<h1>、<p>、<div>、<table>、<caption>、<tr>、<th>、<td> などの align 属性では、要素内のデータの横方向の表示位置を指定します。

left :左寄せで表示します。
center :中寄せで表示します。
right :右寄せで表示します。
justify:均等割付で表示します。

2.矩形要素

<img>、<textarea>、<select>、<iframe>、などの矩形インライン要素における align 属性では要素と周りのテキストの位置関係を指定します。

基本的には画像の上端、中央、下端を、まわりのテキストや画像の指定した位置にあわせます。

top :同じ行に存在する一番高いテキストや画像の上端に画像の上端を合わせます。
middle :HTML4.01 の仕様では、同じ行に存在するテキスト(画像は除く)のベースラインに画像の中央を合わせます。実際は、各ブラウザで独自のアルゴリズムを用いて位置決めしているようです。
bottom :baseline と同じ動作をします。
baseline:同じ行に存在する一番低いテキスト(画像は除く)のベースラインに画像の下端を合わせます。
left :画像を左端によせ、周りをテキストで回り込みます。回り込みを解除するには <br> の clear 属性を用います。
right :画像を右端によせ、周りをテキストで回り込みます。回り込みを解除するには <br> の clear 属性を用います。

サンプル

[html] <!DOCTYPE html>
<html>
<head>
<title>WEBページ演習</title>
</head>
<body>
<table border=”3″ width=”100%”>
<tr>
<td height=”100″>指定なし</td>
<td align=”left”>左寄せ</td>
<td align=”center”>中央揃え</td>
<td align=”right”>右寄せ</td>
</tr>
</table>
<table border=”3″ width=”100%”>
<tr>
<td height=”100″>指定なし</td>
<td valign=”top”>上揃え</td>
<td valign=”middle”>中央揃え</td>
<td valign=”bottom”>下揃え</td>
</tr>
</table>
</body>
</html>
[/html]

・HTMLのタグについてまとめた記事もあります。参考にしてください。

【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

まとめ

初心者の方向けにalign属性を紹介していきましたが、いかがでしたか?

alignタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5