いつもお世話になっております。
以前CSSスプライトについて質問させて頂いたのですが、
下記サイト(http://www.livesense.co.jp/)の、div要素に書かれているid=keyの中身は
CSSスプライトを使って記述しているのでしょうか?
CSSスプライトを使用しているかしていないか疑問に思ったのは、background-positionの位置に記述があったので、もしかしたら使っているのでは?と思いました。
もしCSSスプライトを使用しているのならば、この場合、background-positionの位置はどのように事前に決めているのでしょうか?
ご教授お願いします。
No.1ベストアンサー
- 回答日時:
そうですね。
背景画像の全体や一部をbackgroundの位置でコントロール
しているので、CSSスプライトと言えると思います。
ご紹介いただいたサイトは、#key、#key div、#key h1の3箇所で同じ画像を
使っていて、それぞれ表示させるエリアをbackgroundの位置や
widthを設定することで見せているようです。
>background-positionの位置はどのように事前に決めているのでしょうか?
background-positionは全て左上が起点となっているので、
そこからの距離(px)を事前に測っておいて、設定します。
詳しくは以下のようなサイト等、参考になるのではないかと思います。
http://www.webcreatorbox.com/tech/css-sprite/
No.3
- 回答日時:
横長の画像を、
「divの(左右の)中心と、画像の(左右の)中心を合わせるように、
divの上端と画像の上端を合わせるようにして配置」
です。
background-position: 50% 0;
中心を基準にしていますので、
ウインドウ幅を狭めたり広げたりしても、センタリングされた状態になります。
未指定の場合はbackground-position: 0 0;と同じで、左端、上端をあわせます。
http://www.htmq.com/style/background-position.sh …
これを応用した物がCSSスプライトです。
No.2
- 回答日時:
以前質問されたとき(
http://oshiete.goo.ne.jp/qa/7185610.html )、詳しい説明の場所を示して回答しました。( http://oshiete.goo.ne.jp/qa/7185610.html#a2 )まったく同じ回答になりますが
background-attachmentについては、 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … を参照
初期値(nitial)は、scrollなのでと国指定しなくても良い。
background-positionは、 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … を参照。
読まれたらお分かりのように、background-positionは背景画像の位置を指定するものですね。CSSスプライトは、あくまでそれを応用した技法であって、background-positionが指定してあるから、CSSスプライトであるわけではありません。background-positionの使用されているCSSの1%にも満たないでしょう。
前回の質問に対して、この様な掲示板システムですべてを答えるのは無理です。CSSスプライトのようなごく一部の応用方法を説明してしまうと、「background-position=CSSスプライト」という誤解を与えてしまいます。
誤解を与えないために、それぞれのプロパティの仕様書を示しました。
background-positionの値に数値を指定した場合。それが何を意味するかを理解してください。
以前の質問内容からご回答頂きましてありがとうございます。
background-positionから応用された技術がcssスプライトであることが分かりました。
また再度添付の仕様書を確認使用と思います。
画像のパーツをそれぞれbackground-positionで指定して、あたかも一つの画像に見えるようにしているのがcssスプライトということだと思いました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
lightbox2で画像を天地左右中央...
-
疑似要素で背景画像に指定したS...
-
IMGタグで画像の繰り返し使用は…
-
ページの上下に白い横線が入る
-
ワードプレスで事前定義されたc...
-
CSSで背景画像をランダムに表示...
-
背景画像をウィンドウサイズに...
-
background-repeat CSS で切れ...
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
キャプションの正しい付け方教...
-
【至急お助け!】チェックボッ...
-
横棒GIF左右ぴったしにするタグ...
-
gif画像でたまに背景がグレーに...
-
css:背景の縦長グラデーション...
-
CSS マウスオーバーでテキスト...
-
【Webサイト】画像が小さく表示...
-
javaスクリプトで背景画像をラ...
-
背景画像の上に透過GIF背景...
-
HTMLの画像の位置の指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報