cssについて


下記のようなulの入れ子のメニューを作り、
cssで menu と menu2 にそれぞれ別の背景画像を
表示できるcssを教えてください。

画像は例として横200px、縦50pxでお願いします。

<li class="menu2">は数が増えたり減ったりとかわりますので
<ul class="menu2">の縦幅を固定はできません。


<ul class="menu">
<li class="menu"><a href="x" class="menu">xxx</a></li>
<li class="menu"><a href="x" class="menu">xxx</a></li>
<li class="menu"><a href="x" class="menu">xxx</a>
<ul class="menu2">
<li class="menu2"><a href="x" class="menu">xxx</a></li>
<li class="menu2"><a href="x" class="menu">xxx</a></li>
</ul>
</li>
<li class="menu"><a href="x" class="menu">xxx</a></li>
<li class="menu"><a href="x" class="menu">xxx</a></li>
</ul>

お願いします

回答の条件
  • 1人2回まで
  • 登録:2007/09/26 00:42:55
  • 終了:2007/09/26 12:10:03

ベストアンサー

id:Q-A No.3

Q-A回答回数106ベストアンサー獲得回数162007/09/26 02:10:42

ポイント70pt

ul{margin:0px;margin-left:0px;padding-left:0px;width:200px;display:block; }

li{list-style-type:none;width:200px;line-height:50px;margin-left: 0px;}

.menu{background: url(任意);}

.menu2{background: url(任意2);}

こんな感じでどうでしょう?

えっと忠告ですが、クラス名はULだけにつけたほうが、管理が楽だと思います。

id:worldtravel

できました。

ありがとうございました。

2007/09/26 12:07:53

その他の回答(2件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522007/09/26 00:58:36

ポイント5pt

どんな感じにしたいのかが伝わらないんですが、

ul.menu {
  width: 200px;
  background: url(画像ファイル) repeat-y 0 0;
}

ul.menu2 {
  background: url(画像ファイル) repeat-y 0 0;
}

という感じで良いのでは?


高さが伸びてもいいように、画像の高さを大きめに作っておくか、リピートしてもいいようにつくる感じになるでしょう。

あるいは、画像を縦2分割(上側・下側)にして伸び縮みするようにするとか。

あるいは、おすすめできませんがスクロールさせるとか。

ul.menu {
  width: 200px;
  background: url(画像ファイル) repeat-y 0 0;
}

ul.menu2 {
  height: 50px;
  overflow: auto;
  background: url(画像ファイル) repeat-y 0 0;
}
id:worldtravel

イメージですが

■がmenuで、□がmenu2で、

このように表示したいのです。

■■■■■

■■■■■

■■■■■

□□□□□

□□□□□

■■■■■

■■■■■

それぞれに背景画像を表示したいのですが

入れ子になっているところがどうしても重なってしまったり

ずれてしまったりしますので、こうならない方法を知りたいのです。

入れ子にしなければ簡単にできるのですが...

背景画像というのは

li毎に一枚のがぞうということで、

パターンの画像を縦にズラーっと表示したいのではありません。

2007/09/26 01:12:04
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/09/26 01:39:14

ポイント5pt

ナビゲーション的なものと想像してるんですが、リストマーカーはあり・なしのどちらでしょう。

なしなら、li要素ではなくa要素の背景にしてみてはどうでしょう?

ul.menu,
ul.menu li,
ul.menu2,
ul.menu2 li {
  margin: 0;
  padding: 0;
  list-style: none outside;
}

ul.menu {
  width: 200px;
}

ul.menu li a,
ul.menu2 li a {
  line-height: 50px;
  display: block;
}

ul.menu li a {
  background: url(画像ファイル1) no-repeat 0 0;
}

ul.menu2 li a {
  background: url(画像ファイル1) no-repeat 0 0;
}

リストマーカーありなら、入れ子の部分はクラス名を変えるとかして細かい調整が必要でしょうね。

どちらにしても、高さを固定することは不可能ですし、環境によっては返って不格好に表示されるので、フレキシブルなデザインのほうがいいとは思いますけどね。

id:worldtravel

ありがとうございました。

2007/09/26 12:08:10
id:Q-A No.3

Q-A回答回数106ベストアンサー獲得回数162007/09/26 02:10:42ここでベストアンサー

ポイント70pt

ul{margin:0px;margin-left:0px;padding-left:0px;width:200px;display:block; }

li{list-style-type:none;width:200px;line-height:50px;margin-left: 0px;}

.menu{background: url(任意);}

.menu2{background: url(任意2);}

こんな感じでどうでしょう?

えっと忠告ですが、クラス名はULだけにつけたほうが、管理が楽だと思います。

id:worldtravel

できました。

ありがとうございました。

2007/09/26 12:07:53
  • id:wizemperor
    他の部分との絡みもあるので、このHTMLだけではわからないかと…。
    とりあえず、入れ子でもいけるとは思いますけど、想像で書いてみました↓。


    ul.menu,
    ul.menu li,
    ul.menu2,
    ul.menu2 li {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    }

    ul.menu {
    width: 200px;
    background: url(画像ファイル) repeat-y 0 0;
    }

    ul.menu2 {
    background: url(画像ファイル) repeat-y 0 0;
    }
  • id:worldtravel
    ありがとうございます

    縦50になっていませんよね。
    ちなみにこれでheight:50px;
    としても入れ子の部分は重なってしまいます。
    なので、質問しています。
  • id:worldtravel
    Q-Aさんへ

    「クラス名はULだけにつけたほうが、管理が楽だと思います。」についてですが、
    liにもいくつかの種類を設定しているので、ul,liの両方にclassを指定しています。
    (サンプル上は全てmenuとしていますが、menu_a、menu_bなどとしています)
    ありがとうございました。
  • id:Q-A
    そうですか。a hrefの場所が同じclass名だったので、最初、透過gifで確認したら、重なってしまって、やりにくかったので、余計なことを書いてしまいました。大きなお世話でしたね。いるか君と過分なポイントありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません