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

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

ただいまの
回答率

90.32%

  • HTML

    9597questions

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

  • CSS

    6216questions

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

  • HTML5

    4310questions

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

  • CSS3

    2215questions

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

CSSのみで作ったスライドショー。きちんと最後まで綺麗に表示されない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 461
退会済みユーザー

退会済みユーザー

下記のコードは文字列のみのスライドショーで手動でスライドさせています。
しかし、このスライドショーは、4つ目のスライドから5個目のスライドに移動させようとすると挙動がおかしくなります。
5個目に移動すると思ったら、まだ6個目があるのに1個目に戻り、そこから2個めにスライドさせると一瞬1個目が
表示されてから2個目、3個目が表示されてしまいます。

どうしたら6個目まで綺麗に表示させる事ができるでしょうか。
(※投稿の文字数制限があったので戻るボタンの部分のCSSは省略してあります。)

「スライドショー1個目」
イメージ説明

<HTML>

<div id="sub_box">
<div class="css3-slider">
    <div class="slider-view">
      <input type="radio" id="slider-back1" class="slider-radio" name="slider">
      <input type="radio" id="slider-back2" class="slider-radio" name="slider">
      <input type="radio" id="slider-back3" class="slider-radio" name="slider">
      <input type="radio" id="slider-back4" class="slider-radio" name="slider">
      <input type="radio" id="slider-back5" class="slider-radio" name="slider">
      <input type="radio" id="slider-back6" class="slider-radio" name="slider">

      <input type="radio" id="slider-next1" class="slider-radio" name="slider">
      <input type="radio" id="slider-next2" class="slider-radio" name="slider">
      <input type="radio" id="slider-next3" class="slider-radio" name="slider">
      <input type="radio" id="slider-next4" class="slider-radio" name="slider">
      <input type="radio" id="slider-next5" class="slider-radio" name="slider">
      <input type="radio" id="slider-next6" class="slider-radio" name="slider">

      <div class="slider-view__controllers">
        <div class="slider-view__controllers__icon-set">
          <label for="slider-back1" class="slider-back"> < </label>
          <label for="slider-next1" class="slider-next"> > </label>
        </div>
        <div class="slider-view__controllers__icon-set">
          <label for="slider-back2" class="slider-back"> < </label>
          <label for="slider-next2" class="slider-next"> > </label>
        </div>
        <div class="slider-view__controllers__icon-set">
          <label for="slider-back3" class="slider-back"> < </label>
          <label for="slider-next3" class="slider-next"> > </label>
        </div>
        <div class="slider-view__controllers__icon-set">
          <label for="slider-back4" class="slider-back"> < </label>
          <label for="slider-next4" class="slider-next"> > </label>
        </div>
        <div class="slider-view__controllers__icon-set">
          <label for="slider-back5" class="slider-back"> < </label>
          <label for="slider-next5" class="slider-next"> > </label>
        </div>
        <div class="slider-view__controllers__icon-set">
          <label for="slider-back6" class="slider-back"> < </label>
          <label for="slider-next6" class="slider-next"> > </label>
        </div>
      </div>
      <div class="slider-view__move">
        <div class="slider__content__item_ slider-view__move_text">
          <p>制作の流れ</p>
        </div>
        <div class="slider-view__move_text">
          <h2>02.</h2>
          <p class="text_p1">TEST <B/p>
          <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
        </div>
        <div class="slider-view__move_text">
          <h2>03.</h2>
          <p class="text_p1">TEST C</p>
          <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
        </div>
        <div class="slider-view__move_text">
          <h2>04.</h2>
          <p class="text_p1">TEST D</p>
          <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
        </div>
        <div class="slider-view__move_text">
          <h2>05.</h2>
          <p class="text_p1">TEST E</p>
          <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
        </div>
        <div class="slider-view__move_text">
          <h2>06.</h2>
          <p class="text_p1">TEST F</p>
          <p class="text_p2">テストテストテストテストテストテストテストテストテストテスト</p>
        </div>
      </div>
    </div>
  </div>
</div>

<CSS>

