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

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

関連記事

プライバシー

ウェブブラウザのサードパーティ・クッキーを無効にする方法

目次1. サードパーティ・クッキーとは?2. サードパーティ・クッキーを無効にする手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Web

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

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

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

Web Components

たくさんの Web Components を利用するページを改善する

たくさんの Web Components を利用するページを改善する方法について説明します。

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …