CSSでWebサイトをセンタリングさせる方法
1年以上前の記事です。内容が古い可能性があります。
まあ、今さら感漂いますが一応自分に対しての覚書としてちゃんと残しておくことにしました。
僕の作るサイトは大概ウインドウがある程度大きくなるとセンタリングして表示させるようなデザインになっています。
いろいろ理由はありますが、スペースの無駄が嫌いなのと、シンメトリーが好きなのが主な理由。
かつてはTABLEタグでレイアウトして大本のTABLEタグに「align=”center”」を入れれば済んだことなのですが今となってはTABLEでのレイアウトなんてありえない時代。
ただ、これをCSSで実現するにはちょっとコツがいります。
以下その方法を解説します。

サイト全体をセンタリングするレイアウトを考えます。
<body>タグ配下に<div>タグを配置し、任意のID(ここでは「naiyo」にした)を設定します。
こんなかんじ。
<title>無題ドキュメント</title>
</head>
<body>
<div id="naiyo">内容
</div>
</body>
</html>
「naiyo」に対してCSSの設定をします。
ポイントは右マージン「margin-right」及び左マージン「margin-left」を「auto」にするところ。
こんなかんじ。
padding: 0px;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
「margin-right」と「margin-left」以外は任意です。
ただし、「width」の指定がないとセンタリングにはなりません。
で、この配下にデザインされたパーツを置いていけばOKということです。
念のため簡単に作ったものを置いておきます。
アドセンス広告メイン
関連記事
-
-
アメブロ(Amebaブログ)をケータイで更新する方法
1年以上前の記事です。内容が古い可能性があります。今さらですが生徒さん及び娘がア …
-
-
アドセンス(adsense)換金への道 後編
1年以上前の記事です。内容が古い可能性があります。ようやくアドセンス(adsen …
-
-
女子・女性の仕草で本音(好意?嫌悪?)を見抜く方法
1年以上前の記事です。内容が古い可能性があります。これは参考になる!ということで …
-
-
Facebook(フェイスブック)でやると嫌われてしまうかもしれない行動
1年以上前の記事です。内容が古い可能性があります。あっという間にmixiを追い抜 …
-
-
科学的に証明されている不幸になる行動。SNSをやらたと見る、いつも忙しくする、等
1年以上前の記事です。内容が古い可能性があります。以下の行動をついついとってしま …
-
-
Androidスマホで「・(中黒・中点)」を入力する方法
1年以上前の記事です。内容が古い可能性があります。「ダイ・ハード」や「プロット・ …
-
-
殆どのスマホユーザーの個人情報はFacebookに握られている
そう、それがシャドープロファイルと言われているものです。
そして怖いのはこのシャドープロファイル、Facebookアカウントを作ったことのない人のものまで作られているとのことです。あるFacebookユーザーの連絡先にあなたの個人情報が書かれていたら注意。
その方がFacebookに連絡先へのアクセスを許可していたらあなたがFacebookをやっていなくてもアウトです。ではどうやったら防げるのか?
最近ではFacebookアプリがプリインストールされているスマホ(スマートフォン)も多いのでほぼ防ぐことは不可能でしょうね。つまり、
過去にFacebookのアカウントを作ったことがなく、Facebookを利用している人とアドレスなどの交換をしていないという場合のみ「あなたのシャドープロファイルは作られていません」
とのこと。
Facebookのアカウントを作ったことがない人は結構いるんじゃないかと思います。
ただ、Facebookを利用している人とアドレス交換をしていない人なんて殆どいないんじゃないでしょうか?
そもそも、その人がFacebookをやっているのかどうか調べてアドレス交換するなんてことできないでしょうし。。これから、こういった情報が一般的になってくると、自分のようにFacebookやってる感を前面に出している人なんかは逆に、嫌厭されてしまうような時代がきてしまうのかもしれません。
でもね。
結局は架空請求や先日被害にあった債権回収詐欺等、それを使う悪いやつがいなければ別に個人情報何ら問題ないんですよね。
だって、かつては電話帳(ハローページ)に普通に電話番号が載っていた時代があるんですから。
嫌な時代になっちゃいましたねぇ。。あとはFacebookの技術を信じて、そういった悪い輩に個人情報が流れないようにしてもらうしかないですね。
よく、「あとは神のみぞ知る」なんてこと言うことがありますが、Facebookもそういう意味では神の領域に入りつつあるのでしょうか?
人間が神の領域に足を踏み入れるとどうなってしまうのか? 注目して行きましょう。
-
-
「explorer.exe」?「explore.exe」?「iexplore.exe」?
1年以上前の記事です。内容が古い可能性があります。間違い探しみたいなタイトルでご …
-
-
Facebookで個人アカウントを取らずにFacebookページだけ作る方法(ビジネスアカウント取得方法)
1年以上前の記事です。内容が古い可能性があります。Facebookといえば実名で …
-
-
Firefox3ブックマークを別のマシンに移行する方法
1年以上前の記事です。内容が古い可能性があります。今回、Firefox3からFi …
- PREV
- 2010熊谷うちわ祭まとめ #1
- NEXT
- 2010熊谷うちわ祭まとめ #2








Comment
こんにちは。只今自身のホームページ制作に苦戦中の栗原と申します。こちらのウェブを見て私のトップページのhtmlにCSSの設定を書き加えてみたもののなかなか思うようにセンタリングできません。
例えばサンプルページとして以下の中に素材写真の一枚を張り込んでみるとhtml記載は以下の様になりますがそこのどこへCSSの設定を書き込めば良いのか教えて頂ければ幸いです。
現在のところホームページ制作にはビルダー13を使って作っています。試しにサンプルページを作ってビルダーの中のツール→インターネットプラウザでセンタリングを確認しているのですがうまくいかないという状況です。
> kuriharaさん
DIVに直接style属性があるのでこちらを削除してみてください。
↓ここから
style=”top : 50px;left : 50px;
position : absolute;
z-index : 1;
”
↑ここまで
早速のご教授をありがとうございます。教えて頂いた部分を削除してブラウザで確認してみましたがやはりページ全体をセンタリング出来ず左端によったままでした。こちらにアップしましたhtmlの記述はテストページとして白紙のページに写真一枚を張り込んだだけの単純なぺーじですが以下の部分はこの貼りこんだ写真の位置関係の記述の様に思われます。この部分を削除すればページ全体を移動させることができるのでしょうか?
style=”top : 50px;left : 50px;
position : absolute;
z-index : 1;
”
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のプロパティに関しては申し訳ありませんがご自身で調べてみてください。