CSSでボタンを中央に配置する方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSでボタンを中央に配置する方法について解説しています。ここではインライン要素の場合、ブロックレベル要素の場合、インラインブロック要素の場合それぞれの場合の書き方を説明します。サンプルコードと実行結果を確認しましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSでボタンを中央に配置する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
ボタンを中央に配置する方法について詳しく説明していくね！
お願いします！
ボタンを中央に配置する方法
ボタンとして装飾を施す場合、
- ブロックレベル要素
- インライン要素
- インラインブロック要素
それぞれの要素で画面の中央に配置するための方法が異なります。
では、それぞれの要素でボタンを中央に配置する方法をみていきましょう。
インライン要素の場合
インライン要素では、インライン要素を包括しているブロックレベル要素の親要素に対して、text-align: center; を指定することで画面の中央に配置できます。
なお、誤解されやすい部分として、インライン要素のmarginの左右の値に、autoを指定しても無効になります。
marginは、ブロックレベル要素の外側の余白を設定するために使用するプロパティです。
実際に書いてみよう
ブロックレベル要素の場合
ブロックレベル要素の場合、幅の値を指定しなければ、ブロックレベル要素の親要素の幅を100%の値として継承することになります。
しかし、そのような場合では画面の中央に配置できません。
ブロックレベル要素を画面の中央に配置するためには、ブロックレベル要素の親要素に対して、幅の差分が必要です。
marginの左右の値にautoを指定することで、差分が余白として使用することで画面の中央に配置できます。
実際に書いてみよう
インラインブロック要素の場合
インラインブロック要素は、インライン要素の特性を引き継いでいます。
インライン要素と同様に、インラインブロック要素を包括しているブロックレベル要素の親要素に対して、text-align: center; を指定することで画面の中央に配置することが可能です。
実際に書いてみよう
執筆してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
CSSでボタンを中央に配置する方法がよくわかったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
