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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

542閲覧

CSSのみで作ったスライドショーで5個以上要素を追加すると表示がおかしくなる

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/05/06 07:33

編集2018/05/06 07:34

度々似たような質問ですいません。
このような質問は最後にします。
CSSのみで作ったクリックでスライドする4枚のスライドショーです。
これを5枚目以降追加すると表示がおかしくなります。
raidoボタン、labelを5個目、6個目と増やしていき、slider__contentクラスのwidthをスライドする要素の分だけ100%ずつ追加し、

.slider #slide05:checked~.slider__content { -webkit-transform:translate3d(-75%, 0, 0); transform:translate3d(-75%, 0, 0); } .slider #slide05:checked~label[for=slide03] { left:0; display:block } .slider #slide05:checked~label[for=slide03]:before { content:"<"; font-size:50px } .slider #slide05:checked~label[for=slide05] { right:0; display:block } .slider #slide05:checked~label[for=slide05]:before { content:">"; font-size:50px }

ここをHTMLで追加した要素に合わせてクラス名を変更しながらCSSに追加し、

-webkit-transform:translate3d(-75%, 0, 0); transform:translate3d(-75%, 0, 0);

ここを増やした要素に合わせて25%ずつ増やしているのですが、5枚目から表示がおかしくなります。
5枚目以降、何枚追加してもうまく表示されるようにするにはどうしたらいいでしょうか。

「5枚目からの挙動」
イメージ説明

