質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

11098閲覧

cssでボタンの上に画像を重ねることはできますか?

terataka

総合スコア61

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/03/23 07:48

![イメージ説明]WIDTH:385
画像のような物を作りたいです。
ボタンの上に画像が重なっているようなものです。
(矢印画像は背景と同じ色の枠線があり、png等で作成)
これが何個もあるのと、それぞれのボタンはクリックするとそのボタン画像を拡大したものを小窓表示するため、出来ればボタン画像+少し重なった矢印画像を別途作るのは避けたいです。
ボタン1・2をdivで囲って、divの設定で最上部に矢印を持ってくるようなことはできませんか?
素人考えで、背景画像に矢印を設定しz-index:100;としてみましたが出来ませんでした。
方法があれば教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

come25136

2015/03/23 08:16

ボタン1・2が同時に拡大されるのですか?それともクリックされた方だけ拡大されるのですか?
terataka

2015/03/23 08:31

返答ありがとうございます。 ボタン1でボタン1の画像が拡大されます。(2個のボタン2個の画像が拡大です)
come25136

2015/03/23 08:49

できればサンプル画像がほしいのですが...
guest

回答2

0

ベストアンサー

position: absolute を使ってあげれば結構自由に配置できます。
jsdo.itでサンプル作ってみました。 http://jsdo.it/yunn1974/rJR7
(サンプルは画像使わず、すべてCSSでやってます。Chromeでのみ確認。)

投稿2015/03/23 08:22

編集2015/03/23 08:23
yunn

総合スコア144

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

:after:beforeといった擬似要素を使うことで、HTMLに書かれていないものをCSSで出現させることができます(参考)。

ただし、それらの擬似要素について、JavaScriptでイベントを設定したりはできないようです。

投稿2015/03/23 08:17

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問