文字の左側に画像を表示する方法とは？
- 文字の左側に画像を表示する方法として、HTMLとCSSを使用してチェックマークを追加することができます。
- 上記の方法では、FireFoxでは正常に表示されますが、IEではマークのような表示になってしまいます。
- サーバーには画像ファイルが正しく転送されていることを確認してください。
- ベストアンサー
文字の左側に画像を表示したい
よろしくお願いします。 文字の左側にチエックマークを入れたく以下の記述をしました。 【html】 <ul class="ulfont"> <li>テストテストテスト</li> <li>ホゲホゲホゲ</li> </ul> 【css】 .ulfont{ list-style-image:url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left:-1px; } 上記の記述ではＩＥでもＦire Foxでも表示されますので特別問題は 無いのですが、以下についてご質問させてください。 同じく、文字の左側にチエックマークを入れたく以下の記述をしました。 【html】 <ul class="ulfont1"> <li>パソコン、インターネット</li> <li>プリンター、インク</li> </ul> 【css】 .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } 上記ではfire Foxでは表示されるのですがＩＥではimg/ani059.gifが・のようなマークのなってしまいます。 サーバーにはimg/ani059.gifは転送されています。 どなた様か、ご指導の程よろしくお願いします。
- pcckit
- お礼率76% (472/621)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
list-style-none ではどうですか？
関連するQ&A
- 文字の左側にチエックマークを入れる方法
よろしくお願いします。 文字の左側にチエックマークを入れたく以下の記述をしました。 【html】 <ul class="ulfont1"> <li>テストテスト11</li> <li>ほげほげほげ</li> </ul> 【css】 .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } 上記の内容をＩＥやfire foxのブラウザ上で見ると、表示されるのですがサーバー上で確認をしてみると、画像が・のようなマークで表示されてしまいます。 原因が分からないのですが、どなた様かご指導の程よろしくお願いします。
- ベストアンサー
- HTML
- 文字の左側にチエックマークを入れる方法
よろしくお願いします。テキストの左側にチエックワークを入れたく以下の記述をhtmlにしました。 <ul class="ulfont"> <li>ああああああああああああああああああああ</li> <li>いいいいいいいいいいいいいいいいいいいいいいいい</li> </ul> <ul class="ulfont1"> <li>うううううううううううううううううう</li> <li>おおおおおおおおおおおおおおおおおおお</li> </ul> そしてcssには以下の記述をしました。 .ulfont{ list-style-image:url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left:-1px; } .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } checkmark.gifは表示されるのですが、ani059.gifが表示されません。 前回も、このようなご質問をさせていただいたのですが、解決できなく再度ご質問をさせていただきました。 なお、前回はlist-style-noneを入れると良いとご指導を頂いたのですが、なぜかうまく行かず、画像も右によってしまい、左に空白ができてしまいました。 ただし、文字の背景に設定している画像は表示されております。 何か記述方法が間違っているのだと思うのですが、わかりません。 どなた様か、ご指導のほどよろしくお願いします。
- ベストアンサー
- HTML
- 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>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- cssの記述について
よろしくお願いします。 0ピクセル×20ピクセルの画像を左側に表示させて、その右側に 文字を入れたいと先日ご質問させて頂いたところ、他の方が下記の 記述をご丁寧に作成していただけました。 確かに、その際画像は下記のように表示されましたが他の画像を 表示させたく以下の画像ファイル名を変更したところ表示されなくなってしまいました。 なお、その際backgroundに指定した画像も表示されなくなってしまいました。 (img/ani059.gif); ←ここを変更しました 例）■テスト テスト1 ■テスト2 テスト3 .ulfont1 {color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; margin-left: -20px; } .ulfont ul1 {list-style-position: outside; list-style-image: url(img/ani059.gif); ←ここを変更しました background-image: url(img/mark.png); } 画像を変えようとすると上記の記述もファイル名以外どこかを変える必要があるのでしょうか？ お手数では御座いますが、ご指導の程よろしくお願い致します。 700pxの枠を作成してありますが、その中に更に500px程度の枠を作成して、その 枠を二分割や四分割などはできるものでしょうか？ 例）日や田など・・・ どなた様か、ご指導のほどよろしくお願いいたします。
- ベストアンサー
- その他（プログラミング・開発）
- jQueryを使ってある画像を別の画像に置き換えたい。
jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- <ul>は必要ですか？
CSSを使ってなるべくHTMLのソースを減らそうと思い悪戦苦闘中です。 ■が画像だと仮定して書きます。 ■項目１ ■項目２ ■項目４ ■項目５ ■項目６ ■項目７ というような表示ができるようにしたいのですが、 CSSファイルに ul { list-style-image: url(img/mark.gif); vertical-align: middle; } と指定してHTMLには <ul> <li>項目１</li> <li>項目２</li> <li>項目４</li> <li>項目５</li> <li>項目６</li> <li>項目７</li> </ul> と書きました。そうすると表示が ■項目１ ■項目２ ■項目４ ■項目５ ■項目６ ■項目７ と頭にスペースが入ってしまいます。（リスト項目なので当たり前なのかも知れないですが…） これをスペースをなくしたいのです。 そこで、<li>だけならどうだろうと思い、CSSを下記のように書き直し試したところスペースがなく表示出来ました。 li { list-style-image: url(img/mark.gif); vertical-align: middle; } <ul></ul>は必要でしょうか？ それとも他に方法があればご教授下さい。私には上の方法しか思いつきませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- CSS リスト 外枠から文字と画像がはみ出る clearfix
｜ーーーーーーーーーーーーーーーーーー｜ ｜｜ーーーー｜ →1111 →444 →777 ｜ ｜｜ 画像 ｜ →2222 →555 →888 ｜ ｜｜ーーーー｜ →3333 →666 →999 ｜ ｜ーーーーーーーーーーーーーーーーーー｜ 質問お願いします。 上記のように、左に画像があり、その横にリストが3つ並んでいる状態で1ｐｘの外枠をつけたいのですが、 外枠が上一行目の所までしか囲んでくれません。 （※→は矢印の画像です） CSSの方に入っている.clearfixを使うとよいそうですが、 HTMLのどの部分に入れても上手く表示されません…。 どのように使えばいいのでしょうか？ またどこか間違っている所があるのでしょうか？ よろしければご教授ください。 ソースです。 --------------------------------- html <div class="box"> <img src="000000.gif" class="imgL"/> <ul> <li><img src="img/yajirusi.gif" /> 1111</li> <li><img src="img/yajirusi.gif" /> 2222</li> <li><img src="img/yajirusi.gif" /> 3333</li> </ul> <ul> <li><img src="img/yajirusi.gif" /> 4444</li> <li><img src="img/yajirusi.gif" /> 5555</li> <li><img src="img/yajirusi.gif" /> 6666</li> </ul> <ul> <li><img src="img/yajirusi.gif" /> 7777</li> <li><img src="img/yajirusi.gif" /> 8888</li> <li><img src="img/yajirusi.gif" /> 9999</li> </ul> </div> --------------------------- css .imgL { float: left; margin: 0 10px 10px 0;} .box { border:1px #CCCCCC solid; padding:5px;} .box ul{ float:left;} .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } /* exlude MacIE5 \*/ * html .clearfix { height: 1% } .clearfix {display:block;} /* end MacIE5 */
- ベストアンサー
- HTML
- javascriptで文字サイズの変更
HP初心者です。 書籍通りに作ってみてのですが文字は変更されるのですが、 作った大中小の画像？までクリックするとズレてしまいます。 文字だけが変更されるのを希望してます。 ↓見てやって下さい http://www.d-judge.jp/d-judge/test.html ソースは HTML↓ <div id="header"> <div class="font_size"> <ul> <li><img src="images/txt_size.gif" alt="文字サイズ" width="68" height="14" /></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('l')" class="textL"><span>大</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('m')" class="textM"><span>中</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('s')" class="textS"><span>小</span></a></li> </ul> </div> <p>ああああああ テストです。</p> </div> css↓ /* 文字サイズ ----------------------------*/ #header .font_size { margin: 2.5em 0px 0px; position: absolute; left: 86px; top: -2px; width: 250px; text-align: right; height: 24px; } #header .font_size li { padding: 0px 0px 0px 1em; float: left; list-style: none; } #header .font_size li img { margin-top: 5px 0; } #header .font_size ul li a { height: 24px; width: 24px; display: block; } #header .font_size ul li a span { display: none; } #header .font_size ul li .textL:link, #header .font_size ul li .textL:visited, #header .font_size ul li .textL:active { background-image: url(images/text_L.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textL:hover { background-image: url(images/text_L_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:link, #header .font_size ul li .textM:visited, #header .font_size ul li .textM:active { background-image: url(images/text_M.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:hover { background-image: url(images/text_M_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:link, #header .font_size ul li .textS:visited, #header .font_size ul li .textS:active { background-image: url(images/text_S.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:hover { background-image: url(images/text_S_o.gif); background-repeat: no-repeat; background-position: left top; } javascript↓ /*フォントサイズ変更*/ function changeFsize(fontsize) { var change = document.getElementsByTagName("body")[0]; switch(fontsize) { case "s": var percent = "62.5%"; break; case "m": var percent = "75%"; break; case "l": var percent = "85%"; break; } change.style.fontSize = percent; } です。 どなたかお分かりになる方宜しくお願いしますm(＿ ＿ )m
- ベストアンサー
- JavaScript
- 画像変更について
いつもお世話になっています。 今回は、マウスオーバーで自動開閉するアコーディオンメニューをli ul liを使って作成しました。 以下がそのソースです。 ---------------------html--------------------- <!--menu_1--> (1)<ul id="slidemenu_sample"> (2)<li class="bottom" > <a href="○○○" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">TEST</a> <!--menu_1 submenu--> (3)<ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"> (4)<li><a href="○○○">test</a></li> </ul> <!--menu_1 submenu end--> </li> </ul> <!--menu_1 end--> ---------------------css--------------------- ul#slidemenu_sample li.bottom { text-align:center; background-image : url(bt_floor_bg_up.gif) ; font-size:15px; border:none; } ul#slidemenu_sample li.bottom a:hover { color:#ffffff; text-decoration:none; background-image : url(bt_floor_bg_down.gif) ; } ul#slidemenu_sample li ul li { background-image : url(bt_menu_bg_off.gif) ; } ul#slidemenu_sample li ul li a:hover { color:#ffffff; text-decoration:none; background-image : url(bt_menu_bg_on.gif) ; } --------------------------------------------- マウスオーバーで(2)(4)の背景画像をそれぞれの背景画像に変えたいと思っています。 (4)の背景画像は上記のソースで変えれたのですが、(2)の背景画像ををマウスオーバーで変えられません。 CSSで変えられると思うのですが、どうしたらいいのか分からず、詰まっています。助言をお願いいたします。
- ベストアンサー
- JavaScript
- ブログのTOP画像表示方法（悩んでます）
どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか？？ ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }
- ベストアンサー
- ブログ
お礼
ご指導ありがとう御座いました。