【HTML】中央寄せ、左寄せ、右寄せする方法【初心者向け】

こんにちは。NOBUです。
今回はHTMLで中央寄せ・左寄せ・右寄せする方法をご紹介します。

HTMLのタグで、中央寄せ、左寄せや右寄せに指定したい場合は「align属性」を使用します。

■中央寄せ

(以下、タグをコピペして使用できます)

<p style="text-align: center;">この部分は中央に</p>

■左寄せ

<p style="text-align: left">この部分は左側に</p>

■右寄せ

<p style=”text-align: right”>この部分は右側に</p>

■使用例１ 通常の文字寄せ

<div align=”center”>第〇〇回 〇〇オフ会の報告</div>
<div align=”right”>2020/7/26開催</div>

■使用例２ 画像を使った寄せ

<div align=”center”><img src=”画像”></div>

<div align=”left”><img src=”画像”></div>

<div align=”right”><img src=”画像”></div>

■使用例３ 表を使った寄せ

<table border=”1″ align=”center”><caption>中央寄せ</caption>
<tbody>
<tr>
<th>見出</th>
<th>見出</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</tbody>
</table>

<table style=”height: 213px;” border=”1″ align=”center”>
<tbody>
<tr style=”height: 21px;”>
<th style=”height: 21px; width: 25%;” bgcolor=”#8b0000″><span style=”color: #ffffff ;”>ソース</span></th>
<th style=”height: 21px; width: 25%;” bgcolor=”#8b0000″><span style=”color: #ffffff ;”>パスタ</span></th>
<th style=”height: 21px; width: 50%;” bgcolor=”#8b0000″><span style=”color: #ffffff ;”>説明</span></th>
</tr>
<tr style=”height: 72px;”>
<td style=”height: 72px; width: 25%;” align=”center” nowrap=”nowrap” bgcolor=”#fdf5e6″>オイルベース</td>
<td style=”height: 72px; width: 25%;” align=”center” nowrap=”nowrap” bgcolor=”#FFFFFF”>ペペロンチーノ</td>
<td style=”height: 72px; width: 50%;” valign=”top” bgcolor=”#FFFFFF”>オリーブオイルでじっくり炒めたニンニクと赤唐辛子の辛味が効いたパスタ。シンプルなのに奥が深い人気のメニュー！</td>
</tr>
<tr style=”height: 72px;”>
<td style=”height: 72px; width: 25%;” align=”center” nowrap=”nowrap” bgcolor=”#fdf5e6″>クリームベース</td>
<td style=”height: 72px; width: 25%;” align=”center” nowrap=”nowrap” bgcolor=”#FFFFFF”>カルボナーラ</td>
<td style=”height: 72px; width: 50%;” valign=”top” bgcolor=”#FFFFFF”>卵黄と生クリームとチーズをベースにしたパスタ。カリカリベーコンと黒コショウの相性が最高！</td>
</tr>
<tr style=”height: 48px;”>
<td style=”height: 48px; width: 25%;” align=”center” nowrap=”nowrap” bgcolor=”#fdf5e6″>トマトベース</td>
<td style=”height: 48px; width: 25%;” align=”center” nowrap=”nowrap” bgcolor=”#FFFFFF”>ペスカトーレ</td>
<td style=”height: 48px; width: 50%;” valign=”top” bgcolor=”#FFFFFF”>エビとあさりの漁師風パスタ。ピリっと辛いトマトソースと新鮮な魚介の旨味がたまらない！</td>
</tr>
</tbody>
</table>

■まとめ

HTMLで寄せる方法はブログやサイトで記事を書くときに非常に役立つ知識です。ぜひご参考いただけたらと思います。

最後までお読みいただきありがとうございました。
「スキ」や「フォロー」していただけると大変励みになります。