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

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

関連記事

WordPress

WordPress の推奨環境

WordPress を動作させるための推奨環境については、以下のページに載っています。 About » Requirements — WordPress 最初に、 To run WordPress w …

Web

【WordPress】iThemes Security プラグインのスキャンがエラーになる原因の1つ

WordPress の iThemes Security プラグインのスキャンがエラーになる原因の1つを紹介します。

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Web

【HTML】picture 要素について

目次1. <picture> 要素とは?2. 仕様3. <source> 要素4. 利用例5. 実際に使用された画像がどれかを JavaScript で取得する6. 注意点7. …

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …