2011年01月30日
ホームページの内容を中央に表示させる
ホームページの内容を中央に表示させているサイトをよく見かける。
方法は簡単である。
例えば幅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の小技紹介でした。
方法は簡単である。
例えば幅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の小技紹介でした。
パソコン (5)
この記事へのコメント