◆当ページにはプロモーションが含まれています

HTML

【サンプル・解説】画面の上下左右中央にdiv要素を表示する【CSS】

みなさん、こんにちは。どんぶラッコです。今日は、画面の上下左右中央に要素を表示させたい場合のHTML/CSSの書き方を見ていこうと思います

グランくん
グランくん
…どういうこと?
どんぶラッコ
どんぶラッコ
百聞は一見に如かず。↓のようなものを作ろうとしているよ!よく新規会員登録の画面で見かけるんじゃないかな

左右寄せ、上下中央寄せはそれぞれできるけど、画面全体に対して上下中央よせを指定する方法は迷う方も多いと思います。

ということで、早速ポイントをお伝えした後、サンプルコードを解説していきたいと思います!

ポイント: body に height を指定する

いろいろな実現方法がありますが、今回は一番手っ取り早い body要素に高さを指定してあげる方法で上下左右寄せを実現していこうと思います。

ポイントは、body 要素に対して height:100% を指定してあげることです。もし何も指定しなかった場合、heightは body 要素の中にある各要素の高さ合計分しか表示されません。

body要素に height:100% を付与してあげることで、画面いっぱいに要素を広げてくれていることが見て取れますね。

さあ、実際に作っていきましょう!

サンプルプログラム(デモ)

See the Pen カードの上下左右中央表示サンプル by cha1ra (@cha1ra) on CodePen.

サンプルプログラムのコード

<div class="card-div">
  <div class="card">
    <h2>サンプルカード</h2>
    <p>カードを上下左右中央寄せで表示することができるサンプルです</p>
    <div class="right-text">
      <div class="button">了解</div>
    </div>
  </div>
</div>

body {
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.card-div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

.card {
  background-color: #fff;
  max-width: 300px;
  padding: 16px;
  border-radius: 8px;
}

.button {
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-block;
  background-color: #003366;
  color: white;
}

.right-text {
  text-align: right;
}

CSSを見ていきましょう。先ほども伝えたように body 要素に高さを指定していますね。

その後、その中の .card-div クラスを作成して、そちらに対しても 幅、高さを 100% で指定しています。 bodyクラスが高さ100%分広がってくれているので、その直下の .card-divクラスも画面いっぱいに広がってくれます。

その下地を作った上でで flex で上下左右寄せを実現しているんですね。

flexの扱いについてはこちらの記事を参照してみてください。

https://proglearn.com/2020/09/26/%e3%80%90%e8%a7%a3%e8%aa%ac%e5%8b%95%e7%94%bb%e3%81%82%e3%82%8a%e3%80%91displayflex%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e3%81%af%ef%bc%9fcss%e3%81%a7%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%83%ac%e3%82%a4/

このレイアウトは意外と使わなきゃいけない場面が多いので、今のうちから慣れておきましょう!

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です