新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CSSでWebサイトをセンタリングさせる方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

まあ、今さら感漂いますが一応自分に対しての覚書としてちゃんと残しておくことにしました。

僕の作るサイトは大概ウインドウがある程度大きくなるとセンタリングして表示させるようなデザインになっています。
いろいろ理由はありますが、スペースの無駄が嫌いなのと、シンメトリーが好きなのが主な理由。
かつてはTABLEタグでレイアウトして大本のTABLEタグに「align=”center”」を入れれば済んだことなのですが今となってはTABLEでのレイアウトなんてありえない時代。
ただ、これをCSSで実現するにはちょっとコツがいります。
以下その方法を解説します。

WEB

スポンサーリンク
 

サイト全体をセンタリングするレイアウトを考えます。
<body>タグ配下に<div>タグを配置し、任意のID(ここでは「naiyo」にした)を設定します。
こんなかんじ。

↑↑ここから上省略↑↑
<title>無題ドキュメント</title>
</head>
<body>
<div id="naiyo">内容
</div>
</body>
</html>

「naiyo」に対してCSSの設定をします。
ポイントは右マージン「margin-right」及び左マージン「margin-left」を「auto」にするところ。
こんなかんじ。

#naiyo {
padding: 0px;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

「margin-right」と「margin-left」以外は任意です。
ただし、「width」の指定がないとセンタリングにはなりません。

で、この配下にデザインされたパーツを置いていけばOKということです。
念のため簡単に作ったものを置いておきます。

センタリングテスト 

 - デザイン, 覚え書き

アドセンス広告メイン

Comment

  1. kurihara より:

    こんにちは。只今自身のホームページ制作に苦戦中の栗原と申します。こちらのウェブを見て私のトップページのhtmlにCSSの設定を書き加えてみたもののなかなか思うようにセンタリングできません。
    例えばサンプルページとして以下の中に素材写真の一枚を張り込んでみるとhtml記載は以下の様になりますがそこのどこへCSSの設定を書き込めば良いのか教えて頂ければ幸いです。
    現在のところホームページ制作にはビルダー13を使って作っています。試しにサンプルページを作ってビルダーの中のツール→インターネットプラウザでセンタリングを確認しているのですがうまくいかないという状況です。










  2. のりさ より:

    > kuriharaさん
    DIVに直接style属性があるのでこちらを削除してみてください。
    ↓ここから
    style=”top : 50px;left : 50px;
    position : absolute;
    z-index : 1;

    ↑ここまで

  3. kurihara より:

    早速のご教授をありがとうございます。教えて頂いた部分を削除してブラウザで確認してみましたがやはりページ全体をセンタリング出来ず左端によったままでした。こちらにアップしましたhtmlの記述はテストページとして白紙のページに写真一枚を張り込んだだけの単純なぺーじですが以下の部分はこの貼りこんだ写真の位置関係の記述の様に思われます。この部分を削除すればページ全体を移動させることができるのでしょうか?
    style=”top : 50px;left : 50px;
    position : absolute;
    z-index : 1;

  4. のりさ より:

    CSSは外部ファイルにして読み込ませるようにしてください。
    直接DIVに記述するのであれば、
    ――――――――――――
    style=”top : 50px;left : 50px;
    position : absolute;
    z-index : 1;

    ――――――――――――
    の部分を
    ――――――――――――
    style=”padding: 0px;
    width: 950px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

    ――――――――――――
    に変えてみてください。
    具体的なCSSのプロパティに関しては申し訳ありませんがご自身で調べてみてください。

Message

メールアドレスが公開されることはありません。

  関連記事

今更ながらFacebook(フェイスブック)のファンページを作ってみた【Facebookページの作り方01】

1年以上前の記事です。内容が古い可能性があります。意外と「いいね!」の多い記事な …

no image
フォトショップが立ち上がらなくなったときの対処法

1年以上前の記事です。内容が古い可能性があります。最近、自宅でフォトショップを開 …

Google日本語入力で快適フリック入力。「ああ」を「い」にしない設定

1年以上前の記事です。内容が古い可能性があります。どういう意味かというと、初期設 …

「Google Adsense(グーグルアドセンス)」広告サイズによる収益の変化

1年以上前の記事です。内容が古い可能性があります。以前から実験的に一ヶ月をめどに …

トイレやキッチンで「ゴキブリ」と遭遇したら洗剤やハンドソープで退治可能

1年以上前の記事です。内容が古い可能性があります。ネットでは「G」などと隠語化さ …

カラーPDFをモノクロで出力する方法

1年以上前の記事です。内容が古い可能性があります。とんでも現場からこんにちは。 …

livedoor Blog(ライブドアブログ)で「記事をコピー」すると公開しちゃうゾ

1年以上前の記事です。内容が古い可能性があります。自分の場合、ブログを書くときは …

「ワークフォースマネジメント」とは何のこと?

1年以上前の記事です。内容が古い可能性があります。「アクティビティストリーム」に …

殆どフィッシング詐欺のアドセンス(アドワーズ)広告は非表示にしてしまおう。その方法(手順)

1年以上前の記事です。内容が古い可能性があります。まずはこちらのサイトを見てみて …

OpenOffice「Calc」のセルの結合はメニューから

1年以上前の記事です。内容が古い可能性があります。タイトル通り。 表計算ソフト「 …

血液型オヤジ