HTMLで画像を中央寄せする方法

HTMLで図を真ん中にするにはどうすればいいですか？

```html

HTMLで画像を中央寄せする方法

Webページを作成する際、画像を中央に配置したい場合があります。本記事では、HTMLで画像を中央寄せする様々な方法を紹介します。

タグについて

タグは、テキストや画像などのコンテンツを水平方向の中央に表示する際に使用されていました。中央寄せにしたい場合、タグで該当箇所を囲います。


<center>
  <img src="image.jpg" alt="画像の説明">
</center>

しかし、

タグはHTML4.01で非推奨となり、HTML5では廃止されました。現在では、スタイルシートを使用することが推奨されています。

スタイルシートを使った中央寄せ

スタイルシートを使うことで、より柔軟に画像を中央寄せすることができます。主な方法として、以下の3つを紹介します。

1. インラインスタイル

インラインスタイルは、特定の要素のみにスタイルを適用したい場合に使用します。style属性を直接タグに記述します。


<img src="image.jpg" alt="画像の説明" style="display: block; margin: 0 auto;">

プロパティ	説明
`display: block;`	画像をブロックレベル要素として扱います。これにより、横幅が自動的に100%になります。
`margin: 0 auto;`	上下のマージンを0に、左右のマージンを自動に設定します。これにより、中央寄せが実現されます。

2. 内部スタイルシート

内部スタイルシートは、同じHTMLファイル内の複数の要素にスタイルを適用したい場合に使用します。<style>タグで囲んで、<head>タグ内に記述します。


<head>
  <style>
    img.center {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明" class="center">
</body>

3. 外部スタイルシート

外部スタイルシートは、複数のHTMLファイル間でスタイルを共有したい場合に使用します。CSSファイルを作成し、<link>タグでHTMLファイルに読み込みます。

**style.css**


img.center {
  display: block;
  margin: 0 auto;
}

**HTMLファイル**


<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="image.jpg" alt="画像の説明" class="center">
</body>

まとめ

HTMLで画像を中央寄せする方法は、

タグを使用する方法と、スタイルシートを使用する方法があります。現在では、スタイルシートを使用することが推奨されています。スタイルシートを使用することで、より柔軟に画像を中央寄せすることができます。

質問と回答

Q1: なぜ<center>タグは非推奨になったのですか？

A1: <center>タグは、HTMLの構造と見た目を分離するという原則に反するため、非推奨となりました。スタイルシートを使用することで、HTMLの構造を維持したまま見た目を変更することができます。

Q2: インラインスタイル、内部スタイルシート、外部スタイルシートの使い分け方を教えてください。

A2: 基本的に、外部スタイルシート > 内部スタイルシート > インラインスタイルの順で優先度が高いです。特定の要素のみに適用したい場合はインラインスタイル、同じHTMLファイル内の複数の要素に適用したい場合は内部スタイルシート、複数のHTMLファイル間で共有したい場合は外部スタイルシートを使用します。

Q3: 画像を中央寄せする方法は、他にありますか？

A3: はい、他にFlexboxやGrid Layoutなど、より高度なレイアウトを実現するための手法があります。これらの手法については、別の記事で詳しく解説します。

```