CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像を中央に配置する方法

画像を中央に配置するには、CSSの display: block を指定したうえで、margin-left と margin-right を auto に設定します。これにより、画像がブロック要素として扱われ、左右のマージンが自動的に均等化されて、画面の中央に表示されます。

画像を中央揃えにする基本の手順

  1. 画像に対して display: block; を指定する
  2. margin-left: auto; と margin-right: auto; を設定する
  3. 必要に応じて width で画像の幅を調整する

コード例

以下のコードを実行すると、画像がページの中央に配置されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            border: 2px solid orange;
            border-radius: 3px;
            padding: 7px;
         }
         img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
   </body>
</html>

コードの解説

  • border / border-radius / padding: 画像にオレンジ色の枠線、角丸、内側の余白を追加し、見た目を整えています。
  • display: block: img要素はデフォルトではインライン要素のため、ブロック要素に変更することでマージンの自動計算が有効になります。
  • margin-left: auto / margin-right: auto: 左右の余白を自動的に均等配分し、画像を水平方向の中央に配置します。
  • width: 50%: 親要素の幅の50%に画像幅を設定しています。中央揃えは幅が明確な場合により効果的に機能します。

補足：Flexboxを使った中央配置

CSS Flexboxを利用すれば、親要素側のスタイルだけで画像を中央に配置することもできます。

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

この方法では、.container クラスを持つ親要素の中にある画像が自動的に中央揃えされます。レイアウト全体を柔軟に制御したい場合におすすめです。

  1. CSSで画像を振動させる方法｜マウスオーバーで揺れるアニメーションの作り方

    CSSのアニメーション機能を使えば、JavaScriptに頼らずとも、画像を振動させたり小刻みに揺らしたりする演出を簡単に実装できます。本記事では、:hoverセレクターと@keyframesを組み合わせて、マウスオーバーした瞬間に画像が揺れ始めるアニメーションを作る方法を、実際のコード例とともにわかりやすく解説します。 サンプルコード 以下は、CSSだけで画像をシェイク（振動）させるコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="w

  2. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo