HTMLで図を中央に配置する5つの方法

📋 対応バージョン

HTML HTML5

CSS CSS3

Edge 79+ ⓘ

IE 11 ⓘ

完全対応一部機能制限 ⓘ

はじめに
●図を中央に配置する基本的な方法
- ○1.1. text-alignを使う
- ○1.2. marginを使う
●CSSを使った中央配置の方法
- ○2.1. Flexboxを使う
- ○2.2. Gridを使う
●応用例とサンプルコード
- ○例1：テキストと図を同じ行に中央配置
- ○例2：複数の図を中央配置
まとめ

はじめに

美しく魅力的なウェブページを作成する上で、画像の配置は非常に重要な要素です。

特に、図を中央に配置することは、バランスの取れたレイアウトを実現する鍵となります。

この記事では、HTMLで図を中央に配置するための様々な方法を、初心者の方にも分かりやすく解説していきます。

基本的な手法から応用まで、ステップバイステップで学んでいきましょう。

技術を習得すれば、プロフェッショナルな印象を与えるウェブページを簡単に作成できるようになります。

●図を中央に配置する基本的な方法

まずは、HTMLで図を中央に配置する基本的な方法から見ていきましょう。

この手法は、シンプルながら効果的で、多くの状況で活用できます。

○1.1. text-alignを使う

HTMLで図を中央に配置する最も基本的な方法は、text-alignプロパティを使用することです。

imgタグは置換インライン要素として扱われるため、テキストと同様に中央揃えにすることが可能です。

<p style="text-align: center;">
  <img src="image.jpg" alt="サンプル画像">
</p>

このコードでは、画像を含む段落（p）タグにtext-align: centerスタイルを適用しています。

結果として、画像がページの中央に美しく配置されるでしょう。

○1.2. marginを使う

マージンを活用して図を中央に配置する方法も、非常に柔軟性が高く、多くのデザイナーに愛用されています。

この手法は、図がブロック要素として扱われる場合に特に効果を発揮するのが特徴です。

<style>
  img {
    display: block;
    width: 300px; /* 幅の指定が必要 */
    margin-left: auto;
    margin-right: auto;
  }
</style>
<img src="image.jpg" alt="サンプル画像">

このアプローチでは、画像をブロック要素として定義し、明示的な幅を設定した上で、左右のマージンを自動に設定することで中央配置を実現しています。

重要なポイントは、この方法を使用する際には必ず要素の幅を指定する必要があることです。

幅が指定されていない場合、マージンによる中央配置は機能しません。

これらの基本的な方法を理解することで、様々な状況に対応できる基礎が身につきます。

●CSSを使った中央配置の方法

HTMLの基本的な方法を押さえたところで、次はCSSのより高度な機能を使って図を中央に配置する方法を学びましょう。

これらの技術を習得することで、より柔軟で洗練されたレイアウトを実現できます。

○2.1. Flexboxを使う

Flexboxは、CSSの強力な機能の一つで、要素の配置を柔軟に制御することができます。

図を中央に配置する際にも、非常に効果的な手法といえるでしょう。

<style>
  .container {
    display: flex;
    justify-content: center;
  }
</style>
<div class="container">
  <img src="image.jpg" alt="サンプル画像">
</div>

このコードでは、コンテナ要素にFlexboxを適用し、justify-contentプロパティを使用して子要素（この場合は画像）を中央に配置しています。

Flexboxの美しさは、複数の要素がある場合でも簡単に中央揃えができることです。

○2.2. Gridを使う

CSSグリッドは、二次元のレイアウトを作成するための強力なツールです。

図を中央に配置する際にも、非常に効果的に使用できます。

<style>
  .container {
    display: grid;
    place-items: center;
  }
</style>
<div class="container">
  <img src="image.jpg" alt="サンプル画像">
</div>

このアプローチでは、コンテナ要素にグリッドを適用し、place-items: centerプロパティを使用して子要素を水平・垂直両方向で中央に配置しています。

place-itemsはjustify-itemsとalign-itemsを同時に指定する短縮記法で、完全な中央配置を実現するのに最適です。

これらのCSS技術を習得することで、より高度で柔軟なレイアウトを実現できるようになります。

●応用例とサンプルコード

ここまでで学んだ技術を組み合わせることで、より複雑で魅力的なレイアウトを作成することができます。

ここでは、実践的な応用例とそのサンプルコードを紹介いたします。

○例1：テキストと図を同じ行に中央配置

ウェブデザインでよく見かけるパターンの一つが、テキストと図を同じ行に配置し、それを中央揃えにするというものです。

この例では、Flexboxを使ってこのレイアウトを実現します。

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 要素間のスペースを確保 */
  }
</style>
<div class="container">
  <p>テキスト</p>
  <img src="image.jpg" alt="サンプル画像">
</div>

このコードでは、Flexboxを使用してコンテナ内の要素を水平方向（justify-content）と垂直方向（align-items）の両方で中央に配置しています。

さらにgapプロパティを追加することで、テキストと画像の間に適切なスペースを確保しているのがポイントです。

○例2：複数の図を中央配置

ギャラリーやポートフォリオのような、複数の画像を縦に並べて中央配置したい場合があります。

この例では、Flexboxを使ってこのレイアウトを実現しましょう。

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 画像間のスペース */
  }
</style>
<div class="container">
  <img src="image1.jpg" alt="サンプル画像1">
  <img src="image2.jpg" alt="サンプル画像2">
</div>

このアプローチでは、Flexboxのflex-directionプロパティを使用して要素を縦方向に並べ、align-itemsプロパティで中央揃えにしています。

gapプロパティにより、画像間に適切な余白を設けることで、見やすいギャラリーレイアウトが完成します。