効果的に画像を重ねて使う方法:CSS小技

ブログが作りたい!CSSの小技 > 効果的に画像を重ねて使う方法:CSS小技

効果的に画像を重ねて使う方法:CSS小技

効果的に画像を重ねて使う方法:CSS小技

CSSの小技(8)

画像を重ねて表示したい場合は、1枚は CSS(background-image)で、もう 1枚を HTMLで指定するという方法が一般的ではないかしら。

ただそれは、1箇所くらいなら、良いのですが、複数箇所となると、その度に CSSを更新する手間があり、また何より CSSファイルが大きくなってしまって、運営上も好ましくありません。

そこで、今回の CSSの小技は、background-imageを使わずに画像を重ねて使う方法をご紹介いたします。

何の話なのだか分からないかもしれませんが、ご覧いただくと「あ、こういうことにも使えるかも!」という発見があるかもしれません。


画像を重ねて表示するとは?

画像を重ねて表示するというのは、例えば次のように、「ピザ」の画像と「注文する」の画像 2枚を重ねて表示するような場合を言っています。

※:次の画像は表示用に加工してあるので 1枚ですけどね。

画像を重ねて表示

これでは、何の話だか分からないと思うので、サンプルを用意しました。(サンプルをご覧ください

画像は、どちらも HTMLファイル内で、<img>タグで記述し、それぞれ別のリンク先を指定してあります。


効果的に画像を重ねて使う方法(1)

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

画像1が奥に配置する画像で、画像2が手前に配置する画像です。そして、画像2には classで「order」を指定しあります。

クラス名「order」では、position(配置)プロパティで、相対配置を行っています。画像の大きさにあわせて、数値を変更してください。

ちょっと問題なのが、「position: relative;」している画像の大きさだけ、画像同士の間が空いてしまうのよね。う~む。


効果的に画像を重ねて使う方法(2)

方法(1)よりもかっこいい方法を、Tytoさんから教えていただいたので、あわせてご紹介いたします。

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、コメントにてTytoさんがおっしゃっている通りです。

こちらの方法(2)を利用すれば、画像同士の余計なスペースがなくなって、またスマートでもあります。(サンプルも用意しました

前の記事へ
次の記事へ

次回予告

次回は、サムネイル画像をきれいに並べる CSSの小技をご紹介します。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/04/24 更新日:2009/04/26

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

私は画像を重ね合わすよりも一つの画像として統合する道を
選んでしまいそうです。
CSSで画像の座標を調整し続けてていると、だんだん作業が
どうでもよくなってくる私なのでしたorz
こらえ性がないんですね~

mapタグ・areaタグ

fuminchuさん、こんばんは!(・∀・)/ぐいぶにん
いつもコメントありがとうございます。


そうですねー、画像 1枚で、mapタグ・areaタグという方法も、
ありますから、必ずしも CSSでってこともないですよねーん。

使い方は、そのときどきかもしれませぬ。

もっと簡単にできるといいんですけどねー。(´Д`;)

relativeとabsoluteで指定した方がいいかも知れません。

こんにちは。
ご無沙汰しています。

画像を重ねる時は、重ねたい画像2つをDIVタグか何かで囲み、そこにposition:relative、重ねたい画像の方にposiyion:absoluteを適用して場所を指定する方がへんな隙間ができなくて便利ですよ。

その時、親要素・子要素共に幅の値(できれば高さも)をきちんと指定してやること、a要素をdisplay:blockにしてbrで改行しないこと、a要素の方にpositionを指定してやること、あたりがポイントです。(もしご存知ならすみません)。

私も必要に応じてmapやareaを使うことがありますけれど、画像が読み込まれなかったりすると、何も表示されないケースもあるので基本的に避けています。便利なんですけれどね。後は、メイン画像を背景にして、imgタグでボタンを読み込んだりも。どちらにしても手間がかかることには違いないですよね。

ご無沙汰です。

Tytoさん、こんばんは!(・∀・)/ぐいぶにん
コメントありがとうございます。


試してみました。なるほどねー。
余計なスペースが入らなくて良いですね、これは。

勉強になりました。ヾ(*´∀`*)ノ
ありがとうございます。

別途、記事でも紹介させていただきたいと思います。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/492-be8c4e87
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて