- ベストアンサー
表示の違うリストの設定について
お世話になります。立て続けの投稿で恐縮いたします。 現在、ページ内に縦表示のリストがあり、CSSでは ul{ list-style: none; margin: 0px 0px 0px 1px; padding-left: 0; padding-right: 0; } li a{ text-decoration: none; display: block; padding: 5px; width: 170px; border-bottom: 1px solid #e6e6e6; color: #000000; background: #ffffff; } li a:hover{ text-decoration: none; color: #ffffff; background: #fffaec; } となっているのですが、縦表示とは別に横表示のリストを設置したい場合、どのようにすれば良いのでしょうか？ 凄く初心者のような質問で恐縮ですが、通常のテキストであれば単にクラスなどで変更できますが、このリストはどのようにしたらいいのか分かりません。 手元にある本は形式の違う対処法などは載っていなく、検索しても、調べた範囲ではどれも一種類のみのケースしか紹介がなく、その対処法が分からずにいます。 お恥ずかしい質問とは重々承知していますが、アドバイスのほど頂戴出来れば幸いです。宜しくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
普通にクラス分けしたら良いと思いますけどね。 ul.side li{ list-style: none; margin: 0px 0px 0px 1px; padding-left: 0; padding-right: 0; float:left; } li a{ text-decoration: none; display: block; padding: 5px; width: 170px; border-bottom: 1px solid #e6e6e6; color: #000000; background: #ffffff; } li a:hover{ text-decoration: none; color: #ffffff; background: #fffaec; } ------------------------------------- <!--縦--> <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> <!--横--> <ul class="side"> <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>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞通常のテキストであれば単にクラスなどで変更できますが、 リストも同じくclassで指定すればよいです。 もちろん、classを使わず詳細度や、隣接セレクタ、子セレクタ、子孫セレクタで区別できれば、それを使ってもできます。 よく使われるのが下記のようなHTMLの場合ですかね。 <body> <div> <h2>見出し</h2> <p>段落</p> <h3>目次</h3> <ul> <li><a href=""></a></li> </ul> <div> <ul> <li><a href=""></a></li> </ul> </body> このようにclassがなくても、区別できます。
お礼
ORUKA1951様 こんばんは。ご親切なアドバイスをありがとうございます。 divで別ければクラス指定しなくとも区別出来るという事でしょうか。 これまでCSSはあまり触ったことがないので（つい最近）、とても勉強になります。 有難うございました。
お礼
torayoshi様 こんばんは。早速のアドバイスをありがとうございます。 uiと、liの組み合わせというか、どちらにクラス指定をしたらいいのか分かりませんでした。お恥ずかしい話ですが・・ いずれにせよお伺いして勉強になりました。 有難うございました。