CSSでの質問です。


CSS Sprite を利用して、list-style-imageで画像を指定したいのですがそういった事は可能でしょうか?
<ul>
<li>hoge</li>
<li>fuga</li>
</ul>
といったマークアップにCSS Spriteを利用して画像を表示したいのです。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/05/21 21:38:30
  • 終了:2010/05/27 21:55:54

ベストアンサー

id:ftype No.4

ftype回答回数53ベストアンサー獲得回数52010/05/23 01:21:16

ポイント65pt

http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powere...

list-style-imageではCSS Spriteは自分が思う限り無理だと思います。

まずliタグそれぞれにclassなりidを指定し、縦横幅を決め、backgroundを指定し、その後positionを指定して、画像をずらしていくのがCSS Spriteです。

上記URLを参考にしていただくと分かりやすいかと思います。

id:cpw

なるほど。わかりました。

いわゆるlist-style-imageのようにはbackground-imageを使用しては無理なのですね。

リストのアイコンを変えたかっただけなので、そういう用途にCSS Spriteは使えないと。

メニューのように全体を背景とする場合には使えるんですね。

ありがとうございました。

2010/05/23 02:19:55

その他の回答(3件)

id:hanako393 No.1

hanako393回答回数1142ベストアンサー獲得回数872010/05/21 21:46:47

id:cpw

どのようにしたらよいのでしょうか?

2010/05/21 23:20:02
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/05/21 22:08:02

ポイント10pt

list-style-image を使用した場合、

指定した画像がそのままのサイズで表示されるため、CSS Sprite は利用できません。


li に background-image を指定する方法であれば、

工夫の仕方によっては CSS Sprite の使用が可能です。

http://q.hatena.ne.jp/answer

id:cpw

具体的にはbackground-imageをどのように使えば良いのでしょうか。

2010/05/21 23:20:38
id:kaz No.3

kaz回答回数200ベストアンサー獲得回数422010/05/21 23:40:36

ポイント5pt

失礼ですが「CSS Sprite」の意味は理解されているでしょうか。

CSS Sprite は、パーツ用の画像をひとまとめにして、

サーバへのリクエスト回数を減らすテクニックです。

技術的に高度という訳ではありませんが、CSS の基本自体は習得している必要があります。


まずは CSS Sprite を使わず、

単独の画像を使った background 指定を練習してみる事をおすすめします。


ホームページ作成 - ホームページ作り - リストのマークを変更する(画像にする)

http://www.1uphp.com/con1/list/style-url.html

id:cpw

大丈夫です。そこら辺はしってます。

ただバックグラウンドイメージをしていすると全体に表示されてしまいますよね?

なのでどうやって目的の画像だけを表示するのかなと。

背景画像にwidthとかheightを指定できるんでしょうか?

2010/05/22 13:48:11
id:ftype No.4

ftype回答回数53ベストアンサー獲得回数52010/05/23 01:21:16ここでベストアンサー

ポイント65pt

http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powere...

list-style-imageではCSS Spriteは自分が思う限り無理だと思います。

まずliタグそれぞれにclassなりidを指定し、縦横幅を決め、backgroundを指定し、その後positionを指定して、画像をずらしていくのがCSS Spriteです。

上記URLを参考にしていただくと分かりやすいかと思います。

id:cpw

なるほど。わかりました。

いわゆるlist-style-imageのようにはbackground-imageを使用しては無理なのですね。

リストのアイコンを変えたかっただけなので、そういう用途にCSS Spriteは使えないと。

メニューのように全体を背景とする場合には使えるんですね。

ありがとうございました。

2010/05/23 02:19:55
  • id:kaz
    > ただバックグラウンドイメージをしていすると全体に表示されてしまいますよね?
    > なのでどうやって目的の画像だけを表示するのかなと。
    > 背景画像にwidthとかheightを指定できるんでしょうか?

    背景画像の width / height 指定はできません。

    サイドメニューのように
    「縦方向にはどれだけ延びるか分からないが、横幅は決まっている」場合、
    (決まっている横幅は確保した上で)横に並べた画像を使用すれば、
    CSS Sprite を利用することが可能です。

    CSS Sprite は基本的に、幅・高さともに決まっている要素に使うものなので、
    (幅・高さが可変の場合、ご指摘のように全体に画像が表示されてしまう為)
    少なくともいずれかの方向が固定されていたり、目安になる幅が無いと利用できません。

    「10個のリスト項目で、それぞれアイコンが違う」というような場合は、
    上記のような方法で CSS Sprite を利用する意味はあるかもしれませんが、
    「リストタグ自体のアイコンを一括指定する」場合、単独画像にした方が良いでしょう。
  • id:cpw
    回答ありがとうございます。
    ただliタグしかないので、バックグラウンドイメージを
    指定するとliタグ全体にcss spriteが表示されちゃうんですよね。
    spanタグとかをliタグの中に書ければ問題ないんですど、、、
  • id:rouge_2008
    kazさんの回答にあるようにliにbackground-imageで背景を指定する方法で可能です。
    リスト項目ごとにそれぞれ違うクラス名またはIDを割り当てる必要がありますが・・・
    後はbackground-positionで表示位置を指定します。
    ftypeさんが回答した参考ページを確認してみてください。
    一枚の画像で、メニュー(リスト)ごとに違うアイコン画像を表示したいのでしょうか?
    もし説明が必要でしたら、回答させていただきます。
    『spanタグとかをliタグの中に書ければ問題ないんですど、、、』との事ですが、HTMLの変更が出来ないのでしょうか?
    各リストの項目にアンカータグ(リンク)は指定してありますか?
    指定してある場合、マウスオーバー用の画像も表示したいですか?
  • id:cpw
    rouge_2008さん回答ありがとうございます。

    > 一枚の画像で、メニュー(リスト)ごとに違うアイコン画像を表示したいのでしょうか?
    いえ。同じ画像で良いです。
    >『spanタグとかをliタグの中に書ければ問題ないんですど、、、』との事ですが、HTMLの変更が出来ないのでしょうか?
    HTMLの変更はできません。尚かつ表示したいアイコンはCSS Spriteに含まれているので、できるだけアイコンを一つだけ切り出したくないのです。
    >各リストの項目にアンカータグ(リンク)は指定してありますか?
    質問文に示してあるように、単純なリストかつプレーンなテキストのみです。ul li タグ以外はありません。
    >指定してある場合、マウスオーバー用の画像も表示したいですか?
    いえ、箇条書きにしたいだけなのでマウスオーバーはいりません。

    よろしくお願いします。
  • id:rouge_2008
    > HTMLの変更はできません。尚かつ表示したいアイコンはCSS Spriteに含まれているので、できるだけアイコンを一つだけ切り出したくないのです。

    その場合は、やはりCSSスプライトでは無理だと思います。
    CSSスプライト用の画像がこのように(http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif)縦に繋がっている場合は、リスト項目の高さだけ決めれば何とかなりますが、目的の画像の右側にも別の画像が繋がっているのでしたら、今回の条件(HTMLの変更なし)では無理なようです。

    ※参考までに、上記の画像は以下のサイトで使用されています。
    http://css-tricks.com/css-sprites/
  • id:cpw
    なるほど。ご丁寧にありがとうございます。はっきりと理解できました。
    本当に助かりました。
  • id:rouge_2008
    わざわざすみません。
    ポイント送信ありがとうございました。
    有難く頂戴します。m(__)m

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません