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

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

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

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

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

2回答

1664閲覧

初めて質問します。スライドショーの画像の右半分が表示されない原因が分かりません!

t_r_u_r_

総合スコア7

HTML5

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

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2018/03/28 07:13

編集2018/03/28 08:15

トップのイメージをスライドショーにしたい。

1.スマホの横スクロールを消すため、jQueryの数値を画像サイズに変更すると、横揺れは解消されたが、デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。 2.テストサイトを見た後、他のサイトから戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で)

該当のソースコード

html

1<script type="text/javascript"> 2 $(window).load(function() { 3 $('slid ul li').fadeIn(10000);}); 4</script> 5<!--CSSで非表示にした.slideをフェードインで表示--> 6 7 <div class="slide"> 8 <ul> 9 <li><a><img src="images/ribbon_pumps_590_autoline.svg" alt="リボンパンプスと590のイラスト" height="600" width="800" /></a></li> 10 <li><a><img src="images/Do_you_feel_autoline.svg" alt="Do you feel?" width="800" height="600" /></a></li> 11 <li><a><img src="images/pumps_76219_autoline.svg" alt="ミュールと76219のイラスト" width="800" height="600" /></a></li> 12  <li><a><img src="images/Is_it_beautiful_autoline.svg" alt="Is it beautiful?" width="800" height="600" /></a></li> 13 <li><a><img src="images/mule_76075_autoline.svg" alt="と76075のイラスト" width="800" height="600" /></a></li> 14 <li><a><img src="images/Is_it_fun_autoline.svg" alt="Is it fun?" width="800" height="600" /></a></li> 15 <li><a><img src="images/ribbon_pumps_590_autoline.svg" alt="リボンパンプスと590のイラスト" width="800" height="600" /></a></li> 16 <li><a><img src="images/Is_it_real_autoline.svg" alt="Is it real?" width="800" height="600" /></a></li> 17 <li><a><img src="images/christina_autoline.svg" alt="クリスティーナ" width="800" height="600" /></a></li> 18 </ul> 19 </div> 20```→ 普通に読み込むと非表示になりますが、そのサイトを見た後、他のサイトを見て戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で) 21 22 23```CSS 24img 25{width: 100vw; /*for RWD*/ 26 margin: auto; 27 padding:50px 0 50px 0;} 28 29body 30{margin: 0; 31 text-align: center;} 32 33.slide 34{width:100%; 35height: 660px; 36margin: 50px auto; 37position:relative;} 38 39.slide img 40{position:absolute; 41left:0; 42top:0;} 43 44.slide ul li 45{display: none;} 46 47 48```→ レスポンシブは問題ないのですが、スライドショーの画像の右半分が表示されなくたった。 49→ .sideのheight:660pxをautoにすると画像が表示されなくなります。 50 51 52```JavaScript 53//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー 54$(function(){ 55var $width =980; // 横幅 56var $height =660; // 高さ 57var $interval = 7000; // 切り替わりの間隔(ミリ秒) 58var $fade_speed = 7000; // フェード処理の早さ(ミリ秒) 59$(".slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height}); 60$(".slide ul li").hide().css({"position":"absolute","top":0,"left":0}); 61$(".slide ul li:first").addClass("active").show(); 62setInterval(function(){ 63var $active = $(".slide ul li.active"); 64var $next = $active.next("li").length?$active.next("li"):$(".slide ul li:first"); 65$active.fadeOut($fade_speed).removeClass("active"); 66$next.fadeIn($fade_speed).addClass("active"); 67},$interval); 68}); 69```→ スマホの横スクロールを消すため、Javascriptの数値を画像サイズに変更すると、横揺れは解消されたが、 70デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。 71 72初めてホームページを作ります。 73検索しまくっても、どうしても解決しないので、よろしくお願いしますm(__)m

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

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

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

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

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

defghi1977

2018/03/28 07:18

1について, windows版safariは既にサポートが切れており, セキュリティ上の懸念から利用は避けるべきです. また、機能的にも既に数世代前のものとなっており, windows版safariにこだわる必要はないと思います.
t_r_u_r_

