- ベストアンサー
文字の左側にチエックマークを入れる方法
よろしくお願いします。テキストの左側にチエックワークを入れたく以下の記述を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を入れると良いとご指導を頂いたのですが、なぜかうまく行かず、画像も右によってしまい、左に空白ができてしまいました。 ただし、文字の背景に設定している画像は表示されております。 何か記述方法が間違っているのだと思うのですが、わかりません。 どなた様か、ご指導のほどよろしくお願いします。
- pcckit
- お礼率76% (472/621)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
他に方法があるかもしれませんが、私が知っている範囲でお答え致しますね。 ＞また、画像の位置なのですが画像の位置と文字の部分が少しずれてしまっているんです。これは修正できるのでしょうか？ これは画像自体を調整します。文字サイズに合わせて、画像の上下の余白を取ったりして調整あるのみ（笑） ＞あの部分、いの部分、うの部分えの部分、おの部分にのみマークを付けたいのですが ulfont liだとulfontの中のli全部に反映されてしまうので、新たにclassを作って個別にliに設定してあげてはどうでしょう。 ＜＜style.css＞＞ *{ margin:0px; padding:0px; } .ulfont1{ color:#ff0000; background-image:url(img/mark.png); font-weight:bolder; font-size:1.0em; line-height:2.0; list-style-type: none; /*ulに必ず付く・を消す*/ margin-left:20px; } .box{ background: url(img/ani059.gif) no-repeat left center; /*liに画像を付ける*/ padding-left:10px; /*画像とそれ以降の文字との間隔。開け具合*/ } .box1{padding-left:10px;} /*ani059.gifの横の長さの分左にスペースを空ける*/ ＜＜index.html＞＞ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <title>リスト</title> </head> <body> <ul class="ulfont1"> <li class="box">あああああ</li> <li class="box1">かかかかかかか</li> <li class="box">いいいいい</li> <li class="box1">こここここここ</li> <li class="box">ううううう</li> <li class="box">えええええ</li> <li class="box">おおおおお</li> </ul> </body> </html> その際、画像がついていないリストは、文字がズレてしまうので、もうひとつ新しくクラスを（.box1）を作って、画像の横の長さの分左に動かせば、文字がすべてそろいますよ。 ＞画像も再度アップしたりファイル名を変えたり色々とやっては見たのですが、表示されません。 これは・・・なんなんでしょうかねぇ？？アップロードしてみましたが、私がやった時はちゃんと表示されました。試しに、上記をコピペしてCSSとHTMLを作成して画像は、checkmark.gifをコピーして名前を変えてアップしてみてはどうでしょうか？・・・これでダメならば、スミマセンが私には分かりません。ごめんなさい（汗）
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
> ブラウザ上では表示されるのですが、いざサーバーにアップしてみると何故か表示されないんです。 > でも、画像をimg/checkmark.gifにすると表示されます。 であれば考えられるのは、 ・"ani059.gif"の「サーバにアップ」した時の場所がローカルと合ってない（"checkmark.gif"と同じディレクトリに入ってない） ・CSS側では"ani059.gif"とファイル名が全て小文字のものとして参照されているが、実際の画像のファイル名は"ANI059.gif"とか"Ani059.gif"という様に食い違っている（ローカル上では大文字・小文字が区別されないので表示されるがWebサーバ上では区別されるので、存在しないファイルを呼んでいる事になり、表示されない） ぐらいしかないのでは？「Webサーバ」上での画像の保存先及びファイル名が、「ローカル」上と異なってないか、を確認してみましたか？
お礼
abril様 いつもご指導ありがとう御座います。 ご指導どおり、私の初歩的なミスでした。 ファイル名がani059.GIFになっておりました。 本当に、いつもご指導を頂きましてありがとう御座います。
- u2122
- ベストアンサー率46% (6/13)
ためしにCSSとHTMLにコピペしたら、ちゃんとani059.gifが表示されましたよ？なので、CSSとHTMLのタグの記述は間違っていないと思います。 全角と半角の入力は間違っていませんか？あとちゃんとimgフォルダの中にその画像は入っていますか？どうしても駄目ならば、違う名前にして再度UPしてみてはいかがでしょうか？ ＞なお、前回はlist-style-noneを入れると良いとご指導を頂いたのですが、なぜかうまく行かず、画像も右によってしまい、左に空白ができてしまいました。 との事ですが、CSSに *{ margin:0px; padding:0px; } を記述してみてはいかがでしょうか。これでFirefoxtとIE（このふたつしか検証していません）でへんな空白がなくなります。 参考までに画像を張っておきます。 前回ken_tyan様がおっしゃったように、no-repeat left centerを追加すると画像がブラウザによってズレないようです。 背景画像をっもっと左まで表示したいときは、margin-left:20px;をpadding-left:20pxにすると出来ます。 上の場合、ULに画像がついているので、margin-left:20px;で良い感じになりあｍすが、下の場合、liに画像が付いているので、margin-left:20px;を指定するとその分左に空白が出来ます。margin-left:20px;を消してあげてば、左側にぴったりくっつきますよ。 ＜＜CSSファイル＞＞ *{ margin:0px; padding:0px; } .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:20px; } .ulfont1{ color: #ff0000; background-image:url(img/mark.png); font-weight:bolder; font-size:1.0em; line-height:2.0; list-style-type: none; margin-left:20px; } .ulfont1 li { background: url(img/ani059.gif) no-repeat left center; padding-left:10px; } こういうことで良いのかな？タグは間違っていないと思うので頑張って下さい！
補足
u2122様 ご回答ありがとう御座いました。本当にここまでご丁寧にありがとう御座いました。本当に助かりました。 確かに、ブラウザ上では表示されるのですが、いざサーバーにアップしてみると何故か表示されないんです。画像も再度アップしたりファイル名を変えたり色々とやっては見たのですが、表示されません。 でも、画像をimg/checkmark.gifにすると表示されます。 また、画像の位置なのですが画像の位置と文字の部分が少しずれてしまっているんです。これは修正できるのでしょうか？ 以下のような感じです。私としては、あの部分、いの部分、うの部分 えの部分、おの部分にのみマークを付けたいのですが、あとかの間や いとこの間にマークが入ってしまいます。マークを微調整する事は可能なのでしょうか？ よろしければご指導を頂けませんでしょうか？ この度は、ご丁寧に本当にありがとう御座いました。 あああああ かかかかかかか いいいいい こここここここ ううううう えええええ おおおおお
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
以前のファイル名云々はオッケーだとしますね。 > なお、前回はlist-style-noneを入れると良い 嘘です。そんな属性は存在しませんし、list-style-imageが優先 で、画像ファイルが見つからなければlist-style-typeで指定した マーカーを表示します。規格書に明記してあるので読みましょう。 もしかして、liがfloatしているとか。IEのバグでlist-style-image が無効になる話があったようななかったような。IEなんか無視して るから知らんけど、floatを解除してみて表示されたらビンゴね。
関連する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> 【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は転送されています。 どなた様か、ご指導の程よろしくお願いします。
- ベストアンサー
- 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程度の枠を作成して、その 枠を二分割や四分割などはできるものでしょうか？ 例）日や田など・・・ どなた様か、ご指導のほどよろしくお願いいたします。
- ベストアンサー
- その他（プログラミング・開発）
- <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で<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
- リストで行間を指定したい
リストで「情報」のテキストとリスト1行目「その1」の行間だけを指定したいのですが、可能でしょうか。 ul { list-style-image: url('image/arrow.gif'); } li { margin-bottom: 0.2em;} ----- <p>情報</p> <ul> <li>その1</li> <li>その2</li> </ul>
- ベストアンサー
- 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>による横並びメニューの記述法
こんにちは。 CSSで<li>を使って横並びメニューを作っているのですが、メニューのイメージとイメージの隙間を空けるにはどうすればよいのでしょうか？ 現在の記述はこうです。 -----------------html------------------------ <div id="menu"> <ul> <li id="menu01"><a href="index.html"></a></li> <li id="menu02"><a href="business.html"></a></li> </ul> </div><!--menu--> -----------------css------------------------ #menu ul{ margin:95px 0 0 25px; padding:0; width:100%; float:left; list-style:none; } #menu ul li { float:left; } #menu ul a{ text-decoration:none; display:block; width:125px; height:30px; } #menu ul a:hover{ text-decoration:none; display:block; width:125px; height:30px; } #menu01 a{ background-image:url(img/menu01a.gif); background-left:0 0; } #menu01 a:hover{ background-image:url(img/menu01b.gif); background-position:0 0; } #menu02 a{ background-image:url(img/menu02a.gif); background-position:0 0; } #menu02 a:hover{ background-image:url(img/menu02b.gif); background-position:0 0; } 現状だと、画像（menu01.gif）と画像（menu02.gif）がどうしてもつながってしまうんです。 どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- レンタルサーバ・ASP
- CSSリストタグ
<div class="test_box_1"> <ul> <li>テキスト <img src="img/icon.gif" width="20" height="20"></li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> </div> こういった記述をして、リストの横にアイコン画像を出そうとしたのですが、 アイコンを入れると、バランスが崩れます。 （アイコンを入れた下に余白ができてしまったり。） アイコンの高さを小さくしてみたりといろいろやってみたのですが できません。 制御する方法はあるのでしょうか？ ちなみに、CSSはこのように記述しています。 .test_box_1 ul { list-style-type: none; width: 100%; margin: 10px 0px 0px 10px; } .test_box_1 li { display: block; width: 30%; background-image: url(../images/list_arrow2.gif); background-repeat: no-repeat; background-position: 0px 3px; padding-left: 10px; float: left; } よろしくお願いします！
- ベストアンサー
- HTML
お礼
u2122様 ご指導ありがとう御座いました。 ここまで、ご丁寧にご指導頂きましてありがとう御座います。 初心者の私には本当に助かります。 ありがとう御座いました。 また、画像が表示されない件ですが単純にファイル名が間違っておりました。gifと思っていたのですが、GIFになっていました。 本当にありがとう御座いました。