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

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

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

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

CSS

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

Q&A

1回答

332閲覧

スマホでbackground-imageがホバー化してしまいます。

takawork

総合スコア95

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/10/10 08:58

background-imageを設定してPCでは上手く表示出来たのですが、
iphoneのクロームやsafariではデフォルトでは白くなっていて、記事のカラムをタップすると背景がそのカラムの周りだけ表示される、といった謎の現象が起きています。
まるでホバーみたいな感じです。(カラムは記事をタップすると右が赤くなる仕様です。検索結果の部分も背景画像の範囲なのですが、これはタップ出来ないからなのか終始なにも表示されません。)
最初はbeforeで掛けた白いマスクが問題かと思ったのですが、それを外して画像だけをbackground-imageで表示しても同様の現象が起きてしまってお手上げです。
どうしたら直りますでしょうか?よろしくお願いします。

イメージ説明
↑タップ前
イメージ説明
↑タップ後

<div class="search"> <!-- 3. 検索結果の取得と表示 --> <section class="result-cover "> <?php $the_query = new WP_Query($args); if($the_query->have_posts()) : ?> <div class="result-title" > <h1>検索結果</h1> </div> <div class="result"> <?php while($the_query->have_posts()) : $the_query->the_post(); ?> <!-- 記事 --> <div class="gu-box"> <a href="<?php the_permalink(); ?>" class="guide2-box"> <div class="guide2-box-thumbnail"> <?php the_post_thumbnail('medium'); ?><!-- サムネ --> </div> <div class="guide2-box-txt"> <div class="guide2-box-text-ttl"><!-- タイトル --> <h1><?php the_title(); ?></h1> </div> <div class="guide2-box-text-dtl"><!-- 抜粋 --> <p><?php the_excerpt(); ?></p> </div> </div> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php else : ?> <p>該当する代理店はありませんでした。</p> <?php endif; ?> </section> </div><!-- search -->
.result-cover { height: auto; background-image: url("../img/cat.jpg"); background-attachment: fixed; background-size: cover; position: fixed; position: relative; z-index: 7; padding-bottom: 30px; } .result-cover::before { /* 透過した黒を重ねる */ /* 透過した白を重ねる */ background-color: rgba(255, 255, 255, 0.5); /* どの範囲に重ねるかを指定 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ' '; z-index: 8; } .search .result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .result-title { color: white; text-shadow: 1px 1px 0 black,-1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black; padding-top: 20px; z-index: 12; position: relative; } .result-title h1 { font-size: 42px; font-weight: bold; } .gu-box { z-index: 11; } .result .guide2-box { max-width: 1000px; margin: 10px 10px; } .search .result .article { margin-right: 20px; } .result.guide2-box-text-ttl { font-weight: bold; } .guide2-box-text-ttl h1 { font-size: 26px !important; } .guide2-box-text-dtl p { font-size: 16px !important; } .result a { text-decoration: none; } .guide2-box { background-color: white; border-radius: 8px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 5px; border-right: solid 18px #ffc06e; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); -ms-flex-negative: 0; flex-shrink: 0; } @media only screen and (max-width: 800px) { .heart-wink { margin: 0 auto; } .guide2-box { display: block; } .guide2-box-thumbnail img { text-align: center; width: 100%; height: 100%; } .guide2-box-text-ttl { text-align: center; padding-top: 6px; padding-top: 6px; } .guide2-box-text-ttl h1 { font-size: 34px !important; } .guide2-box-text-dtl p { font-size: 18px !important; } } .guide2-box-thumbnail img { border: 2px solid #D1CCCC; } .guide2-box-txt { margin: 0 10px; text-align: left; } .guide2-box-text-ttl h1 { color: #0033cc; font-size: 20px; font-weight: bold; margin-bottom: 2px; } .guide2-box-text-dtl p { color: black; font-size: 16px; font-weight: 600; } .guide2-box:hover h1 { color: red; } .guide2-box:hover { border-right: solid 18px #EA4335; }

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

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

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

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

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

guest

回答1

0

スマホのブラウザによっては

css

1 background-attachment: fixed;

は効きません

https://caniuse.com/?search=background-attachment

cssはブラウザごとに対応に違いがありますので
上手くいかない場合は
Can I use などで確認すると良いかと思います^^

投稿2020/10/10 11:06

-millmill-

総合スコア674

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

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

takawork

2020/10/11 11:43

そうなんですか? https://www.lim-japan.com/ こちらのページではスマホでも上手くいってるようなのですが、なにが違うのでしょうか? Can I useとはサイトですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問