- ベストアンサー
CSSでリストを横並びに表示し、行頭画像を表示する方法
- XHTMLとCSSでのWebページ作成時、リストを横並びに表示させる方法と行頭画像を表示させる方法を解説します。
- CSSのdisplayプロパティを使用することで、リストを横並びに表示することができます。また、list-style-imageプロパティを使用することで、行頭に画像を表示させることができます。
- 画像が表示されない原因として、CSSのセレクタが正しく指定されていない可能性があります。確認する際には、画像のパスやセレクタの指定方法に注意してください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
簡単なサンプルを ★HTML4.01strict ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ※タブは＿に置換してある。 ※"△","×","▼"は、url(画像パス)に変更。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header div.nav{position:absolute;top:0;left:0;text-align:center;} div.header div.nav{width:100%;background-color:yellow;} div.header div.nav ul,#header div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:30px;} div.header div.nav ul li{width:22%;float:left;margin-left:10px;border:solid black 1px;} div.header div.nav ul li a{display:block;width:100%;height:100%;padding-left:0;background-color:gray;text-decoration:none;} div.header div.nav ul li a:before{content:"△";} div.header div.nav ul li a:visited:before,div.header div.nav ul li a:focus:before{content:"×";} div.header div.nav ul li a:hover:before,div.header div.nav ul li a:active:before{content:"▼";} div.header h1{margin-top:40px;} --> ＿</style> </head> <body> ＿<div class="header" id="Top"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="./index.html">Top</a></li> ＿＿＿＿<li><a href="./product">Product</a></li> ＿＿＿＿<li><a href="./news.html./">News</a></li> ＿＿＿＿<li><a href="./profile">profile</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
display:inline;は、行内要素であって、list-itemではありません。その時点で、list-styleは意味が無くなります。 display:block;にして、floatさせ ・背景画像として画像を置くか、 ・conent:url()を使いましょう。
お礼
ご丁寧な回答、ありがとうございます。 ご指摘を参考に下記の記述をしてみたのですが、やはり画像は表示されませんでした…。試しにORUKA1951さんのサンプルをコピペしてもみたのですが、記号は表示されませんでした。 私の他の記述が邪魔しているのか、ブラウザの問題か…（ちなみにＩＥ８とChromeです） #menu ul li{ display:block; float:left; } #menu ul li a :before{ content:url(画像のパス); } #menu ul li a:hover :before{ content:url(画像のパス); } 検証サービスでも特に問題はなかったです。 背景画像にするか、もう少しいじってみます。ありがとうございました！
補足
すいません、:beforeの前にスペースを入れてしまっていました。 そこを直したらちゃんと表示されました！本当にありがとうございました。 ベストアンサーにさせていただきます。 お礼と補足の内容が逆になってしまって申し訳ありません。