CSSでリストを横並びに表示し、行頭画像を表示する方法
- XHTMLとCSSでのWebページ作成時、リストを横並びに表示させる方法と行頭画像を表示させる方法を解説します。
- CSSのdisplayプロパティを使用することで、リストを横並びに表示することができます。また、list-style-imageプロパティを使用することで、行頭に画像を表示させることができます。
- 画像が表示されない原因として、CSSのセレクタが正しく指定されていない可能性があります。確認する際には、画像のパスやセレクタの指定方法に注意してください。
- ベストアンサー
CSSでリストを横並びにし、行頭画像を表示させたい
XHTMLとCSSでのWebページを作成しています。 リストを横並びに表示、行頭画像も表示させ、さらにポイントした時に画像が変わるようにしたいのですが、下記の記述では横並びにはできても画像が表示されず困っています。 おかしい部分や足りない部分がありましたら、ご指摘お願い致します。 ≪CSS≫ #menu li{ display:inline; list-style-image:url(画像のパス); } #menu li a:hover{ list-style-image:url(画像のパス); } ≪ｈｔｍｌ≫ <div id="menu" name="menu"> <ul> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> </ul> </div> 試しにdisplayを削除すると、画像はちゃんと表示されるので、画像のパスは間違っていないはずです。 何卒、宜しくお願い致します。
- sakimi12
- お礼率58% (10/17)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （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()を使いましょう。
関連するQ&A
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
- cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？ さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <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> <li><a href="#">７</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
- CSSでリスト横並び…そしてそれを中央へ
CSSでリスト横並び…最近知った物ですが、問題が絶えません…。以下のようにして、CSSでリストを横並びにしたのは良いのですが、それを中央表示させたいため、ネットで色々と調べ、それを真似ているのですが、うまく中央へ表示されません。一体何が悪いのでしょうか？ 最初は ul も利用していましたが、あるサイトのソースだと ul を利用していなかったので省いたところ、変化なかったので、省いたままにしています。 +++ CSS ソース +++ #smenu { clear: both; margin: 0 auto; padding: 20px 0; width: 900px; height: 50px; white-space: nowrap; list-style-type: none; text-align: center; } #smenu li { float: left; margin: 0 auto; padding: 2px 10px; text-align: center; } #smenu a { display: block; text-align: center; } +++ HTML ソース ++++ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div id=smenu> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </div> よろしくお願いします。
- ベストアンサー
- HTML
- CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- HTML&CSSで「横並び」にする方法
最近、独学でプログラミングを学び始めた初心者です。 知識が浅く、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。 詳しい方がいたら教えてください。 ・HTMLでは <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> ・CSSでは、 #nav li { display: inline; list-style-type: none; padding-right: 30px; } と書いたのですが「横並び」になりません。何が間違っているのでしょうか？ これだけの情報だと回答が難しいかもしれませんが、非常に困っております。 よろしくお願いします。
- ベストアンサー
- HTML
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 「横並び」にする方法→HTML&CSS
HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper"> <!-- ヘッダー --> <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li { display:inline; list-style-type: none; padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか？ 非常に困っております。 回答よろしくお願いします。
- ベストアンサー
- HTML
- CSSでリスト横並び…そしてそれを中央へ その2
すみません、つい先日同様の質問をし、良回答を得られたと早とちり締め切ってしまいましたが、まだ問題が続いてました。 以前の質問と回答 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2335571 頂いた良回答は Firefox ではうまく行きましたが、IEだとやはりまだ左寄せ状態で表示されてしまいます。 その他頂いた回答はDOCTYPEを変えております、確かに中央に寄ったのですが、あのDOCTYPEですとIEとFirefoxで padding の捕らえ方が変わるため、できればあのDOCTYPEは使用したくはありません。 ========= 以下、前質問より ============ CSSでリスト横並び…最近知った物ですが、問題が絶えません…。以下のようにして、CSSでリストを横並びにしたのは良いのですが、それを中央表示させたいため、ネットで色々と調べ、それを真似ているのですが、うまく中央へ表示されません。一体何が悪いのでしょうか？ 最初は ul も利用していましたが、あるサイトのソースだと ul を利用していなかったので省いたところ、変化なかったので、省いたままにしています。 +++ CSS ソース +++ #smenu { clear: both; margin: 0 auto; padding: 20px 0; width: 900px; height: 50px; white-space: nowrap; list-style-type: none; text-align: center; } #smenu li { float: left; margin: 0 auto; padding: 2px 10px; text-align: center; } #smenu a { display: block; text-align: center; } +++ HTML ソース ++++ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div id=smenu> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </div> よろしくお願いします。
- ベストアンサー
- HTML
- CSSで横並びのロールオーバーの表示がおかしいです
知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。 当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。 症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。 オンマウスも効いていません。 使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。 以下ソースです。 /*---HTML*/ <?xml version="1.0" encoding="shift_jis "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <title>###</title> </head> <body> <div id="main"> <div id="menu"> <ul> <li class="menu1"><a href="#">sample</a></li> <li class="menu2"><a href="#">sample</a></li> <li class="menu3"><a href="#">sample</a></li> <li class="menu4"><a href="#">sample</a></li> <li class="menu5"><a href="#">sample</a></li> </ul> </div> </div> </body> </html> /*---CSS*/ #menu{ width: 950px; height: 60px; margin-top: 20px; margin-bottom: 20px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; } #menu li{ width: 190px; margin: 0px; padding: 0px; float: left; text-indent: -9999px; } #menu a{ display: block; width: 100%; height: 60px; background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a{ background-position: 0px 0px;} .menu2 a{ background-position: -190px 0px;} .menu3 a{ background-position: -380px 0px;} .menu4 a{ background-position: -570px 0px;} .menu5 a{ background-position: -760px 0px;} #menu a:hover{ background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a:hover{ background-position: 0px -60px;} .menu2 a:hover{ background-position: -190px -60px;} .menu3 a:hover{ background-position: -380px -60px;} .menu4 a:hover{ background-position: -570px -60px;} .menu5 a:hover{ background-position: -760px -60px;} ご指摘を宜しくお願いいたします。
- ベストアンサー
- ブログ
- リストのCSSでのflort時の背景
ulに幅と背景色を設定しているのですが、リストを横に並べるために、floatさせると希望の表示になりません。リストを横に並べて、かつ、ulで指定している幅と背景色にしたいのですが、どのようにすればよいでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu {background-color: red;width: 1024px;} ul#menu li {float: left; width: 100px;} </style> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
お礼
ご丁寧な回答、ありがとうございます。 ご指摘を参考に下記の記述をしてみたのですが、やはり画像は表示されませんでした…。試しに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の前にスペースを入れてしまっていました。 そこを直したらちゃんと表示されました！本当にありがとうございました。 ベストアンサーにさせていただきます。 お礼と補足の内容が逆になってしまって申し訳ありません。