CSSで画像の中央揃えにする方法

こんにちは、佐藤優里 (@engneerlabo)です。
フリーランスWebデザイナーとして主にホームページ制作をしています。
このブログでは、HTMLCSSで画像の中央揃え（中央寄せ）にする方法について解説していきます。

ぺんぺん

画像の中央寄せってどうやってやるの？できれば難しい記述なく作れる方法を教えてください。

以上のような、画像や文字の中央寄せに関するお悩みにお答えします。

中央寄せはHTMLCSSの一番最初に突き当たる壁ですよね、もし読み進めてみても分からないことがあれば今月は夜20時に無料の自習室を開催していますのでそこでご質問下されば！

佐藤先生

IMGタグの基礎知識

HTMLの<img>タグは、ウェブページに画像を埋め込むために使用される要素です。
以下に<img>タグの基本的な使用法と注意点について説明します。

IMGタグの使用方法

基本的な使用法は次のようになります

ここで、src属性は、画像のURL（ウェブ上の場所）またはファイルパス（ローカルの場所）を指定します。
alt属性は、画像が表示できない場合に表示される代替テキストを提供します。これは、視覚障害のあるユーザーや画像を読み込むことができない状況に対応するために重要です。

IMGタグの注意点

<img>タグは閉じタグが必要ありません。これは「空要素」または「自己終了要素」であり、開始タグだけで完結します。src属性は必須です。これがなければブラウザは何を表示すればよいかわからず、画像が表示されません。alt属性は、画像が何らかの理由で表示されない場合、または視覚障害を持つ人がスクリーンリーダーを使用してウェブページを閲覧する際に、画像の内容を説明するためのものです。つまり、alt属性はウェブのアクセシビリティを向上させるために重要です。

widthとheight属性を使って、画像の表示サイズを指定することもできます。ただし、これらの属性を使用する場合は、元の画像のアスペクト比（幅と高さの比率）を保つことが重要です。それを維持しないと、画像が歪んで表示される可能性があります。<img>タグはインライン要素なので、他のインライン要素と同じ行に配置されます。

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

CSSで画像を中央揃えにしたいときは、まずHTMLで<img>タグを<div>タグで囲ってあげます。これは基本的なIMGタグの使い方です。IMGタグは、基本的に、divタグで囲ってあげましょう。実際に、DIVタグで囲ってみましょう。
そうすると、このようなかたちになるはずです。

これが基本的な作り方です。どちらにせよIMGタグに横幅を指定しないといけないので、DIVタグにはクラス名は付けます。

CSSで画像を中央寄せする時の２パターン

主に２パターンの中央寄せがあります。上記のようにDIVタグの中に存在するIMGタグに横幅100％を指定していれば一番使い勝手が良いのですが、以下のパターンにあてはまればCSSの書き方は変わってきます。

DIVタグの中で、画像を中央寄せしたい場合

DIVの中にいる画像がDIVの横幅の領域よりも狭い場合にこの指定で画像を中央寄せにできます。DIVタグのなかの画像を中央寄せにしたい時は親要素の<div>タグにCSSでtext-align:center;を指定します。そうすると、画像はDIVタグの中で中央寄せになります。

しかしDIVタグの領域にIMGタグが100％指定してある時は、この指定をしてももちろん動かないですね。なぜなら中央に寄る為の余白がそもそもないわけだから動きようがないです。簡単なことですが初心者が陥りがちな箇所です。

DIVタグごと中央に寄せたい場合

DIVタグの領域ごと中央寄せにしたい時は、DIVタグにCSSでmargin:0 auto; を指定して画像を中央寄せにします。

この使い方が分かれば基本画像の中央寄せがうまくいかないことはないのですが、初心者が陥りがちなミス事例を以下で解説してみます。

CSSで画像が中央寄せできない原因と対処法

画像タグを使う時にとても大切な考え方があります。それはimgタグというものは、囲っているDIVタグに横幅を指定していたとしても、IMGタグそのものにもCSSをあてないとDIVタグの横幅を飛び越えて画像は原寸大の大きさで表示されてしまいます。それは、画像自体がそのDIVタグの横幅よりも大きい場合、そしてCSSで画像の大きさを制限していないためです。

<img>タグに対してCSSを適用して、その大きさを制限しないと、画像はその親要素の横幅を超えて表示されてしまいます。

