中央寄せしたい！CSSでセンタリングする方法【初心者向け】
初心者向けにCSSで画像や文字をセンタリング(中央寄せ)する方法を解説。Webサイト上に画像などの要素を中央寄せさせたい時に便利です。サイトをデザインする際には常に必要となる知識なので、覚えておいて損はないでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでセンタリング(中央寄せ)する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
サイト内の画像を真ん中に表示したいという時にとても便利な技術です。初心者の方でも自分で書けるようになっておくと良いでしょう。
領域を中央寄せする方法、テキストや画像を中央寄せする方法を実際にソースコードを書きながら紹介しています。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
田島メンター！！画面内の要素を常に中央に配置したいのですが、どうしたらいいですか～？
色々方法があるけれど、最初に text-align : center を使ってみようか。
どうやって使えば良いでしょうか？
画像を囲っているdiv領域にCSSを付与するんだ。実際にやってみよう。
画像を中央寄せに表示する方法
まずは、画像を中央寄せに表示するサンプルを見てみましょう。
div領域内でimg要素をセンタリングして表示する
画像を中央寄せに表示させるためには、画像の外枠となるdiv要素にtext-align : center を付与します。
画像そのものではなく、親要素にCSSを付与することに注意しましょう。
また、div領域にtext-align : center を付与すると、領域内の子要素だけでなく、孫要素を含む全ての要素に効果が発生します。
効果は、「各インライン要素に発生し、センタリングの基準は各要素の1階層上の要素である」という点に注意しましょう。こちらの画像の場合、画像の親要素がdivであり、div領域の幅を基準に画像がセンタリングされていますね。ブロック要素には無効であることにも気を付けましょう。
上記の例では、わかりやすくdiv領域に border : solid 1px を付与して、枠が目に見えるようになっていますが、div領域が目に見えない場合は text-align : center を付与しても「何を基準にセンタリングされたのか」わからずに混乱することもあります。
div領域に border : solid 1px を付与することで中央寄せの基準が確認しやすいということも覚えておきましょう。
領域を中央寄せに表示する方法
div領域そのものや、text-align : center ではセンタリングできなかった要素を中央寄せするには、margin : 0 auto を使いましょう。
ブロック要素を margin : 0 auto でセンタリングして表示する
divなどのブロック要素を中央寄せするには、中央寄せしたい要素に margin : 0 auto を付与します。
img要素をセンタリングした時と違って、「div要素のセンタリング」という文字列は中央寄せになっていません。
この文字列はpタグの中にテキストを記述して表示していますが、今回このpタグには何もCSSを付与していないためです。
marginプロパティは、付与したブロック要素の外側の余白を調整するものです。ですから、上記のグラデーション領域の左右のマージンが自動調整されて、中央寄せされています。
「margin : 0 auto」は暗記されている方も多いと思いますが、0の部分は上下のマージンに相当するため、既存マージン指定と競合を起こして表示に不具合が起こる場合があります。その場合は、margin-left : auto、margin-right : auto と指定することで、縦方向に影響を及ぼさずにブロック要素のセンタリングができます。
CSSでセンタリングを成功させるコツ
実際にWEBサイトの画面をデザインしている時に、レイアウト表示に不具合が出てハマった！という方も多いと思います。
こうした状況を解決するためのヒントを記載しておきますので、ぜひ参考にしてください。
- インライン要素とブロック要素の違いを理解する
- 外枠のdiv領域のサイズ指定をする
- ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する
- ブロック要素内のテキストをセンタリングして不具合が起こる場合
1.インライン要素とブロック要素の違いを理解する
HTML要素は、インライン要素とブロック要素の2つに大別されます。
インライン要素とは、<img>タグや<span>タグが有名で、これらの要素は画面に横並びに表示されます。また、インライン要素特有の特性を持ちます。
ブロック要素とは、<div>タグや<p>タグが有名で、これらの要素は画面に縦並びに表示されます。また、デフォルトの幅が親ブロック要素の枠内100%に広がりますので、margin : 0 auto を指定しても、デフォルト幅では何も変化が起こりません。
2.外枠のdiv領域のサイズ指定をする
div領域は、デフォルトでは領域が存在しません。領域内に文字列や他要素があると、その分だけ高さが確保され、幅が100%広がります。
状況に応じて、枠内のコンテンツよりも大きめのサイズで height と width を指定して外枠を明確にしましょう。
3.ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する
センタリング処理は、大き目の枠内にある、枠より小さい要素を真ん中に移動させる処理ですので、ブロック要素のデフォルトの幅100%のままでは中央寄せ処理は成功しません。
中央寄せしたい枠内ブロック要素コンテンツに、width : 60% などの値を指定しましょう。
4.ブロック要素内のテキストをセンタリングして不具合が起こる場合
例えば、<p>タグで囲ったテキストを中央寄せにしたい場合、text-align: center を使うと、以下のように長めのテキスト文章が不自然に中央寄りになります。
このような場合には、<p>タグの幅をwidth : 80% 程度に調整して、margin-left : auto , margin-right : auto を付与することで、テキスト文章を左寄りにレイアウトした状態で、文章全体のブロックは中央寄せに表示するといった配置が成功します。
また、大枠のdivでtext-align : center を指定した状況で、文章そのものは左寄りにしたい場合、<p>タグにtext-align : initial を付与することで、テキスト中央寄せの指定を個別解除することができます。
ずっとCSSでハマっていた原因がやっとわかりました！
ブロック要素とインライン要素は別々に考える必要があるんだ。
CSSによる中央寄せデザインのサンプルプログラム
解説で登場した画面レイアウト表示に使ったプログラムをご紹介します。
実際にどんなCSSを適用しているのか、確認してみましょう
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HelloTechAcademy</title> <link rel="stylesheet" href="sample.css"> </head> <body> <p id="title">Hello TechAcademy !</p> <div id="mainArea"> <img src="https://techacademy.jp/magazine/wp-content/uploads/2020/06/css_centering_cafe.jpg"> <p id="text01">HTML要素には、ブロック要素とインライン要素があります。</p> </div> <div id="secondArea"> <div id="blockItem"> <p>こんにちは</p> </div> <p class="p-custom">div要素のセンタリング</p> </div> </body> </html>
CSS ( sample.css )
#title {
margin-bottom: 4px;
}
#mainArea {
width: 300px;
margin-bottom: 18px;
padding:2px;
border : solid 1px;
text-align: center;
}
#mainArea img {
width: 60%;
}
#text01 {
width: 80%;
margin-left : auto;
margin-right: auto;
text-align: initial;
}
#secondArea {
width: 300px;
height: 150px;
margin-top: 18px;
padding:2px;
border : solid 1px;
}
#blockItem {
width: 200px;
height: 80px;
padding-top: 25px;
background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
text-align: center;
margin: 0 auto;
}
.p-custom {
text-align: center;
margin-top: 2px;
}
まとめ
CSSでセンタリングするには、text-align : center や margin : 0 auto だけでなく、インライン要素やブロック要素、領域のサイズ確保など、思ったより多くの仕組みを理解する必要があります。
Webサイト制作においても必ず必要となる知識になるので、ぜひ覚えて実践でも使えるようにしておきましょう。
執筆してくれたメンター
| 寺谷文宏（Teratani Fumihiro）
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 テックアカデミーではフロントエンド、Javaコースを担当。 |
ハマった時に何を調べて、どう解決するかが重要なんだ。
今回、解決のコツをたくさん教えていただいたので、なんとかなりそうです。
要素や構造を、ひとつひとつ確認していくと、すんなり解決できるよ。
はい、がんばります。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
