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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

1回答

979閲覧

Slick.js が iPhone でだけ表示されない

Parom

総合スコア1

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/05/30 07:53

実現したいこと

ファーストビューの画像をカルーセルで表示したい。

前提

slick.js を使用して画像が右から左に流れて入れ替わっていく表示をしています。
Windows の Chrome では、通常の表示も
デベロッパーツールを使用してスマートフォンの画面幅で表示した場合も正常に表示されています。
Android 実機の Chrome でも表示してみましたが、そちらも正常でした。

ですが、iPhone 実機の Safari 、Chrome で表示すると、
カルーセル部分が全く表示されませんでした。

発生している問題・エラーメッセージ

Windows の Chrome のデベロッパーツールで見ても
特にエラーなどは出ていません。

該当のソースコード

読み込み

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/ rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

スクリプト

if($('.top_bg').length){ $('.top_bg').slick({ arrows: false, // 前・次のボタンを表示する dots: false, // ドットナビゲーションを表示する speed: 1000, // スライドさせるスピード(ミリ秒) slidesToShow: 1, // 表示させるスライド数 centerMode: true, centerPadding: 0, autoplay:true, responsive: [ { breakpoint: 768, // 399px以下のサイズに適用 settings: { slidesToShow: 1, }, }, ], }); };

HTML

<ul class="top_bg"> <li><img src="/img/top/header_slide_01.png" alt="メインビジュアル1" width="2400" height="1174"></li> <li><img src="/img/top/header_slide_02.png" alt="メインビジュアル2" width="2400" height="1174"></li> <li><img src="/img/top/header_slide_03.png" alt="メインビジュアル3" width="2400" height="1174"></li> <li><img src="/img/top/header_slide_04.png" alt="メインビジュアル4" width="2400" height="1174"></li> </ul>

試したこと

<ul>タグのCSSに問題がないか、確認のため、 <ul>タグの直下に<img>タグを入れてみたところ、画像は表示されたので、 <li>タグ以下に問題がありそうな気がします。

補足情報(FW/ツールのバージョンなど)

問題が発生しているサイトはこちらです。(現在 WordPress へ移行中)
https://f-f-life.com/recruit/

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

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

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

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

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

Lhankor_Mhy

2023/05/30 08:39

PC の Firefox でも表示されませんでした。
guest

回答1

0

ベストアンサー

CSSネストが使えるのは、現在のところ最新のChrome系だけです。
CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc | CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc

css

1.top_bg .slick-slide { 2 .slick-initialized & { 3 display: block; 4 } 5}

https://f-f-life.com/recruit/wp-content/themes/xeory_extension_child/css/recruit.css

SCSSとしてコンパイルしてみてはどうでしょうか。

投稿2023/05/30 08:45

Lhankor_Mhy

総合スコア35811

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

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

Lhankor_Mhy

2023/05/30 08:47

あ、Safari も 16.5 で対応したんですね。見落としてました。 OSをアップデートすれば、解決するかもしれないですね。
Parom

2023/05/30 12:36

ご回答ありがとうございます! たしかに先ほど iPhone の OS のアップデートを行ったところ、 正常に表示されるようになりました。 しばらくの間は表示されない人も出てしまいますが、 iOS は Android に比べて格段に最新 OS を使う方が多いと思いますので、 あまりここに手をかけず、このままで進める事にします。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問