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

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

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

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

CSS

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

Q&A

解決済

1回答

1140閲覧

画像背景の上にボタン画像を指定の位置に設置したい

usagi2115

総合スコア1

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

CSS

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

0グッド

0クリップ

投稿2023/05/30 00:09

コーディングについて初心者での質問で…失礼いたします。

①背景画像(cta)の上にボタン画像(botton)を指定の位置に設置したいのですが…どうしてもできません。
背景画像の下に配置されてしまいます。
relative,absoluteを使用するのはわかったのですが…設置されません。

②また全体を中央に配置したいのですが…左端に全体が表示されてしまいます。
HTMLで<body></body>の間に<center></center>を使用して中央揃えにするのは間違っていますか?

初心者でよくわかっていませんが…教えて頂ける方よろしくお願いいたします。

★出来上がりイメージ
イメージ説明
★背景画像ーcta
イメージ説明
★ボタンーbotton
イメージ説明

★HTML

<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="cva"> <div class="cta"> <p> <img src="img/cta.jpg"alt> </p> </div> <div class="botton"> <a href="https://www.google.com/"target="_blank"> <p> <img src="img/botton.png"alt> </p> </a> </div> </div> </body> </html>

★style.css

body { width: 100%; background-color: #fff; } .wrapper { max-width: 750px; margin: 0 auto; text-align: center; } .cta { margin-top: -5px; } img { width: 100%; margin: 0; } /*これをrelativeにしないとbuttonがどこを基準にして移動したらいいかわからない*/ .cva { position: relative; } .cva .botton { position:absolute; bottom: 18%; left: 0; right: 0; margin: auto; } .cva .botton img{ max-width: 90%; }

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

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

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

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

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

Lhankor_Mhy

2023/05/30 02:56

ご提示のコードを試してみましたが、問題なくボタンの画像が上になりました。 ここに書かれていないコードに原因があると思います。
usagi2115

2023/05/30 04:30

返信ありがとうございます。 コードをそのままコピペしているのですが…ボタンが背景画像の下に設置されます。 他の原因が何かわかりません。
Lhankor_Mhy

2023/05/30 04:36

本当にご提示いただいたコードそっくりそのままコピペであるならば、CSSを読み込んでいないと思います。 さすがにそれはないだろうと思ったので、当方で確認した時にはstyle要素を追加しましたが、どうでしょうか。
usagi2115

2023/05/30 07:43

Lhankor_Mhyさん ご丁寧な対応ありがとうございます!! htmlに下記のコードを入れたら反映されました!! <link rel="stylesheet" href="style.css"> すごく初心者なのですごく勉強になりました。ありがとうございます^^
Lhankor_Mhy

2023/05/30 08:12

ご解決されたようで何よりです。
guest

回答1

0

ベストアンサー

①背景画像(cta)の上にボタン画像(botton)を指定の位置に設置したいのですが…どうしてもできません。

提示のコードで指定位置(下から18%)に表示されています。提示されていない部分に原因があるのでは。

②また全体を中央に配置したいのですが…左端に全体が表示されてしまいます。

提示のHTMLにはCSSにあるwrapperクラスの要素がないので、全体をwrapperクラスで囲んだら中央に配置されます。
また、botton 内の画像が左端になるので、これは、.botton にtext-align: center; を設定すれば中央配置になります。

下記にサンプルを置いておきますので確認ください。

CodePen サンプル

投稿2023/05/30 04:49

hatena19

総合スコア33699

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

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

usagi2115

2023/05/30 07:57

hatena19さん 返信ありがとうございます。すごく初心者なので丁寧なコードすごく参考になりました。 全部中央に揃いました。ありがとうございました。 CSSが反映されていないことがわかりました。すごく勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問