「ul」と「li」の使い方

「ul」と「li」の使い方がわからないので、
自分の備忘録として書きます。

ulとolの違い


<ul>
	<li>会社概要</li>
	<li>ご挨拶</li>
	<li>事業内容</li>
	<li>アクセス</li>
	<li>お問合せ</li>
</ul>

と書いたら
↓こんな感じになります。

  • 会社概要
  • ご挨拶
  • 事業内容
  • アクセス
  • お問合せ

<ol>
	<li>会社概要</li>
	<li>ご挨拶</li>
	<li>事業内容</li>
	<li>アクセス</li>
	<li>お問合せ</li>
</ol>

と書くと、こうなります。

  1. 会社概要
  2. ご挨拶
  3. 事業内容
  4. アクセス
  5. お問合せ

これをグローバルバナーなどに使うんです

とりあえず、さっきの奴にリンクを貼っていきます。
今回は全てこのブログのTOPに貼ってます。

そしてそのコードを、「div id=globalbnavi_t」で囲みましょう。

<div id=globalnavi_t>
<ul>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">ご挨拶</a></li>
	<li><a href="#">事業内容</a></li>
	<li><a href="#">アクセス</a></li>
	<li><a href="#">お問合せ</a></li>
</ul>
</div>

そうすると、こんな感じで表示されます。

グローバルバナーを作る。

グローバルバナーはこんな感じで作りました。

test_global_banner.fw

こっからCSSです。

外観→テーマ編集→style.cssに
こんな風にいれます。

 #globalnavi_t{
  margin: 0;
  padding: 0;
  width: ***;
  height: 40px;
}

#globalnavi_t ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#globalnavi_t li{
  text-indent: -9999px;
  float:left;
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi_t a{
  display: block;
  width: 100%;
  height: 40px;
  background-image: url(画像のパス);
  background-repeat: no-repeat;
}

#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -125px 0;}
#menu3 a{background-position: -250px 0;}
#menu4 a{background-position: -375px 0;}
#menu5 a{background-position: -500px 0;}



#globalnavi_t a:hover{
  background-image: url(画像のパス);
  background-repeat: no-repeat;
}

#menu1 a:hover{background-position: 0 -60px;}
#menu2 a:hover{background-position: -125px -60px;}
#menu3 a:hover{background-position: -250px -60px;}
#menu4 a:hover{background-position: -375px -60px;}
#menu5 a:hover{background-position: -500px -60px;}

cssの中にある(画像パス)のところにに、
さっき作った画像パスを入れて下さい。

で、出来るはずなんだけど

投稿欄にこう書くと

<div id=globalnavi_t>
<ul>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">ご挨拶</a></li>
	<li><a href="#">事業内容</a></li>
	<li><a href="#">アクセス</a></li>
	<li><a href="#">お問合せ</a></li>
</ul>
</div>

そうすると、こんな感じで表示されます。

あれ?なんか変だ。失敗ですね〜
ちょっともう一度修正しま〜〜〜す。
なんか変ですね〜

コードが間違ってるんでしょうか。

修正したのがこちら

と、思ったけど、修正の方法がよくわからないので、
やり方を変えます。wordpressだからこうなるのかな?
他のcssが効いてるんだろうな〜さっぱりわかりません。

ではでは、さよなら