CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでWebサイト全体を水平方向に中央揃えする方法

CSSを使ってWebサイトのコンテンツを水平方向（左右）に中央揃えするには、max-width と margin: auto を組み合わせるのが最もシンプルで定番の方法です。コンテナ要素の最大幅を指定し、左右のマージンを自動（auto）に設定することで、画面サイズに関わらず要素が常に中央に配置されます。

以下に、実際のコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        background: rgb(255, 238, 0);
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .main {
        max-width: 600px;
        margin: auto;
        background: rgb(70, 32, 240);
        color: white;
        padding: 10px;
    }
    p {font-size: 40px;font-weight: lighter;}
</style>
</head>
<body>
<div class="main">
<h1>Center website horizontally example</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores 
quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, 
quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、以下のように表示されます。

CSSでWebサイト全体を水平方向に中央揃えする方法

仕組みの解説

この手法が機能するポイントは次の2つです。

  • max-width: 600px; … コンテナの幅が600pxを超えないように制限します。これにより、大きな画面でもコンテンツが横に広がりすぎるのを防ぎます。
  • margin: auto; … 左右の余白をブラウザが均等に計算するため、コンテナが画面の中央に配置されます。

なお、width の代わりに max-width を使うことで、スマートフォンなど狭い画面ではコンテナが画面幅いっぱいに拡張され、レスポンシブ対応にもなります。モダンなレイアウトでは Flexbox や CSS Grid を使った中央揃えもありますが、単純にブロック要素を水平方向へ中央配置したい場合は、この margin: auto の手法が最も手軽で確実です。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSだけで作る！Webサイトの「About Us」ページの作り方【サンプルコード付き】

    「About Us（私たちについて）」ページは、企業の理念やチームメンバーの顔ぶれを訪問者に伝えるために欠かせないページです。本記事では、HTMLとCSSだけを使い、メンバーごとのプロフィールカードを並べたスタイリッシュなAboutページを作成する方法を、実際のコード例とともにわかりやすく解説します。 作成するページの概要 今回作成するAboutページには、以下の要素が含まれています。 濃い紫の背景に白文字の見出し（h1）を配置したページヘッダー メンバーごとの「顔写真・名前・役職・Contactボタン」をまとめたカード型デザイン 画面幅650px以下でカードが縦に並び替わるレスポンシブ対応