HTMLで画像を完璧に中央配置する方法5選！初心者でも簡単にマスター

はじめに
●HTMLとCSSの基本
- ○HTMLの構造とは
- ○CSSの基本とスタイルの適用方法
●画像を中央に配置する基本的な方法
- ○サンプルコード1：HTMLのみで中央配置する
- ○サンプルコード2：CSSを使用して中央配置する
●応用的な中央配置テクニック
●よくあるエラーとその対処法
- ○画像が表示されない原因と解決策
- ○配置が崩れる場合のチェックポイント
まとめ

はじめに

HTMLとCSSは、ウェブページをデザインするための基本的な技術です。

これらの技術を使いこなすことで、自分だけのウェブサイトを作成したり、既存のサイトの外観をカスタマイズしたりすることができます。

特に、画像を中央に配置する方法は、プロフェッショナルなウェブデザインを目指す上で重要なスキルの一つです。

この記事では、初心者でも理解しやすいように、HTMLとCSSの基本から、具体的なスタイルの適用方法まで詳しく解説していきます。

●HTMLとCSSの基本

ウェブページを作成する際、HTML（HyperText Markup Language）はその骨組みを作るために使われます。

HTMLは、コンテンツをウェブブラウザにどのように表示させるかを定義するマークアップ言語です。

一方、CSS（Cascading Style Sheets）は、そのHTMLで作られたウェブページの見た目を整えるためのスタイリング言語です。

CSSを利用することで、テキストの色やサイズ、要素の配置など、ページのデザインを細かくコントロールできます。

○HTMLの構造とは

HTMLは、タグと呼ばれる特定のキーワードを使って文書の構造を定義します。

例えば、<html>タグで全体の開始と終了を表し、<head>タグ内ではページのタイトルやCSSファイルへのリンクなどを定義します。

そして、<body>タグの中には実際にブラウザに表示される内容が記述されます。

HTMLの基本的な構造を理解することは、ウェブページの作成において最も基本的かつ重要なスキルの一つです。

○CSSの基本とスタイルの適用方法

CSSを用いることで、HTML要素に対してスタイルを適用することができます。

CSSでは、セレクタと呼ばれる方法を使用して、スタイルを適用したいHTML要素を指定します。

例えば、pセレクタを使用すると、すべての<p>（段落）要素に対してスタイルを適用できます。

また、クラスやIDを用いることで、特定の要素にだけスタイルを適用することも可能です。

CSSのコードは通常、HTMLファイルの<head>タグ内か、別のCSSファイルに記述され、<link>タグでHTMLファイルにリンクされます。

それでは実際に、HTMLファイル内でスタイルを適用する基本的な方法を見ていきましょう。

HTML要素に直接スタイルを書き込む場合、<style>タグを用いて<head>内に記述することが一般的です。

たとえば、すべての<p>タグに文字色を赤に設定するには、このように書きます。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

このコードでは、すべての段落のテキストが赤色で表示されるようになります。

CSSを学ぶことで、こうしたデザインの詳細を自由自在に操ることが可能となり、より魅力的なウェブページを作成することができるようになります。

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

画像をウェブページの中央に配置することは、見た目の美しさだけでなく、コンテンツのバランスを取る上でも非常に重要です。

特に、ウェブデザインを学び始めたばかりの方にとって、このスキルは非常に役立ちます。

中央配置は見た目の印象を大きく左右し、ユーザーにプロフェッショナルな感じを与えることができます。

では、画像を中央に配置する基本的な方法を詳しく見ていきましょう。

最も単純な方法は、HTMLの<img>タグを使用して画像を挿入し、親要素にテキストの中央揃えを適用することです。

具体的には、親要素にtext-align: center;のCSSプロパティを使用します。

これにより、<img>タグが含まれるブロック内で画像が中央に表示されるようになります。

例えば、下記のHTMLコードを見てください。

<div style="text-align: center;">
  <img src="example.jpg" alt="中央に配置される画像">
</div>

このコードでは、<div>タグが親要素となり、そのスタイルでtext-align: center;が指定されています。

この中にある<img>タグの画像は、自動的に中央に配置されます。

この方法は、単純でありながら効果的で、HTML初心者にも扱いやすいテクニックです。

○サンプルコード1：HTMLのみで中央配置する

上記の方法を応用し、さらにHTMLだけで画像を中央配置する別の例を考えてみましょう。

ここでは、marginプロパティを使用して、画像を水平方向に中央に配置します。

marginプロパティのauto値は、左右のマージンを自動で調整し、要素を中央に寄せる効果があります。

