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

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

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

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

Q&A

解決済

1回答

6590閲覧

スライドショー部分の画像のレスポンシブ化について

MAYAKO

総合スコア30

CSS3

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

0グッド

4クリップ

投稿2015/03/05 04:27

編集2015/03/05 04:27

MAYAKOです。
本日はスライドショーの画像のレスポンシブ化について質問させていただきます。
トップページの画像が数秒ごとに変わるようにスライドショーのjQueryプラグインを使用しているのですが、その部分がうまくレスポンシブ化されません。
つきましては、下記のコードと画像を見ながら、誤っている部分を指摘していただければと思います。
どうぞよろしくお願いいたします。

HTMLに記述しているコードは以下のようになっています。
<HTML記述>

<!DOCTYPE html>~<link rel="stylesheet"~部分は省略しています> <style type="text/css"> #slideshow { position:relative; width:100%; height:auto; } #slideshow img { position:absolute; top:0; left:0; z-index: 8; opacity:0.0; } #slideshow img.active { z-index: 10; opacity:1.0; } #slidewhow img.last-active { z-index:09; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <div id="container"> <header id="header"> <p id="slideshow"> <img src="~01.jpg" alt="~" class="active"> <img src="~02.jpg" alt="~"> <img src="~03.jpg" alt="~" class="last-active">

※スライドショーの機能自体は問題なくこちらの指定通りに作動します。
ただ、スライドショー部分(ボックス部分?)だけが、ブラウザを可変しながら確認すると、下図のような状態になり、ヘッダー部分から大きくはみ出て、メインコンテンツやサイドバー部分を覆ってしまいます。
![イメージ説明]WIDTH:600
どのようにすればいいのか、アドバイスをいただければと思います。

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

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

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

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

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

guest

回答1

0

ベストアンサー

レスポンシブの場合は、自動的に縮小された画像の高さを取るのが少し面倒です。
解決方法はいくつかあると思いますが、そのひとつとして、ウインドウのリサイズに合わせて自動的に親要素の高さを画像の高さに合わせるものを提示します。以下のソースをスクリプトの最後にでも置いてください。

lang

1$(window).on('load resize', function() { 2 $('#slideshow').height($('#slideshow img').outerHeight(true)); 3});

最初に読み込まれたときとリサイズイベントが発生したときに高さを調整しています。

投稿2015/03/05 08:42

編集2015/03/05 08:43
naga3

総合スコア1293

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

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

MAYAKO

2015/03/05 09:09

naga3様 ご回答ありがとうございます。 早速↓このような感じで配置してみました。 <script>中略 $(function() { setInterval( "slideSwitch()", 5000 ); }); $(window).on('load resize', function() { $('#slideshow').height($('#slideshow img').outerHeight(true)); }); </script> すると、Chrome、Opera、Firefoxのほとんどのブラウザーでは無事に反映されました! ここで喜んでいたのですが、Internet Explorerだけは崩れたままです…。 IEに対応させるにはどうしたらよいのでしょうか?
naga3

2015/03/05 23:41

IE11なら崩れなかったんですが、バージョンは何でしょう。
MAYAKO

2015/03/06 01:53

naga様、おはようございます。 調べましたら、下記のとおりでした。 Internet Explorer11 バージョン:11.0.9600.17633となっております。 これは同じIE11でも旧型のバージョンなのでしょうか?
MAYAKO

2015/03/06 01:54

捕捉です。 更新バージョンは11.0.16(KB3021952)となっております。
MAYAKO

2015/03/06 02:02

すみません…もう一回ためしに更新して、読み込みきるまで1分ほど待ってみたら、 普通にIE11でも表示されました。ご迷惑おかけしました。 naga3様をベストアンサーにさせていただいて、回答は締め切ります。 この度はご助力いただき、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問