CSS入門:コンテンツを中央寄せ(センタリング)する方法

    • このページをはてなブックマークに追加

    公開日:2016年12月05日 最終更新日:2021年08月16日

    CSSでコンテンツを中央寄せする方法について解説します。テキストなどのインライン要素や段落や表といったブロックレベルの要素の中央寄せをどのように実現するのか?やホームページ全体を真中に寄せる方法についてサンプルをもとに説明します。

    目次

    1. 「text-align」プロパティでインライン要素を中央に寄せる

    ● 基本の書式【text-align: center】

    インラインの要素を中央寄せにする場合は「text-align」プロパティを使います。「centre.html」をコピーしてPC上の任意の場所に保存して下さい。ファイルの種類を「UTF-8」にして保存します

    ●center.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset=”utf-8″>
    <title>CSS入門-中央寄せの方法</title>
    <style>
    h1{
    text-align: center;
    }
    .center{
    text-align: center;
    }
    </style>
    </head>
    <body>
    <h1>要素の中央寄せ</h1>
    <p class="center">「text-align」プロパティを使ってテキストを中央に寄せています。</p>
    </body>
    </html>

    「text-align」プロパティの値に「center」を入れるとHTML要素の中央に寄せをすることができます。"h1"の大見出しと段落(p)要素を中央に寄せています。

    ●ブラウザーの表示

    center1

    ▲ページトップへ戻る

    2. 「margin」プロパティでブロックレベルの要素を中央に寄せる

    ● 基本の書式【margin: auto】

    ブロックレベルの要素を真ん中に寄せる場合には「margin」プロパティを使います。「center.html」を編集して表示を確認してみましょう。

    ●center.html

    <style>
    ・・・省略・・・
    .center{
    text-align: center;
    }
    .center_b{
    border: 1px solid #aaa;
    width: 200px;
    height: 100px;
    background: #AAAAAA;
    margin: auto;
    }
    </style>
    </head>
    <body>
    <h1>要素の中央寄せ</h1>
    <div class="center_b">
    <p class="center">「text-align」プロパティを使ってテキストを中央に寄せています。</p>
    </div>
    </body>

    ブロックレベルを分かりやすく表示するために、枠線(border)の指定や背景色(background)を設定しています。「margin」プロパティの値を"auto"とすることでブロックレベルの要素を自動で調整し中央寄せで表示しています。

    ●ブラウザーの表示

    center2

    「margin: auto;」を記述しないとブロックは左寄せで表示されます。

    ●ブラウザーの表示

    center3

    ▲ページトップへ戻る

    3. ホームページ全体を中央に寄せる

    ● 基本の書式【text-align: center】

    次にホームページ全体を中央寄せで表示する方法について見てゆきましょう。「center.html」を編集します。

    ●center.html

    <style>
    body{
    text-align: center;
    }
    div#center {
    width: 450px;
    height: 800px;
    text-align: left;
    background: #AAAAAA;
    margin: auto;
    }
    h1 {
    text-align: center;
    }
    ・・・省略・・・
    </style>
    </head>
    <body>
    <div id="center">
    <h1>要素の中央寄せ</h1>
    <p>「margin」プロパティを使ってページ全体を中央に寄せています。</p>
    </div>
    </body>

    ページ全体(body内にあるタグ全て)を<div>タグで囲い、一番外側のdivブロックに対して中央寄せの設定をします。ブロックの中央寄せですので「margin」プロパティを使います。ページ全体に一つの設定ですのでid属性に設定するようにdiv要素のIDセレクタ(div#center)に「margin: auto;」を記述します。ページ全体の背景色(background)や幅(width)・高さ(height)をCSSで決めています。一番外側のdivタグのid属性としてIDセレクタ名("center")を指定します。IDセレクターで指定した幅を維持しながらブラウザーの幅に応じて自動的にdivタグの領域が中央寄せになります。 対して

    ●ブラウザーの表示

    center4

    ページ内の配置は「text-align」プロパティで調整することができます。

    ●center.html

    <style>
    body{
    text-align: center;
    }
    div#center {
    width: 450px;
    height: 800px;
    text-align: left;
    background: #AAAAAA;
    margin: auto;
    }
    h1 {
    text-align: center;
    }
    p.date{
    text-align: right;
    }
    ・・・省略・・・
    </style>
    </head>
    <body>
    <div id="center">
    <h1>要素の中央寄せ</h1>
    <p class="date">2016年○月△日</p>
    <p>「margin」プロパティを使ってページ全体を中央に寄せています。</p>
    </div>
    </body>

    ●ブラウザーの表示

    center5

    クラスセレクタの「p.date」を追加し。「text-align」プロパティの値に"right"を指定して日付の段落を右寄せに、大見出し(h1)は中央寄せで表示しています。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Vue.js/HTML/CSS/JavaScript】フロントエンドエンジニア★HR企業での人材管理プラットフォーム開発

    月額単価 :50万円〜60万円

    HRテックや医療テックなど様々な分野で活躍をしている企業内で新たに2つのシステム開発を行っており、一...

    フリーランス

    【Vue.js(Nuxt.js)/TypeScript/HTML/CSS】フロントエンドエンジニア★不動産業向けDX支援プラットフォーム開発他

    月額単価 :90万円〜

    同社は、不動産業界向けDX支援プラットフォームをはじめ、複数の自社プラットフォームを展開している企...

    フリーランス

    【JavaScript(TypeScript)/React/Vue/Angular】フロントエンドエンジニア★クラウド郵便受取サービスの開発

    会社に届く郵便や宅配物の官営をスマートにするSaaSを展開している企業内で、フロントエンド開発をご担...

    正社員

    【Go言語】リードエンジニア|生体認証システムの開発

    年収 :400万円〜

    Liquidでは顔認証による本人確認プラットフォーム「LIQUID eKYC」をリリースし、現在はeKYCの企業への導...

    株式会社Liquid