ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


人の可能性が、
次の世界を
つくる

ファーストビュー 事業内容、ポートフォリオ、料金各種手続き、コンタクトファーストビュー 企業理念ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

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

画像とテキストを中央揃えにする方法

 

このブログでは、HTMLCSSで画像の中央揃え(中央寄せ)にする方法について解説していきます。


こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。

【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者 (https://coconala.com/users/2367002)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)

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

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

この記事の内容

  • CSSで画像の中央寄せの書き方
  • CSSで画像が中央寄せができない時の対処法
もし読み進めてみても分からないことがあれば1500円でレクチャーしています!
佐藤先生

 

IMGタグの基礎知識

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

IMGタグの使用方法

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

<img src="画像のURL" alt="画像の説明">

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

IMGタグの注意点

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

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

 

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


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

HTMLの内容

<div class="img-box">
  <img src="画像ファイルの場所" alt="画像の説明">
</div>

CSSの内容

.img-box img {
   width: 100%;
}

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

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

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

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

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

CSSの内容

.img-box {
   text-align:center;
}

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

 

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

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

CSSの内容

.img-box {
   margin:0 auto;
}

 

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

 

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


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

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

CSSの内容

.img-box img {
  width: 100%;
  height: auto;
}


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

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

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

 

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


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

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

このように書きます。

CSSの内容

.img-box {
width:50%;
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です。
図解で説明するとこういった場面です。

 

CSSの内容

.img-box {
width:50%;
}

img-box img {
wifth: 80%:
}

 

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

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

IMGタグはインライン要素


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

インライン要素の代表的なタグ
img 画像を貼り付けたい場合に使用するタグ
span 囲んだ要素の文字や画像を強調するときに使用するタグ
font 文字の色や種類大きさを指定するときに使用するタグ
a リンクの出発点や到達点を指定するタグ
button <button>タグで囲んだテキストや画像などがボタンとして表示されるタグ

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

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

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

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

 

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

 

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

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

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

 

ブロック要素の代表的なタグ
div  単体では意味を持たないタグですが、<div> で囲った部分をブロック要素にできる
p  文章だけを入力するときに使用するタグ
table <th><tr><td>などを組み合わせて表を作成するときに使用するタグ
form ユーザが入力した情報をサーバに送信するためのフォームを作る時に使用されるタグ

 

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


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

・HTMLで、IMGタグには必ずDIVタグで囲う
・中央揃えにしたい場合は、IMGタグなのかその親タグかどちらの要素を中央揃えにしたいかを理解する


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

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

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




 

 

© 2024 ホームページ制作なら制作実績200件以上の現役ウェブデザイナーへ直接依頼!東京都新宿区|渋谷区|目黒区|港区 Powered by AFFINGER5