/* スライダー用のinputは非表示 */
    .slider-radio {
        display: none;
    }

    /* スライダー部分 */
    .css3-slider {
        margin: 0 auto;
        width: 600px;
    }
    .slider-view {
        height:400px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .slider-view__move {
        position: absolute;
    }
    .slider-view__move_text {
        width: 600px;
    }
    .slider-view__move_text:nth-of-type(1) { left: 0; position: absolute; }
    .slider-view__move_text:nth-of-type(2) { left: 600px; position: absolute; }
    .slider-view__move_text:nth-of-type(3) { left: 1200px; position: absolute; }
    .slider-view__move_text:nth-of-type(4) { left: 1800px; position: absolute; }
    .slider-view__move_text:nth-of-type(5) { left: 2400px; position: absolute; }
    .slider-view__move_text:nth-of-type(6) { left: 3000px; position: absolute; }

    /* スライドショーの文字に設定するアニメーション */
    #slider-next1:checked ~ .slider-view__move {
        -webkit-animation:
            slider-next1-animation 1s linear 1 normal 0s both
        ;
        animation:
            slider-next1-animation 1s linear 1 normal 0s both
        ;
    }
    #slider-next2:checked ~ .slider-view__move {
        -webkit-animation:
            slider-next2-animation 1s linear 1 normal 0s both
        ;
        animation:
            slider-next2-animation 1s linear 1 normal 0s both
        ;
    }
    #slider-next3:checked ~ .slider-view__move {
        -webkit-animation:
            slider-next3-animation 1s linear 1 normal 0s both
        ;
        animation:
            slider-next3-animation 1s linear 1 normal 0s both
        ;
    }
    #slider-next4:checked ~ .slider-view__move {
        -webkit-animation:
            slider-next4-animation 1s linear 1 normal 0s both
        ;
        animation:
            slider-next4-animation 1s linear 1 normal 0s both
        ;
    }
    #slider-next5:checked ~ .slider-view__move {
        -webkit-animation:
            slider-next5-animation 1s linear 1 normal 0s both
        ;
        animation:
            slider-next5-animation 1s linear 1 normal 0s both
        ;
    }
    #slider-next6:checked ~ .slider-view__move {
        -webkit-animation:
            slider-next6-animation 1s linear 1 normal 0s both
        ;
        animation:
            slider-next6-animation 1s linear 1 normal 0s both
        ;
    }

    /* アニメーションの設定 */
    @keyframes slider-next1-animation {
        0%  { left: 0; }
        100% { left: -600px; }
    }
    @keyframes slider-next2-animation {
        0%  { left: -600px; }
        100% { left: -1200px; }
    }
    @keyframes slider-next3-animation {
        0%  { left: -1200px; }
        100% { left: -1800px; }
    }
    @keyframes slider-next4-animation {
        0%  { left: -1800px; }
        100% { left: -2400px; }
    }
    @keyframes slider-next5-animation {
        0%  { left: -2400px; }
        100% { left: -3000px; }
    }
    @keyframes slider-next6-animation {
        0%  { left: -3000px; }
        0% { left: -3600px; }
    }

    /* 前後に進むためのボタン部分 */
    .slider-view__controllers {
        position: relative;
        top: 40%;
        z-index: 9999;
    }
    .slider-view__controllers__icon-set {
        display: none;
        position: relative;
    }
    .slider-view__controllers__icon-set:nth-of-type(1) {
        display: block;
    }
    .slider-back, .slider-next {
        position: absolute;
    }
    .slider-next {
        right: 0;
    }

    /* 前後に進むためのボタンがクリックされた時の挙動 */
    #slider-next1:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(1)
    ,#slider-next2:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(2)
    ,#slider-next3:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(3)
    ,#slider-next4:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(4)
    ,#slider-next5:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(5)
    ,#slider-next6:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(6)
    {
        display: none;
    }
    #slider-next1:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(2)
    ,#slider-next2:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(3)
    ,#slider-next3:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(4)
    ,#slider-next4:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(5)
    ,#slider-next5:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(6)
    ,#slider-next6:checked ~ .slider-view__controllers > .slider-view__controllers__icon-set:nth-of-type(1)
    {
        display: block;
    }

#sub_box {
width:650px;
border: solid #000 1px;
}

.slider__content__item_ {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    display: -webkit-flex;
    -ms-justify-content: center;
    -ms-align-items: center;
    display: -ms-flex;
    display: flex;        /* flexコンテナ化 */
    font-size:42px;
    font-weight:bold;
    text-align:center;
}

h2 {
    margin:20px 0 15px 60px;
    color:#47A095;
}

.text_p1 {
    margin:0 60px 20px 60px;
    font-size:24px;
    font-weight:bold;
}