<div style="width: 100%; display: block;">
  <img src="example.jpg" alt="中央に配置される画像" style="display: block; margin-left: auto; margin-right: auto;">
</div>

この例では、<div>タグが全幅を取るように設定されており、その中の<img>タグに対してdisplay: block;とmargin-left: auto; margin-right: auto;が適用されています。

これにより、画像は水平方向の中央にぴったりと配置されます。

○サンプルコード2：CSSを使用して中央配置する

さらにCSSを活用することで、画像の中央配置をより柔軟に行う方法を紹介します。

CSSを別ファイルに分けて記述することで、HTMLコードをすっきりと保ちつつ、スタイル変更が容易になります。

ここでのポイントは、CSSクラスを使ってスタイルを適用することです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="center">
    <img src="example.jpg" alt="中央に配置される画像">
  </div>
</body>
</html>

そして、styles.cssファイルには下記のように記述します。

.center {
  display: flex;
  justify-content: center;
}

このCSSコードでは、.centerクラスが適用された要素にdisplay: flex;とjustify-content: center;を設定しています。

これにより、<div>タグ内のどんな要素も水平方向に完璧に中央配置されるようになります。

フレックスボックスは、複数のアイテムを含むコンテナで効果を発揮しますが、単一の画像を中央に配置する場合でもその利点を享受できます。

●応用的な中央配置テクニック

中央配置の技術をさらに進化させる方法として、CSSのFlexboxやGridなどのモダンなレイアウト手法を利用することがあります。

この技術は、レスポンシブデザインや複雑なレイアウトの実現に非常に有効です。

ここでは、それぞれの技術を使った応用的な中央配置のテクニックを見ていきましょう。

○サンプルコード3：Flexboxを利用した中央配置

CSSのFlexboxは、アイテムの配置を柔軟に制御できるプロパティを提供します。

Flexboxを使用することで、コンテナ内のアイテムを簡単に中央に配置することができます。

下記のサンプルコードは、Flexboxを使用して画像を水平および垂直方向に中央配置する方法を表しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 画面の高さに合わせています */
    }
    .center-img {
      width: 50%; /* 画像の幅を50%に設定 */
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="example.jpg" alt="中央配置された画像" class="center-img">
  </div>
</body>
</html>

このコードでは、.containerクラスにdisplay: flex、justify-content: center、およびalign-items: centerを設定しています。

これにより、画像はコンテナ内で完全に中央に配置されます。

画像のサイズは容器の50%に設定していますが、これは必要に応じて調整可能です。

○サンプルコード4：Gridを使用したより柔軟な配置

CSS Gridを使用すると、より複雑なレイアウトも簡単に作成できます。

Gridは、ページを複数の列や行に分割して、アイテムを所定の位置に配置することができるため、デザインの自由度が格段に上がります。

下記のサンプルコードでは、Gridを使用して画像を中央に配置しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .grid-container {
      display: grid;
      place-items: center;
      height: 100vh;
    }
    .center-img {
      width: 50%; /* 画像の幅を50%に設定 */
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <img src="example.jpg" alt="中央配置された画像" class="center-img">
  </div>
</body>
</html>

このコードでは、.grid-containerにdisplay: gridとplace-items: centerを設定することで、画像を縦横両方向に中央配置しています。

CSS Gridのplace-items: centerは、簡単に要素を中央に持ってくることができる強力なプロパティです。

○サンプルコード5：JavaScriptを活用した動的な配置調整

JavaScriptを使用すると、動的に要素の配置を調整することができます。

たとえば、ブラウザのサイズが変更されたときに、自動的に要素を中央に配置し直すことが可能です。

下記のサンプルコードでは、JavaScriptを使用して画像を動的に中央配置する方法を表しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .dynamic-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <script>
    window.addEventListener('resize', centerImage);
    function centerImage() {
      const img = document.querySelector('.dynamic-center');
      img.style.top = `${window.innerHeight / 2 - img.offsetHeight / 2}px`;
      img.style.left = `${window.innerWidth / 2 - img.offsetWidth / 2}px`;
    }
  </script>
</head>
<body>
  <img src="example.jpg" alt="動的に配置された画像" class="dynamic-center">
</body>
</html>

このコードでは、画像にposition: absoluteとtransform: translate(-50%, -50%)を適用し、初期位置を画面の中心に設定しています。

さらに、ウィンドウのサイズが変更されるたびにcenterImage関数が呼ばれ、画像が新しい中心位置に再配置されます。

これによって、どのデバイスや画面サイズでも、常に画像が中央に表示されるようになります。