サイト全体を中央に配置する方法

サイト全体センタリング方法
Pocket

今、あなたのホームページはブラウザの左側に配置された状態ですね?

もう大丈夫です。すぐに解決します。

以下にホームページ全体を中央に配置する方法を説明します。

このCSSを使います。

margin:0 auto;

下コードのHTMLを例に説明します。

上のHTMLをご自分の環境と合わせてください。

つぎに、CSSの記述です。

marginやpaddingがよくわからない方やCSSによる配置がよくわからない方はちょっと難しいかもしれませんがこちらの記事をみてください。

CSSのボックスによる配置方法の基本

上記コードの説明

まず、bodyにtext-align:centerを指定する。次に<div>タグで作ったボックスにtext-align:leftを指定するとホームページが中央に配置されます。

しかし、ブラウザによって処理の仕方が違います。margin(マージン)による指定をすると確実に中央に配置できます。

そこでmargin: 0 auto;を書くことで、中央に配置することができます。

もう少し詳しく説明すると、
#wrappでwidthを指定した<div id=”wrapp”>を中央に配置させたいのだから、このボックスにCSSを適用して、中央配置にします。

margin:0 auto;とはこのボックスの上下左右のスペースのことです。

margin-left: auto;
margin-right: auto;

と、書いても良いです。

この記述をすることで、ほとんどのブラウザに対応することが出来ます。よくわからない方は「CSSボックスによる配置方法の基本」をご覧ください。

完成イメージ

完成すると左右のスペースが同じ幅で、中央に配置されます。
サイトセンタリング方法

応用編2カラムの配置方法

2カラムにしてみましょう。

センタリングした#wrapの中に<div></div>を作り、CSSの「float:left;」「float:right;」で左右にコンテンツエリアを配置します。

あとは「border」を入れたり、「background-color」で配色したり、「width」でコンテンツの幅を変えたり、CSSで装飾していきます。

当サイト内には初心者向けの制作記事がありますので、参考にしてください。

カテゴリー ホームページ作成テクニック

シェア&ブックマークする

Pocket


  • おすすめ
    おすすめホームページ作成ソフト
  • EC
    ネットショップ作成ソフト
  • 低価格
    低価格ホームページ作成ソフト
  • ビジネス
    企業向けホームページ作成ソフト
  • フリー
    無料ホームページ作成ソフト
  • 人気
    人気ホームページ作成ソフト
  • スマホ
    スマートフォンサイト作成ソフト
  • Webオーサリング
    WEBオーサリングツール
  • 初心者
    初心者ホームページ作成ソフト
  • seo
    SEO対策ホームページ作成ソフト