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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

3回答

463閲覧

画像リンクする時としない時があるエラーを修正したい

naaS

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

1クリップ

投稿2024/06/11 05:57

実現したいこと

リンクが不安定な状態。エラーぜず、clickで指定のページへ移動できるようにしたい。

発生している問題・分からないこと

sliderの画像リンクをクリックしたときに、リンクでページ移動出来る時と、出来ずに画面再読み込みになってしまう時がある。

エラーメッセージ

error

1jクエリのバージョンを変える前は、ファイルにアクセスできませんでしたというエラーが出た。 2現在はありません。

該当のソースコード

こちらにコードを書きました。 https://jsfiddle.net/30v56qye/10/

html

1<div class="top_slide"> 2 <div class="slide"> 3<li> 4 <a href="bus_toppage.html" alt="slide_img"><img src="img/2357486_kankouao_1400.png" alt="Slide 1" /><div class="text-overlay">別ページへリンクします</div></a> 5 </li> 6 <li> 7 <a href="bus_toppage.html" alt="slide_img"><img src="img/1679585_1400.png" alt="Slide 2" /><div class="text-overlay">別ページへリンクします</div></a> 8 </li> 9 <li> 10 <a href="bus_toppage.html" alt="slide_img"><img src="img/1339937_1400_600.jpg" alt="Slide 3" /><div class="text-overlay">別ページへリンクします</div></a> 11 </li> 12 13上記の3画像は、bus_toppage.htmlへのリンクをする時と、しないときがあります。しないときは、画面再読み込み。 14i以下、残りの2画像は別なページへのリンクは行いません。 15将来新しページが出来た時に、リンクするかもしれません。 16 <li> 17 <a href="index.html" alt="slide_img"><img src="img/625842_1400.jpg" alt="Slide 4" /></a> 18 </li> 19 <li> 20 <a href="index.html" alt="slide_img"><img src="img/3025924_1400.jpg" alt="Slide 5" /></a> 21 </li> 22</div> 23</div> 24 25

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

jクエリのバージョンが古いことがリンクに影響している疑いを考えて、新しいバージョンにした。
z-indexを100単位で大きくした。しかし、リンク出来る時と出来ないときがあるエラーは相変わらず。

補足

特になし

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

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

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

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

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

Lhankor_Mhy

2024/06/11 06:27

jsFiddleで10回ほど試行しましたが、問題が再現しませんでした。 タイミングとかコツとかありますか?
naaS

2024/06/11 07:57

jsFiddleだと、十分に再現できていないのかもしれません。ネット上にclickテスト用のファイルをアップして操作できるようにしたいと思います。少しお待ちください。
Lhankor_Mhy

2024/06/11 08:07

あー、ローカルにコピペしたらなんとなくわかりました。
Lhankor_Mhy

2024/06/11 09:29

すみません、すでに回答しています。
naaS

2024/06/11 10:11

むしろそれだと逆にリンクしないとなりますので…違うような気がします。
Lhankor_Mhy

2024/06/11 10:36

そうなんですね。残念です。
Lhankor_Mhy

2024/06/12 06:31

『動的に動く、画像の上にfont、レイヤー』というのは別の話ですよね? 別の問題については別の質問を立てることをお勧めします。 もしリンクが押せない問題と関連があるのであれば、関連がわかるように書かれることをお勧めします。
Lhankor_Mhy

2024/06/12 06:34

コメントなくなった……?
naaS

2024/06/12 08:48

先ほど、他の方のコメントに対する返事を間違ってこの欄に投稿したので、削除させていただきました。すみません。動画を撮ってお見せできればと思ったのですが、アップする方法が有料だったり、お試し期間が限られていたり、どうしたものかと考え込んでいます。
Lhankor_Mhy

2024/06/12 09:15

そうなんですね。 KazuhiroHatano さんのご回答の通り、スタッキングコンテキストの問題ですので、回答の通りで解決できると思いますので頑張ってください。 また、ご提示いただいているページをダウンロードし私の回答のコードを追加したものでも、当方の環境では上手く動作しました。 いろいろお試しになるのがいいかと思いますよ。
guest

回答3

0

自己解決