<HTML> ```ここに言語を入力 <div class="container"> <div class="slider"> <input id="slide01" type="radio" name="slide" checked="checked"/> <input id="slide02" type="radio" name="slide"/> <input id="slide03" type="radio" name="slide"/> <input id="slide04" type="radio" name="slide"/> <label for="slide01"></label> <label for="slide02"></label> <label for="slide03"></label> <label for="slide04"></label> <div class="slider__content"> <div class="slider__content__item"> <h2>制作の流れ</h2> </div> <div class="slider__content__item"> メールにてお問い合わせ頂いてから、制作完了、納品までの大きな流れをご紹介します。 </div> <div class="slider__content__item">     電話にてお問い合わせ頂いてから、制作完了、納品までの大きな流れをご紹介します。 </div> <div class="slider__content__item">     手紙にてお問い合わせ頂いてから、制作完了、納品までの大きな流れをご紹介します。 </div> </div> </div> </div> ``` <CSS> ```ここに言語を入力 .container { -webkit-perspective:100px; perspective:100px; height:40vh; background-size:cover; position:relative; } .slider { opacity:.8; filter:alpha(opacity=80); background:#43A1E1; width:600px; height:300px; overflow:hidden; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .slider>input { position:absolute; width:0; height:0; top:0; left:0; visibility:hidden; opacity:0; filter:alpha(opacity=0); } .slider>label { position:absolute; top:50%; -webkit-transform:translate(-100%, -50%); -ms-transform:translate(-100%, -50%); transform:translate(-100%, -50%); display:block; width:50px; height:50px; line-height:50px; text-align:center; z-index:1000; cursor:pointer; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%); display:none; font:normal normal normal 14px/1 FontAwesome; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-transition:opacity .25s ease-out; transition:opacity .25s ease-out; } .slider>label:hover { opacity:.5; filter:alpha(opacity=50); } .slider__content { height:100%; width:400%; min-width:100%; display:inline-flex; -webkit-transition:-webkit-transform .5s ease-out; transition:transform .5s ease-out; } .slider__content__item { flex: 1 1 0; display:inline-block; height:100%; z-index:10; vertical-align:top; } .slider__content { width: 400%; display:inline-flex; /* white-space:nowrap; <- 削除 */ }

.slider__content__item {
flex: 1 1 0;
}

.slider #slide01:checked~.slider__content {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
.slider #slide01:checkedlabel[for=slide00] {
left:0;
display:block
}
.slider #slide01:checked
label[for=slide00]:before {
content:"<";
font-size:50px
}
.slider #slide01:checkedlabel[for=slide02] {
right:0;
display:block
}
.slider #slide01:checked
label[for=slide02]:before {
content:">";
font-size:50px
}
.slider #slide02:checked~.slider__content {
-webkit-transform:translate3d(-25%, 0, 0);
transform:translate3d(-25%, 0, 0);
}
.slider #slide02:checkedlabel[for=slide01] {
left:0;
display:block
}
.slider #slide02:checked
label[for=slide01]:before {
content:"<";
font-size:50px
}
.slider #slide02:checkedlabel[for=slide03] {
right:0;
display:block
}
.slider #slide02:checked
label[for=slide03]:before {
content:">";
font-size:50px
}
.slider #slide03:checked~.slider__content {
-webkit-transform:translate3d(-50%, 0, 0);
transform:translate3d(-50%, 0, 0);
}
.slider #slide03:checkedlabel[for=slide02] {
left:0;
display:block
}
.slider #slide03:checked
label[for=slide02]:before {
content:"<";
font-size:50px
}
.slider #slide03:checkedlabel[for=slide04] {
right:0;
display:block
}
.slider #slide03:checked
label[for=slide04]:before {
content:">";
font-size:50px
}
.slider #slide04:checked~.slider__content {
-webkit-transform:translate3d(-75%, 0, 0);
transform:translate3d(-75%, 0, 0);
}
.slider #slide04:checkedlabel[for=slide03] {
left:0;
display:block
}
.slider #slide04:checked
label[for=slide03]:before {
content:"<";
font-size:50px
}
.slider #slide04:checkedlabel[for=slide05] {
right:0;
display:block
}
.slider #slide04:checked
label[for=slide05]:before {
content:">";
font-size:50px
}

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

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

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

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

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

guest

回答1

0

ベストアンサー

数値の意味が分かるように、calcで書き直しておきました。

CSS

1.container { 2 -webkit-perspective:100px; 3 perspective:100px; 4 height:40vh; 5 background-size:cover; 6 position:relative; 7} 8.slider { 9 opacity:.8; 10 filter:alpha(opacity=80); 11 background:#43A1E1; 12 width:600px; 13 height:300px; 14 overflow:hidden; 15 position:absolute; 16 left:50%; 17 top:50%; 18 -webkit-transform:translate(-50%, -50%); 19 -ms-transform:translate(-50%, -50%); 20 transform:translate(-50%, -50%); 21} 22.slider>input { 23 position:absolute; 24 width:0; 25 height:0; 26 top:0; 27 left:0; 28 visibility:hidden; 29 opacity:0; 30 filter:alpha(opacity=0); 31} 32.slider>label { 33 position:absolute; 34 top:50%; 35 -webkit-transform:translate(-100%, -50%); 36 -ms-transform:translate(-100%, -50%); 37 transform:translate(-100%, -50%); 38 display:block; 39 width:50px; 40 height:50px; 41 line-height:50px; 42 text-align:center; 43 z-index:1000; 44 cursor:pointer; 45 -webkit-transform:translate(0, -50%); 46 -ms-transform:translate(0, -50%); 47 transform:translate(0, -50%); 48 display:none; 49 font:normal normal normal 14px/1 FontAwesome; 50 text-rendering:auto; 51 -webkit-font-smoothing:antialiased; 52 -moz-osx-font-smoothing:grayscale; 53 -webkit-transition:opacity .25s ease-out; 54 transition:opacity .25s ease-out; 55} 56.slider>label:hover { 57 opacity:.5; 58 filter:alpha(opacity=50); 59} 60.slider__content { 61 height:100%; 62 width:400%; 63 min-width:100%; 64 display:inline-flex; 65 -webkit-transition:-webkit-transform .5s ease-out; 66 transition:transform .5s ease-out; 67} 68.slider__content__item { 69 flex: 1 1 0; 70 display:inline-block; 71 height:100%; 72 z-index:10; 73 vertical-align:top; 74} 75.slider__content { 76 width: calc( 100% * 5 ); /*ここ*/ 77 display:inline-flex; 78 /* white-space:nowrap; <- 削除 */ 79} 80 81.slider__content__item { 82 flex: 1 1 0; 83} 84 85.slider #slide01:checked~.slider__content { 86-webkit-transform:translate3d( calc( -100% / 5 * 0 ), 0, 0); /*ここ*/ 87transform:translate3d( calc( -100% / 5 * 0 ), 0, 0); /*ここ*/ 88} 89.slider #slide01:checked~label[for=slide00] { 90left:0; 91display:block 92} 93.slider #slide01:checked~label[for=slide00]:before { 94content:"<"; 95font-size:50px 96} 97.slider #slide01:checked~label[for=slide02] { 98right:0; 99display:block 100} 101.slider #slide01:checked~label[for=slide02]:before { 102content:">"; 103font-size:50px 104} 105.slider #slide02:checked~.slider__content { 106-webkit-transform:translate3d( calc( -100% / 5 * 1 ), 0, 0); /*ここ*/ 107 transform:translate3d( calc( -100% / 5 * 1 ), 0, 0); /*ここ*/ 108} 109.slider #slide02:checked~label[for=slide01] { 110left:0; 111display:block 112} 113.slider #slide02:checked~label[for=slide01]:before { 114content:"<"; 115font-size:50px 116} 117.slider #slide02:checked~label[for=slide03] { 118right:0; 119display:block 120} 121.slider #slide02:checked~label[for=slide03]:before { 122content:">"; 123font-size:50px 124} 125.slider #slide03:checked~.slider__content { 126-webkit-transform:translate3d( calc( -100% / 5 * 2 ), 0, 0); /*ここ*/ 127 transform:translate3d( calc( -100% / 5 * 2 ), 0, 0); /*ここ*/ 128} 129.slider #slide03:checked~label[for=slide02] { 130left:0; 131display:block 132} 133.slider #slide03:checked~label[for=slide02]:before { 134content:"<"; 135font-size:50px 136} 137.slider #slide03:checked~label[for=slide04] { 138right:0; 139display:block 140} 141.slider #slide03:checked~label[for=slide04]:before { 142content:">"; 143font-size:50px 144} 145.slider #slide04:checked~.slider__content { 146-webkit-transform:translate3d( calc( -100% / 5 * 3 ), 0, 0); /*ここ*/ 147transform:translate3d( calc( -100% / 5 * 3 ), 0, 0); /*ここ*/ 148} 149.slider #slide04:checked~label[for=slide03] { 150left:0; 151display:block 152} 153.slider #slide04:checked~label[for=slide03]:before { 154content:"<"; 155font-size:50px 156} 157.slider #slide04:checked~label[for=slide05] { 158right:0; 159display:block 160} 161.slider #slide04:checked~label[for=slide05]:before { 162content:">"; 163font-size:50px 164} 165.slider #slide05:checked~.slider__content { 166-webkit-transform:translate3d( calc( -100% / 5 * 4 ), 0, 0); /*ここ*/ 167transform:translate3d( calc( -100% / 5 * 4 ), 0, 0); /*ここ*/ 168} 169.slider #slide05:checked~label[for=slide04] { 170left:0; 171display:block 172} 173.slider #slide05:checked~label[for=slide04]:before { 174content:"<"; 175font-size:50px 176} 177.slider #slide05:checked~label[for=slide06] { 178right:0; 179display:block 180} 181.slider #slide05:checked~label[for=slide06]:before { 182content:">"; 183font-size:50px 184}

投稿2018/05/06 08:23

Lhankor_Mhy

総合スコア35860

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

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

退会済みユーザー

退会済みユーザー

2018/05/06 08:24

度々ありがとうございます。計算式を見て自分で理解できるように咀嚼いたします。
退会済みユーザー

退会済みユーザー

2018/05/06 08:33

ありがとうございます。うまくいきましたし、計算の理解もある程度できました。今後は色々自分でももっと調べて理解をもっと深めようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問