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

リスト(ul)を扱う上での注意点

ドリル式ホームページの作り方TOP  >>  Lesson6〜tableを使ったレイアウト〜  >>  リスト(ul)を扱う上での注意点

リストを扱う上での注意点

リストタグ(ul,ol)はとても汎用性が高く、ある程度しっかりとしたサイトであれば必ず使用しているタグの一つです。

ただ、ulとliを並べて記述するだけなのになにがそんなに難しいの?と思う方が大半でしょうが、難しくはないものの、スタイルのいじり方とその他注意点がいくつかありますので、それについて3つだけ説明します。

今回、リストに対して指定するスタイルが下のソースになります。

ul {
line-height:22px;
color:#888;
font-weight:bold;
margin:10px 20px 20px 20px;
list-style-type:none;
}
ul li {
display:inline;
}
ul li a {
padding-left:20px;
display:block;
background:url(../../gif/18.gif) left center no-repeat;
}

IE6のバグ

このソースの中の

ul li {
display:inline;
}

という記述ですが、前項においてulはブロックレベル要素であることは明らかですが、それを「display:inline;」と指定することでインライン要素に直しています。

この指定は、windows版のIE6で、li要素の上下に隙間の生じるバグがあるための指定です。

ところが、リストをインライン要素に変えると横並びになってしまい、縦のメニューに使用することはできないので、その後の「li a要素」に対して、

ul li a {
display:block;
}

と指定して、ブロックレベル要素に戻しています。

list-style-imageを使わないリストマークの指定

これはよく使用しますので覚えておくとよいでしょう。 というのは、list-style-imageで●のリストマークを画像に変えると、文字とマークが微妙にずれるんですね〜。 これを回避するために、list-style-typeをnoneとして、マークを消した後に、backgroundでマーク画像を追加します。(これを知るまではズレが気になって仕方なかったです・・・)

ul li a {
background:url(../../gif/18.gif) left center no-repeat;
}

これで完成!サンプルはコチラ→サンプル(ホームページ作成講座)


Lesson6〜tableを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. tableタグを覚える
  3. table内に文章を記述する
  4. スタイルシートを適用する
  5. vertical-alignというもの
  6. ブロックレベル要素とインライン要素
  7. リスト(ul)を扱う上での注意点

CGIの設置

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

ホームページの公開

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