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

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。

Web Components

1つのWebページに複数のHTML要素サンプルを記述する

1つのWebページに複数のHTML要素サンプルを記述する方法を紹介します。

Web

Firefox で DNS-over-HTTPS (DoH) を有効にする方法

Firefox で DNS-over-HTTPS (DoH) を有効にする方法について説明しています。

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …

Web

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

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