- ベストアンサー
css <li>タグについて
CSSの<li>タグを<p>タグと同じ文字サイズ、文字間隔にしたいのですが、一致させることが出来ません。 また、インターネットエクスプローラとgoogle Chrome では<li>の文字サイズが異なっており、google Chrome の方が文字が小さいです。 サイト自体はテンプレート配布サイトより取得して加工して使用していますので、html、cssについて殆ど素人で申し訳ありませんが、ご教授願えませんでしょうか。 下記のページの■が付いている箇所です。 (■はオレンジ色をしています。) http://kunaku.com/topic/kotuban/kotu.html ●html <li class="img"><span class="color">■</span><a href="meritto.html#kubire" target="_self">くびれ美人</a></li> ●css http://kunaku.com/main.css li.img{ margin: 0; padding:3px; font-size:90%; } #main p,#main li,#main blockquote{ font-size:90%; }
- aruru_a
- お礼率14% (2/14)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#main ulの font-size:90%を消すとどうでしょうか
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
私も同感です。 #main p,#main li,#main blockquoteに共通してfont-size:90%;を 指定していますが、それと別に#main ulにも同じ設定をしています ね。それで、#main liの指定は既に#main ulで90%に縮小されてい るのに重ねて90%になり、合計81%となっています。
お礼
ulの指定を外すときれいに表示されました。 本当にありがとうございます。
関連するQ&A
- CSSのタグについて
今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#"> <em><img src="album/img/photo.jpg" /></em> <span>写真１</span></a></li> </ul> </div> --------------------------------------------- とHXTML表記があり、CSSの設定は下記のようになっていました。 （※一部抜粋） --------------------------------------------- div#album ul li a em, div#album ul li a span { display: none; } --------------------------------------------- そこで質問です。<em>や<span>のタグを単独で使った 事がなく、どうしてこの二つのタグが使われているの かがわかりません。 特にemはフォントサイズの指定ではないのでしょうか？ それともCSSで効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。
.ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>１１１１１</li> <li>２２２２２</li> <li>３３３３３</li> <li>４４４４４</li> <li>５５５５５</li> <li>６６６６６</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。 横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。 唯一firefoxだけが思うように表示できました。 IE６と７でも違う表示になりました（IE6だとかなり右寄り） operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・ これを一つのCSSできれいに表示することは不可能でしょうか？ どうかよろしくお願致します。
- ベストアンサー
- HTML
- CSS内で呼び出してる画像に対して、class属性をつけたい
CSS内で呼び出してる画像に対して、class属性をつけたい お世話になります、CSSに関して下記のようなことは可能なのでしょうか。 とあるライブリにimgタグにclass属性を指定して使用するものがありました。 例：<img src="image.gif" class="○○"/> （クラスを指定すると画像にエフェクトがかかる） これをcssで下記のように呼び出している画像に対して適用することは可能でしょうか。 [cssファイル] #bkg .opt1 { background: url('画像のパス'); } [html] //こんな感じで呼んでいる <li class="bkg opt1"><span>image</span></li> CSS内でクラス指定ができないものかと色々試してみたもののうまくいきません・・ 適用方法、ヒント等教えていただけますでしょうか よろしくお願いします
- 締切済み
- HTML
- cssのタグについて
cssで使えるタグにはどのようなものがあるのでしょうか? p、div、h1(文字サイズと兼用でしょうか?)などがあることが分かったのですが、たとえばfontcolorを縮めてfc.red { color: red;} などとすれば自分的に分かりやすいと思ったのですが無効でした。 また、百歩譲って限られたタグしかないとしても、p.fc.red { color: red;}などのようにclassを複数にするようなことは可能ではないのでしょうか? こういったことも含めてcssとhtmlでは思想的にというか包括的に違うものなのでしょうか? スタイルシート部分 p.red { color: red; } これを→ fc.red { color: red; } HTML部分 <p class="red"> タイトル </p> これを→ <fc class="red"> タイトル </fc>
- ベストアンサー
- その他(ソフトウェア)
- cssのclassについて
よろしくお願いします。 文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。 【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます きっとclassの表記が間違っているのだと思いますが困っております ご指導の程よろしくお願いします。 【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？ きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- IE用CSSが適用されない
通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。
- ベストアンサー
- HTML
- cssについて質問です。
cssについて質問です。 IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。 imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。 ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。 添付画像のように画像を３つならべて表示したいのですが、 一番無駄無くdivで組む方法もありましたらご教授下さい。 よろしくお願いします。 ■HTML■ <div class="subcontentsbox"> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> </div> ■css■ .subcontentsbox { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif; font-size: 100%; width: 100%; margin: 20px 0px; padding: 0; text-align: justify; -ms-text-justify: inter-ideograph; overflow: hidden; display: block; } .imgbox { background-color: #987654; height: 250px; width: 33.33333%; text-align: center; float: left; } .imgbox a{ text-decoration: none; border: 0; height: 180px; width: 180px; } .imgbox img{ border: 0; height: 180px; width: 180px; }
- ベストアンサー
- HTML
- spanタグとpタグのどちらを使えばいいのです
html内で文字を囲ってcssで色やサイズの装飾をする場合は、 spanタグとpタグのどちらを使えばいいのですか？ 基準がわかりません。
- ベストアンサー
- HTML
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
お礼
CSSの事をちゃんと理解することなく追加した箇所でした。 本当にありがとうございました。