ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


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

ファーストビュー ファーストビュー ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

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

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


初心者の方は画像やテキストを中央寄せにする時に、CSSを使って中央揃えにするのって難しそうなイメージを持たられてる方はいませんか。

私も最初はどうやって、画像やテキストを中央寄せにするのか悩んでいました。

本記事では、CSSを上手く使って画像やテキストを中央揃えにする方法について分かりやすく解説していきます。

画像を中央寄せする方法


画像を中央揃えにしたいときは、HTMLで<div class>を指定した親要素にCSSを使ってtext-align:center;を指定します。

そうすると、画像や文字が中央寄せになる仕組みになっています。

CSSでtext-align:centerをしていない場合は、自動的に画像や文字が左上に表示されます。

親要素に対して”text-align:center”を指定することで画像が、中央寄せになるということです。

See the Pen dyNzExx by (@mogisu) on CodePen.

画像をブロック要素で囲みmarginを使用して中央寄せする方法


先程はtext-align-center;で画像を中央寄せにしたのですが、text-align-center;はブロック要素の中にあるインライン要素を左右中央に寄せることはできますが。


ブロック要素自体を左右中央寄せにしたい場合はmargin:0 auto;を使用する必要があります。

margin 0 autoの意味は、magin-top:0;(上)margin-right:auto;(右)margin-bottom:0;(下)margin-left:auto;(左)となります。

こちらでブロック要素の、左右・上下・中央寄せは実現することができます。


See the Pen oNBpGVy by (@mogisu) on CodePen.

テキストを中央寄せする方法


文章を中央揃えにしたいときは、最初に解説したやり方同様に親要素の中にあるインライン要素にtext-align:centerを指定すると、文章や画像が中央による仕組みになっています。

右寄せにしたい場合は、”text-align:right”に変えると文字が右寄せになるということです。
左寄せは自動的になるのですが、まれに場合によって使う場面もあるかもしれないので説明します。

左寄にしたいときは、”text-align:left”に変えると左寄せになります。

See the Pen qBRpPrj by (@mogisu) on CodePen.

領域を中央寄せにする方法


領域を中央寄せにするやり方と先程解説した、ブロック要素で囲みmarginを使用して中央寄せする方法と変わりません。

marginは、ブロック要素の外側の余白を調整することになります。

ブロックレベル要素を左右中央寄せにするには横幅のサイズ設定は必須


ブロックレベル要素を左右中央寄せにするときは、横幅のサイズが設定されていない場合だと左寄せになっている状態になってしまいます。

そのため、width:100%に指定することで横幅が横いっぱいに指定するなどして調整してみましょう。

See the Pen WNREqNE by (@mogisu) on CodePen.

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


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

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

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

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

インライン要素の特徴


イメージとしては、インライン要素はブロック要素の中にあり補助的な役割をしています。


インライン要素は、横幅や高さを指定することはできず、基本的に文章に改行が入らず横並びになる要素となります。


例えば、imgタグのみで複数コードを書いた場合、インライン要素のままでは画像は横並びに配置されます。画像を真ん中で配置したい場合は、divタグで囲うようにしてブロック要素にする必要があります。

そのため、多くの場合インライン要素はブロック要素の中にあり、補助的な役割をしています。

インライン要素の代表的なタグ
img画像を貼り付けたい場合に使用するタグ
span囲んだ要素の文字や画像を強調するときに使用するタグ
font文字の色や種類大きさを指定するときに使用するタグ

CSSで中央揃えさせる為のコツ


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

  • ブロック要素で中央揃えにしたい場合は、widthを100%以下に設定する
  • 中央揃えにしたい場合は、インライン要素とブロック要素どちらの要素を中央揃えにしたいかを理解する
  • HTMLで<div>タグで囲うことを忘れないようにする


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

まとめ:


CSSを使って上手く中央寄せにするためには、インライン要素とブロック要素の違いを理解することや、widthを上手く指定することが大切になってきます。


本記事では、初心者の方でも分かりやすくCSSを使って左右中央揃えにする方法を解説したのでぜひ参考にしてみてください。

© 2022 エンジニアラボ【ワードプレスのテーマ構築を制作実績200件以上の現役ウェブデザイナーが初心者に分かりやすい制作テクニックを教えます】 Powered by AFFINGER5