.text_p2 {
    margin:0 60px 0 60px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

HTML 50行目

          <p class="text_p1">TEST B/p> <!-- 誤 -->
          <p class="text_p1">TEST B</p>

HTML 68行目

        <div class="sslider-view__move_text"> <!-- 誤 -->
        <div class="slider-view__move_text">

CSS 99行目

        100% { left: -3000opx; } /* 誤 */
        100% { left: -3000px; }

CSS 103行目

        100% { left: -3600opx; } /* 誤 */
        100% { left: -3600px; }

また、おそらく103行目は

        100% { left: 0; }

にしないと1ページ目に戻らないのではないかと思いますがいかがでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/19 13:03

    ありがとうございます。すいません。ご指摘いただいたのは全てここでの記述ミスです。それから戻るに関してはちゃんと動いているのですが、進むボタンに説明にあるように異常があります。

    キャンセル

  • 2018/07/19 13:09

    修正しました!

    キャンセル

  • 2018/07/19 13:18

    すいません!これは実は1万文字以上ある元のソースコードがあるのですが、そこも「3600opx」となっていました。申し訳ありません。何度も見返したのですが、全然気づきませんでした。キチンと動いております。お騒がせいたしました!

    キャンセル

  • 2018/07/19 13:22

    6→1も大丈夫そうですね。
    解決できたようで何よりです。

    キャンセル

  • 2018/07/19 13:25

    大丈夫そうです。おかしいなぁ。20回以上見直していたのですが…本当にケアレスミスです。お騒がせしました。

    キャンセル

  • 2018/07/19 13:53

    6→1大丈夫そう…と書きましたが、FirefoxとChromeで見た際、一瞬白くなりますね。
    @keyframes slider-next6-animation {
    0% { left: 0; }
    100% { left: 0; }
    }
    にすることで解消できるかもしれません。
    スクロールして戻るようにしたい場合
    @keyframes slider-next6-animation {
    0% { left: -3000px; }
    100% { left: 0; }
    }
    で。

    キャンセル

  • 2018/07/19 17:05 編集

    ありがとうございます。試してみます!今IEとEdgeで確認してみましたがボタン部分を押しても次に進まないですね。
    一応IEやEdgeでもキレイに表示されるスライドショーではあったのですが、動かないのはわかりませんでした。
    labelあたりが悪さをしているようです。

    キャンセル

  • 2018/07/19 17:20

    現在質問にのせているコード(2スライド目の閉じタグだけ要修正)だけでテストしても同じですか?

    キャンセル

  • 2018/07/19 17:32

    理解度が低くてすいません。2スライド目の閉じタグとはHTMLのほうですか?

    キャンセル

  • 2018/07/19 17:42

    あ!わかりました!修正しましたがダメでした。IE,Edgeでは>や<の文字列で作られたlabelのボタンが押せません。

    キャンセル

  • 2018/07/19 19:10

    https://codepen.io/dit4410/pen/zLKXqY
    ↑これどうなってます?

    キャンセル

  • 2018/07/19 20:37

    そちらはきちんと動作します。多分大元の1万文字以上あるほうのコードに問題があるようです。お見せできないのでこちらで調査してみます。スライドショーの部分ではなく別の部分のCSSに問題があるようです。

    キャンセル

  • 2018/07/19 21:00

    そうですね。
    おそらく実際のコードの方の問題になってしまうと思います。
    特定は大変だと思いますが頑張ってください。

    キャンセル

  • 2018/07/19 21:57 編集

    ありがとうございます。一応スライドショーの部分だけページにしました。

    キャンセル

  • 2018/07/20 08:08

    こっちだと動きません

    キャンセル

  • 2018/07/20 08:34

    パスワードがかかっていてこちらからは確認できません。パスをかけるなりの理由(テスト段階なので外に出せない等)があるでしょうから、パスを外したり、教えたりしないでくださいね。

    キャンセル

  • 2018/07/20 14:52

    あ!パス外すの忘れていました!わかりました!しかし、どちらにせよ。スライドショー自体に問題がないことはわかったので、それ以外の場所で原因を探してみます!ありがとうございます!

    キャンセル

  • 2018/07/20 16:46

    原因がわかりました。 @media all and (min-width: 668px) { このようにメディアクエリをつけるとIEで動作しなくなるようです。

    キャンセル

  • 2018/07/20 17:12

    メディアクエリの外に記述したら動きました!ありがとうございました!

    キャンセル

  • 2018/07/21 08:42

    原因究明お疲れ様でした。
    解決したようで良かったです。

    キャンセル

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

  • HTML

    9597questions

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

  • CSS

    6216questions

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

  • HTML5

    4310questions

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

  • CSS3

    2215questions

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