「HTMLCSSで画像や文字を中央揃え（中央寄せ）にする方法」

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

初心者の方はCSSで画像やテキストを中央寄せにする時に、難しいイメージを持たられてる方はいませんか？本記事では、ＣＳＳを上手く使って画像やテキストを中央揃えにする方法について分かりやすく解説していきます。

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

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

<div>
<img>
</div>

これが基本的な作り方です。

DIVの中にいる画像を中央寄せにしたい時は親要素の<div>タグにCSSで
text-align:center;を指定します。そうすると、画像はDIVタグの中で中央寄せになります。またDIVタグの領域ごと中央寄せにしたい時は、DIVタグにCSSでmargin:0 auto; を指定して画像を中央寄せにします。

なぜ、IMGタグに指定しないでDIVタグに指定するかというと、それはIMGタグがインライン要素というわれる性質を持っているからです。
詳しくは、下記に解説しているので最後まで見てくださいね。

画像中央寄せできない原因は「IMGタグが原寸大の画像サイズで表示されてしまっている」から

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

★

なのでこの現象はどうして起きてしまうものなのでCSSで制御してあげる必要がありまます。
この考え方が理解できていないと画像のサイズによっては中央寄せすることが出来ません。

画像が中央寄せできないなら、先にCSSで画像サイズを設定

では、どのようにCSSを書いていけばDIVタグの中に画像がおさまってくれるのでしょうか。
早速レクチャーしていきたいと思います。

まずはHTMLで画像を表示させるコードを入力します。以下の記述が画像を表示させる為の基本形です。
IMGタグは裸では使わないので、DIVタグで囲ってあげます。

<div>
<img>
</div>

次にDIVタグに横幅を指定しましょう。
その為には、DIVタグにクラスを指定する必要があります。
ここではクラス名を　content としましょう。

<div class="content">
<img>
</div>

CSSで、DIVタグの横幅を指定します。

.content {
width:500px;
}

DIVタグに横幅を指定したら、その中で画像を１００％表示させてあげましょう。
ようは、DIVタグに指定した横幅のサイズが、画像サイズになるということです。
CSSはこのように書きます。

.content {
width:500px;
}

.content img {
wifth: 100%:
}

これで保存してブラウザを確認してみましょう。
原寸が大きい画像を使っていたなら、DIVタグの横幅の中にぴったり１００％おさまった画像が表示されたはずです。
これで、ようやく画像のサイズを調整することができました。
画像サイズを調整したい時には、DIVタグのほうの横幅を調整してくださいね。
基本的には、IMGタグの横幅は100%にしておきましょう。

画像のサイズが調整できたら、画像を中央寄せにするCSSを指定する

ここまで出来たら最後に、画像を中央寄せにするCSSをあてていきます。
これはINGタグを囲っているDIVタグに対してCSSをあてます。

このように書きます。

.content {
width:500px;
margin:0 auto;
}

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

★

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

上記の解説は、DIVタグの領域ごと中央寄せにするやり方です。
先程冒頭部分ではtext-align-center;で画像を中央寄せにすると伝えていますが
text-align-center;はDIVタグの中にある画像自体を中央寄せにする為のCSSです。

画像の領域を中央寄せはmargin0 auto 画像自体を中央寄せはtext-aligncenter

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

上記は、DIVタグの領域を、DIVの外側の余白を左右均等にして中央寄せにしている解説になります。

画像自体を中央寄せにするtext-aligncenterはどういった場面で使われる？

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

★

<div class="content">
<img>
</div>

.content {
width:500px;
}

.content img {
wifth: 80%:
}

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

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

インライン要素の特徴

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

ブロックレベル要素の特徴

ブロックレベル要素のタグは、名前の由来通り箱のような使い方をする要素になります。
ブロックレベル要素のイメージとしては、webサイトにはたくさんの情報が囲まれており、その囲んでいる部分がブロックレベル要素です。

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

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

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

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

・HTMLで、IMGタグには必ずDIVタグで囲う
・中央揃えにしたい場合は、インライン要素とブロック要素どちらの要素を中央揃えにしたいかを理解する

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

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

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

佐藤先生

長時間パソコンと向き合う方におすすめした優秀ガジェットまとめ

BoYataの「ノートパソコンスタンド」

私が購入したのは、BoYataの「ノートパソコンスタンド」。

肩こりには無縁の正しい姿勢で作業ができ、効率的に生産性を高めることができる「Boyataのスタンド」です。
家で使うのがメインで持ち運びはしない方、これは買いでしょう。アルミ製のしっかりしたスタンドです。
最大の利点は、高さや角度を細かく変えられること。
最小高度6cm～最大高度25cm、傾斜角度0°～45°まで自由自在に調整ができます。
そしてサイズ感はこんな感じです。

ちなみに耐荷重は20kg。とにかく安定感バツグンで、そのままタイピングしても揺れはありません。

人間工学に基づき設計されているらしく、姿勢が改善されるというもので
デスク作業は無意識に背筋が曲がってしまっている方多いと思うので、私もその一人でした。
かなり作業時の姿勢は改善されるので長時間のリモートワークが快適になります。
格段に仕事や作業のスピードが上がっているのが実感できます。
今まで辛かった首の痛みや肩こりの悩みが解消される人もいるんじゃないかなと思います。

オーディオテクニカ ATH-CKR30 カナル型イヤホン

仕事しながらどうしてもイヤホン使わないといけない時ってありますよね。
そういう時、安くていいから高品質なイヤホンがほしい。
このオーディオテクニカのイヤホンは、中価格帯の有線イヤホンにあります。
「Sound Realityシリーズ」の製品でありクリアで自然な音が出る
耳の奥までフィットする角度の構造で装着感と遮音性が良い
イヤホンポーチが付属。カラーバリエーションは６種類と豊富で
ナチュラルな音質なのが特徴です。私はこのイヤホンが安くて音質よくてお気に入りです。

色の種類（６種類） ブラック・イエローゴールド・シャンパンゴールド・ピンク・ブルー・レッド