人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSでの質問です。

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


●質問者: cpw
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS hoge T-STYLE マークアップ 画像
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● hanako393
●10ポイント

http://spritegen.website-performance.org/

可能です。

◎質問者からの返答

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


2 ● kaz
●10ポイント

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

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


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

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

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

◎質問者からの返答

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


3 ● kaz
●5ポイント

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

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

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

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


まずは CSS Sprite を使わず、

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


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

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

◎質問者からの返答

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

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

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

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


4 ● ftype
●65ポイント ベストアンサー

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を参考にしていただくと分かりやすいかと思います。

◎質問者からの返答

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