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

ブラウザによる表示の違いを学ぶ

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  ブラウザによる表示の違いを学ぶ

ブラウザによる表示の違いを学ぶ

ul#a3のスタイル

ul#a3は、サイドメニューのリスト項目で、リストマークを”なし”したら、IEのバグのために、一度”ul#a3 li”にdisplay:inline、”でインライン要素にした後、再度ul#a3 li a”にdisplay:blockを指定して戻す作業をしますね。

前項のp.a4と共通のスタイルは、”ul#a3 li,p.a4”のように、カンマで区切って同スタイルを適用します。

あとは、カーソルをメニューリストに当てたときに、背景色が変わるように、擬似クラスを設定します。

ul#a3 {
list-style-type:none;
}
ul#a3 li {
display:inline;
}
ul#a3 li a {
line-height:24px;
border:solid 1px #444;
border-left:solid 10px #444;
border-top:0;
text-decoration:none;
}
ul#a3 li a,p.a4 {
text-align:center;
display:block;
width:150px;
margin-left:20px;
}
ul#a3 li a:link {
background:#ccc;
color:#222;
}
ul#a3 li a:visited {
background:#ccc;
color:#222;
}
ul#a3 li a:hover {
background:#444;
color:#fff;
}

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

表示バグの確認と修正

IEをお使いの方は、「表示バグ?別に普通だけど」とお思いでしょうが、Firefoxを使っている人は、リスト項目メニューがはみ出ていると思います。

li aに対して、width(height,line-height含む)を指定すると、IEで表示したときよりもFirefoxで表示したときのほうが、幅が伸びるのではみ出ているように見えます。

これを直すには、li aでなく、ulにwidthを指定、line-height:24pxの指定を削除して代わりに上下にpaddingを指定し、li aにはdisplay:blockによって親ボックスの横いっぱいまで広がるようにすることです。

また、このように修正すると、IE6で表示した場合のみ、マウス反応範囲が広がらないバグが起こるので、li aにposition:relativeを指定します。

ul#a3 {
list-style-type:none;
width:171px;
}
ul#a3 li {
display:inline;
}
ul#a3 li a {
padding:3px 0;
border:solid 1px #444;
border-left:solid 10px #444;
border-top:0;
text-decoration:none;
position:relative;
display:block;
}
ul#a3 li a,p.a4 {
text-align:center;
margin-left:20px;

}
ul#a3 li a:link {
background:#ccc;
color:#222;
}
ul#a3 li a:visited {
background:#ccc;
color:#222;
}
ul#a3 li a:hover {
background:#444;
color:#fff;
}

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


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.