2018/03/28 07:35

早速の回答ありがとうございます! では、windows版safariで問題が出るのは仕方ないのですね。ホッとしました(*'▽')。質問再編集して投稿させていただきました。ありがとうございます。
m.ts10806

2018/03/28 07:37

タグのsafariにはどのような意図が?確認されているのはiPhoneでしょうかAndroidでしょうか?また「検索しまくった」結果も質問に追記してください。もしかしたら解釈や導入の仕方が間違っているかもしれませんし、提示された情報以外で解決方法を回答者が提案できるからです。
t_r_u_r_

2018/03/28 08:35

編集前に、windows版safariの問題を質問してたので、タグ消し忘れてました。(windows版safariはサポート終了したと回答頂いたので)確認は、windows/chrome,,Firefox,IE、mac/chrome,safari,Firefox,IE、iPhone/chrome,safari,Firefoxです。
guest

回答2

0

ベストアンサー

1.スマホの横スクロールを消すため、jQueryの数値を画像サイズに変更すると、横揺れは解消されたが、デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。

スライドショー画像を特定の領域にフィットさせるだけであればCSSのobject-fit:contain;(及びobject-positionプロパティ)で制御できます.

CSS

1.slide{ 2 width:100%; 3 height: 660px; 4 position: relative; 5} 6.slide img { 7 width: 100%; 8 height: 100%; 9 object-fit: contain; 10 vertical-align: bottom; 11}

参考
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

2.テストサイトを見た後、他のサイトから戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で)

setIntervalメソッドで予約された処理はタブにフォーカスがあろうとなかろうと容赦なく定期的に実行されます. 一方, アニメーションの実行には(実装にもよりますが)タブにフォーカスが当たっている必要があり, そうでなかった場合は処理キューに積み残されていきます. そのため, 別のタブを見てから元のタブに戻るとこの処理の積み残しが一度に「ぐしゃっ」と実行されるのです.
※これは推測です.

であれば答えは簡単で, documentにフォーカスが存在している時に限りスライドの切り替えを行えば問題の発生頻度が下がるはずです.

JavaScript

1//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー 2$(function(){ 3 var $width =980; // 横幅 4 var $height =660; // 高さ 5 var $interval = 7000; // 切り替わりの間隔(ミリ秒) 6 var $fade_speed = 7000; // フェード処理の早さ(ミリ秒) 7 $(".slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height}); 8 $(".slide ul li").hide().css({"position":"absolute","top":0,"left":0}); 9 $(".slide ul li:first").addClass("active").show(); 10 setInterval(function(){ 11 if(!document.hasFocus()){return;}//フォーカスが無かったら処理しない 12 var $active = $(".slide ul li.active"); 13 var $next = $active.next("li").length?$active.next("li"):$(".slide ul li:first"); 14 $active.fadeOut($fade_speed).removeClass("active"); 15 $next.fadeIn($fade_speed).addClass("active"); 16 },$interval); 17});

投稿2018/03/28 08:20

defghi1977

総合スコア4756

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

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

defghi1977

2018/03/28 08:39

IEは・・・どうすっぺ
t_r_u_r_

2018/03/28 09:21

defghi1977さま 回答有難うございます! 2.if(!document.hasFocus()){return;}の一行で、どの環境も解決しました! 感動です(*'▽') 1.は、上記のコードに差し替えると、左寄席になるので、画像の右半分は切れなくなったのですが、レスポンシブが効かなくなり、画像の下部も少し切れてしまします。もう少し調整してみます。 取り急ぎご報告です。ありがとうございますm(__)m
t_r_u_r_

2018/03/29 04:23

1の問題も数値を変えることで解決しました! ありがとうございましたm(__)m
guest

0

//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー
$(function(){
var $width =980; // 横幅
var $height =660; // 高さ

//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー
$(function(){
var $width =2000; // 横幅
var $height =1500; // 高さ

上記の数値をウィンドウの横幅に近いサイズを入れたら、画面いっぱいにh画像が切れず表示されました。(以前試した際は上手くいかなかったのですが...)

投稿2018/03/29 04:24

t_r_u_r_

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問