Web

Flexbox を使ってページ全体を中央寄せにする

投稿日:2019年4月16日 更新日:

1. はじめに

CSS(スタイルシート) の Flexbox を使って ウェブページ全体を中央寄せにする例を紹介します。

2. やり方

以下の HTML があるとします。(body 要素以下を抜粋しています)

<body>
  <main>
    <h1>タイトル</h1>
    <div>
      ...
    </div>
    ...
  </main>
</body>

main 要素の中にコンテンツを記述する前提です。

このとき、以下の CSS を書くとページ全体が中央寄せになります。

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 5vw;
}
body > main {
  max-width: 100%;
}

body 要素にいくつかのプロパティを指定しているのですが、考え方の順番とともに各プロパティについて説明します。

body要素に指定したCSSプロパティ
順番 プロパティ 説明
1 display: flex
  • まず、body要素を フレックスコンテナにします。
2 flex-direction: column
  • フレックスコンテナの主軸方向を、縦(ブロック要素の並ぶ方向)にします。
3 align-items: center
  • フレックスコンテナ内の各アイテムを、交差軸方向(主軸に直交する方向)中央に配置します。
4 margin: 0 5vw ※ Flexbox とは直接関係ないプロパティです。おまけとして指定しました。

  • このままだと、コンテンツが横に長い場合に画面の端まで伸びる可能性があるので、左右のマージンを指定します。
  • vw単位を使うことで、ディスプレイの大きさによってマージンを変化させることができます。

これに加え main 要素には max-width:100% を指定していますが、これがないとコンテンツの横幅が長い場合に画面に収まらなくなってしまいます。

3. デモページ

今回のスタイルシートを適用したページを用意しました。

4. おわりに

body 要素直下に main などのブロック要素を挟まないといけませんが、かなり簡単に中央寄せができます。

参考

📂-Web

執筆者:labo


comment

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

関連記事

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …