広告

posted by fanblog

ホームページの内容を中央に表示させる

ホームページの内容を中央に表示させているサイトをよく見かける。

方法は簡単である。
例えば幅1000pxを画面中央に表示させるにはスタイルシートに

body
{
margin-left:auto;
margin-right:auto;
width:1000px;
}


と記述すればよい。

bodyの幅を1000pxとして左右のマージンをautoとすればbodyを自動的に中央に配置してくれる。
ただし、HTMLの初めに

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

のようにDOCTYPEを記述しておく必要がある。これがないとブラウザによっては左寄りになってしまう。

さらに、もうひとつ。これはIE6の場合、

<?xml version="1.0" encoding="euc-jp"?>

のような記述を冒頭にしていると、DOCTYPEを無効にしてしまうので、もしIE6だけ中央にならないという場合は、チェックしてみるとよい。

今回はbodyタグのマージンをautoにしたが、他のタグやクラスに同様の記述をすれば、ある幅に対して内容を中央に配置することができるので、色々と試してみるとよい。

以上、ホームページ作成、HTML、CSSの小技紹介でした。

この記事へのコメント

   
<< 2013年02月 >>
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28    
PC関連ショップ
ビックカメラ.com

ドスパラは最短当日出荷!
パソコン・パソコンパーツのTWOTOP
フェイスインターネットショップ
【送料・代引手数料無料】PCダイレクト!
【バッファロー】直販オンライン・ショップ
格安BTOノート!『BTO STORE』
ストームウェブショップ
QNAP社製品ラックNAS
おすすめ商品

3DCGでよくわかる パソコン解体全書

新品価格
¥3,150から
(2011/1/28 17:39時点)

×

この広告は30日以上新しい記事の更新がないブログに表示されております。