ドリル式ホームページの作り方

サイトを画面の中央に配置する

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  サイトを画面の中央に配置する

サイトを画面の中央に配置する

firefoxをお使いの方は、すでに中央に配置されていると思うので問題ありませんが、IEを使っているヒトは画面の左にサイトがよっていると思います。

これがIEのバグかどうかはわかりませんが、firefoxなどのモダンブラウザで中央配置させたいときは、

div#a1234 {
position:relative;
margin:auto;
width:○○px;
}

を指定(position:relativeは基点の移動、margin:autoは上下左右の余白をブラウザに任せる、widthどこが中央かを明らかに)すればよいですが、IEで中央は位置させたいときは、

body {
text-align:center;
}

としますが、全ての文章が中央ぞろえになってしまうので、

#b1,#b2,#b3,#b4 {
text-align:left;
}

で元に戻します。

もうすでに、margin:autoは指定してあるので、IEのために以下の記述を追加します。

body {
text-align:center;
background:#555;
}
#b1,#b2,#b3,#b4 {
text-align:left;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.