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

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

ただいまの
回答率

90.51%

  • jQuery

    7749questions

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

  • HTML5

    4795questions

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

  • CSS3

    2466questions

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

  • レスポンシブWebデザイン

    231questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 2,610

MAYAKO

score 29

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">

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

レスポンシブの場合は、自動的に縮小された画像の高さを取るのが少し面倒です。
解決方法はいくつかあると思いますが、そのひとつとして、ウインドウのリサイズに合わせて自動的に親要素の高さを画像の高さに合わせるものを提示します。以下のソースをスクリプトの最後にでも置いてください。
$(window).on('load resize', function() {
  $('#slideshow').height($('#slideshow img').outerHeight(true));
});
最初に読み込まれたときとリサイズイベントが発生したときに高さを調整しています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/03/05 18: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に対応させるにはどうしたらよいのでしょうか?

    キャンセル

  • 2015/03/06 08:41

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

    キャンセル

  • 2015/03/06 10:53

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

    キャンセル

  • 2015/03/06 10:54

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

    キャンセル

  • 2015/03/06 11:02

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

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7749questions

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

  • HTML5

    4795questions

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

  • CSS3

    2466questions

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

  • レスポンシブWebデザイン

    231questions

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