text-overlayのみがリンク、周りの背景画像が非linkになっていて、決してランダムでリンク、非linkが決まるわけじゃないことに気が付きました。
このコードでは修正が出来ないと思ったので、一度はオーバーレイ以外で画像リンクを書く方法を調べて、ネットのあるサイトでは、静止画像があるコンテンツにposition: relative;、文字を表示させるpタグをposition: absoluteにしていました。
その応用でli要素をposition: relative; aをposition: absoluteにしたら、画像全体のリンクが可能にになりました。
偶然にもネット上にヒントがあったので、何とかできました。
アドバイスをして下さった方々、ありがとうございました。

投稿2024/06/14 05:10

編集2024/06/14 05:24
naaS

総合スコア6

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

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

0

aのdisplayをblockにしとかないとz-indexとかpositionとか機能しないです。
できればposition:absoluteにしているliの方で、z-indexの面倒を見た方がいいかと思います。
liにz-indexやtransformが指定された時に、aのz-indexがliの中で閉じ込められて、リンクが他のスライドより上に行かなくなります。

投稿2024/06/12 03:51

KazuhiroHatano

総合スコア7819

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

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

naaS

2024/06/12 06:51

コメントありがとうございます。 自分で書き直してみましたが、リンクする時としないときがあり、あまり変わりません。 /*ズームアップslider*/ .slide { display: flex; /*overflow: hidden;*/ margin-top: 0; width: 100%; } .slide ul { list-style-type: none; margin: 0; padding: 0; aspect-ratio: 2.3 / 1; /* 画像のアスペクト比に合わせる */ width: 100%; position: relative; } .slide li { position: absolute; margin-right: 0px; } .slide li .active { opacity: 1; } .slide li a { opacity: 0; transform: scale(1); transition: opacity 1s ease-in-out; } .slide li.active a { opacity: 1; display: block; } .slide li img { width: 100%; object-fit: cover; transform: scale(1); transition: transform 6s ease-in-out; } .slide li a.active img { transform: scale(1.05); display: block; } .text-overlay { position: absolute; bottom: 40%; left: 50%; transform: translate(-50%, -50%); /*top: 50%;5/15aiの指示で不要*/ color: white; font-size: 24px; text-align: center; /* テキストのセンター配置 */ max-width: 90%; /*5/15aiの指示で追記 テキストの最大幅を設定してはみ出しを防止 */ white-space: nowrap; /* 必要に応じてテキストの改行を防止 */ letter-spacing: 0.4em; line-height: 2.3em; font-family: serif; font-weight: bold; z-index: 100; } もしかして、まちがっているかもしれません。
naaS

2024/06/13 05:48 編集

ギブアップです。activeにdisplay:block;やz-indexを付けられるか混乱するので、自分には出来ないと感じました。 画像が迫ってくる機能も損なわれてしまいました。 いじる前のコードに戻しても、 文字の上をクリック。かろうじてリンクするかしないか。 周りの画像をクリック、リンクしない。 いじると、画像の切り替わりで、文字の位置がずれて、カクカク不自然な挙動になる。 このスライドのリンクはこれ以上修正は困難と感じました。
KazuhiroHatano

2024/06/14 05:23

z-indexを効かせるにはposition:relartive;にすることも必要です。 しかしまずは、混乱してしまうようであればなおさら、liのほうにactiveクラスを付与する形で組み直したほうが良いかと思います。いろいろ考え直し・書き直しにはなりますが、少なくともliの中で重なり順が閉じ込められてしまっているからうまくいっていないという可能性を消せます。 あと、類似のものを作ったさいの経験からのアドバイスとして、現在アクティブなスライドの前・後のスライドにprev・nextのクラスを付与するようにしておくといいです。最初と最後のスライドのところだけ突然消える・突然現れるみたいな感じになってしまったときの対処に必要になってきます。
naaS

2024/06/14 05:33 編集

ありがとうございます。>アクティブなスライドの前・後のスライドにprev・nextのクラスを付与 動的なjsにもprev・nextの動作を追記?でしょうか。これは試してみたいと思います。
guest

0

こうするとどうですか?

css

1.slide li { 2 position: absolute; 3 margin-right: 0px; 4 pointer-events: none; /* これ */ 5} 6 7.slide li .active { 8 opacity: 1; 9 z-index: 100; 10 pointer-events: auto; /* これ */ 11}

投稿2024/06/11 08:17

Lhankor_Mhy

総合スコア36410

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問