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

divのスタイルを指定する

ドリル式ホームページの作り方TOP  >>  Lesson7〜positionを使ったレイアウト〜  >>  divのスタイルを指定する

divのスタイルを指定する

サンプルの各divボックスに対してpositionと他のスタイルを指定してみます。

* {
margin:0;
padding:0;
}
img {
border:0;
}
#a123 {
position:relative;
margin:auto;
width:600px;
}
#a2 {
position:relative;
margin:10px 0 0 10px;
}
#a3 {
margin-top:20px;
width:420px;
}

#a123と#a2に指定した、position:relativeは、基点をPC画面の左上からそのブロックの左上に移動させるための記述です。(position:relativeが単体で出てきたら、それは基点を移動させる目的です)

これにより、#a123は#a123が包括するブロックの左上に、#a2は#a2が包括するブロックの左上にそれぞれ基点が移動し、その基点を中心に絶対配置(absolute)することができるようになります。

margin:autoの記述は、その包括ブロックをPC画面の中央に配置させるための記述です(IE以外のブラウザ、IEの場合はbodyにtext-align:centerを記述)。


Lesson7〜positionを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. divタグを理解する
  3. div骨格にコンテンツを挿入する
  4. 絶対配置と相対配置
  5. divのスタイルを指定する
  6. 他のタグのスタイルを指定する
  7. スクロールボックスを設置する

CGIの設置

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

ホームページの公開

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