このCSSの設定は、img-boxクラスの中にあるすべての<img>タグに適用され、画像の最大幅がその親要素の幅と同じになります。height: auto;の設定により、画像の高さは自動的にその幅に合わせて調整されます。これにより、画像の比率が保たれ、画像が歪むことはありません。

height: auto;　は実際あってもなくても大丈夫です。

この設定を使用すると、画像はDIVタグの横幅を超えて表示されなくなります。

画像の親要素ごと中央寄せはmargin: 0 auto;

これはIMGタグを囲っているDIVタグに対してCSSをあてます。

ブロック要素の中央寄せをするための margin: 0 auto; は一般的なテクニックですが、これが適用できるのは主にブロック要素の水平方向の中央寄せの場合です。
また、このテクニックを適用するためには、要素の幅が指定されていることが必要です。

このように書きます。

marginは、ブロック要素の外側の余白を調整することになります。
margin 0 autoの意味は、magin-top:0;(上）margin-right:auto;（右）margin-bottom:0;（下）margin-left:auto;（左）です。

左右がautoというのは左右の余白を均等にしますよ。ということです。
これで画像の中央寄せは実現することができます。

 IMGタグを中央寄せは text-align: center;

text-align:center; は、DIVタグの中でめいいっぱい100%画像を表示させるようCSSをあてた場合にはtext-align:center;は効きません。
なぜなら、画像自体を中央寄せにさせるには、DIVタグの中に余白がないと画像を中央寄せにすることができませんね。
今回はIMGタグに100%を指定しているので、そもそもDIVの中には
中央寄せにできる余白が存在しませんからtext-align-center;は効かないということです。

中央寄せにするtext-align:center; が使われるパターン

text-aligncenterは、画像そのものが、DIVタグの横幅よりもサイズが小さい時に中央寄せにすることができるCSSです。
図解で説明するとこういった場面です。

こういった場合は、DIVの横幅よりも画像自体のほうが小さいですよね。
20％余っているので、こういった時に、DIVに対してtext-aligncenterを指定すると
余っている20％の余白が均等になり画像は中央に寄ります。

なぜtext-aligncenterをIMGタグではなくてDIVタグに指定するかというと、
IMGタグはインライン要素だからです。
インライン要素にtext-aligncenterをかけても効きません。

IMGタグはインライン要素

インライン要素は、横幅や高さを指定することはできず、基本的に文章に改行が入らず横並びになる要素となります。例えば、imgタグのみで複数コードを書いた場合、インライン要素のままでは画像は横並びに配置されます。画像を真ん中で配置したい場合は、divタグで囲うようにしてブロック要素にする必要があります。そのため、多くの場合インライン要素はブロック要素の中にあり、補助的な役割をしています。

インライン要素を扱うには注意が必要

<img>タグはインライン要素ですが、ブロック要素とは異なる特性を持つため、使用する際には以下の点に注意が必要です。

インライン要素では上下のmarginとpaddingが適用されません。そのため、<img>タグに対してこれらのプロパティを使用してスペースを設けることはできません。スペースが必要な場合は、<img>タグをブロック要素（例えば<div>）で囲むか、またはdisplayプロパティを使用して<img>をブロック要素として扱うことが可能です。

この点注意を理解しておけば、<img>タグを使って画像を効果的に配置し、ウェブページのデザインを改善することができます。

IMGタグはブロックレベル要素に変換が可能

IMGタグは、CSSの display プロパティを使用して、要素がデフォルトでインライン要素であってもブロック要素として振る舞うようにすること（あるいはその逆）が可能です。ブロックレベル要素のタグは、名前の由来通り箱のような使い方をする要素になります。
ブロックレベル要素のイメージとしては、webサイトにはたくさんの情報が囲まれており、その囲んでいる部分がブロックレベル要素です。

ブロック要素はインライン要素と違い、横幅と高さを指定することができ要素の前後やタグの終わりは改行されます。

例えば[margin,padding]タグを使って余白を指定する事ができます。

CSSで画像を中央寄せさせる為のコツまとめ

CSSで中央揃えにする時のコツについて簡単に解説していきます。

この２つのことを、忘れないよう意識しながら取り組んでみましょう。

CSSを使って上手く中央寄せにするためには、インライン要素とブロック要素の違いを理解することや、widthを上手く指定することが大切になってきます。
本記事では、初心者の方でも分かりやすくCSSを使って左右中央揃えにする方法を解説したのでぜひ参考にしてみてください。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。

佐藤先生