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

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

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

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

HTML

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

CSS

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

Q&A

2回答

390閲覧

JavaScriptを使用せずに1画面に複数枚のコンテンツが表示されるスライダーを実装したい。

leomessi

総合スコア12

JavaScript

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

HTML

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

CSS

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

2グッド

2クリップ

投稿2024/02/28 09:03

編集2024/02/28 09:05

実現したいこと

環境上JSを使用できない仕様になっているのですが、HTMLとCSSのみで前後に操作ボタン付きで1画面に複数枚のコンテンツが表示されるスライダーを実装したい。

発生している問題・分からないこと

HTMLとCSSのみで前後に操作ボタン付きのスライダーまで実装できたのですが、1枚ずつしか表示できず、複数枚のコンテンツを表示できるような仕様にできていません。
現状の実装:Image from Gyazo
理想:Image from Gyazo

該当のソースコード

HTML

1<div class="cosme"> 2 <h1 class="cosme__ttl">この記事に登場したコスメ</h1> 3 <div class="carousel" aria-label="Gallery"> 4 <ol class="carousel__viewport"> 5 <li id="carousel__slide1" tabindex="0" class="carousel__slide"> 6 <div class="carousel__snapper"> 7 <a href="#"><!----> <!----> 8 <div><img 9 src="画像パス"></div> 10 <div class="CsmCard__summary_9ORs3"> 11 <div> 12 <p class="g-subtitle4 CsmCard__brand_sUWYx"><!----> 13 トランシーノ 14 </p> 15 <p class="g-subtitle3 CsmCard__name_4AauZ"> 16 薬用クリアクレンジングEX 17 </p> <!----> <!----> 18 </div> 19 <div class="CsmCard__footer_F-ied"> 20 <div> 21 <p class="CsmCard__capacityPrice_KlR3R"> 22 110g/¥1980 23 </p> <!----> 24 </div> 25 </div> 26 </div> 27 </a> 28 <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a> 29 <a href="#carousel__slide2" class="carousel__next">Go to next slide</a> 30 </div> 31 </li> 32 <li id="carousel__slide2" tabindex="0" class="carousel__slide"> 33 <div class="carousel__snapper"></div> 34 <a href="#"> 35 <div class="画像パス"></div> 36 <div class="CsmCard__summary_9ORs3"> 37 <div> 38 <p class="g-subtitle4 CsmCard__brand_sUWYx"><!----> 39 トランシーノ 40 </p> 41 <p class="g-subtitle3 CsmCard__name_4AauZ"> 42 薬用クリアクレンジングEX 43 </p> <!----> <!----> 44 </div> 45 <div class="CsmCard__footer_F-ied"> 46 <div> 47 <p class="CsmCard__capacityPrice_KlR3R"> 48 110g/¥1980 49 </p> <!----> 50 </div> 51 </div> 52 </div> 53 </a> 54 <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a> 55 <a href="#carousel__slide3" class="carousel__next">Go to next slide</a> 56 </li> 57 <li id="carousel__slide3" tabindex="0" class="carousel__slide"> 58 <div class="carousel__snapper"></div> 59 <a href="#"><!----> <!----> 60 <div><img 61 src="画像パス"></div> 62 <div class="CsmCard__summary_9ORs3"> 63 <div> 64 <p class="g-subtitle4 CsmCard__brand_sUWYx"><!----> 65 トランシーノ 66 </p> 67 <p class="g-subtitle3 CsmCard__name_4AauZ"> 68 薬用クリアクレンジングEX 69 </p> <!----> <!----> 70 </div> 71 <div class="CsmCard__footer_F-ied"> 72 <div> 73 <p class="CsmCard__capacityPrice_KlR3R"> 74 110g/¥1980 75 </p> <!----> 76 </div> 77 </div> 78 </div> 79 </a> 80 <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a> 81 <a href="#carousel__slide4" class="carousel__next">Go to next slide</a> 82 </li> 83 <li id="carousel__slide4" tabindex="0" class="carousel__slide"> 84 <div class="carousel__snapper"></div> 85 <a href="#" class="CsmCard_5Iuoi"> 86 <div class="画像パス"></div> 87 <div class="CsmCard__summary_9ORs3"> 88 <div> 89 <p class="g-subtitle4 CsmCard__brand_sUWYx"><!----> 90 トランシーノ 91 </p> 92 <p class="g-subtitle3 CsmCard__name_4AauZ"> 93 薬用クリアクレンジングEX 94 </p> <!----> <!----> 95 </div> 96 <div class="CsmCard__footer_F-ied"> 97 <div> 98 <p class="CsmCard__capacityPrice_KlR3R"> 99 110g/¥1980 100 </p> <!----> 101 </div> 102 </div> 103 </div> 104 </a> 105 <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a> 106 <a href="#carousel__slide1" class="carousel__next">Go to first slide</a> 107 </li> 108 </div> 109</div>

CSS

1 .cosme { 2 background: #f5f3f1; 3 } 4 5 .cosme__ttl { 6 font-size: 20px; 7 align-items: center; 8 display: flex; 9 justify-content: center; 10 padding: 15px 0; 11 margin: 0; 12 } 13 14 @keyframes snap { 15 96% { 16 scroll-snap-align: center; 17 } 18 19 97% { 20 scroll-snap-align: none; 21 } 22 23 99% { 24 scroll-snap-align: none; 25 } 26 27 100% { 28 scroll-snap-align: center; 29 } 30 } 31 32 body { 33 max-width: 37.5rem; 34 margin: 0 auto; 35 padding: 0 1.25rem; 36 font-family: 'Lato', sans-serif; 37 } 38 39 * { 40 box-sizing: border-box; 41 scrollbar-color: transparent transparent; 42 /* thumb and track color */ 43 scrollbar-width: 0px; 44 } 45 46 *::-webkit-scrollbar { 47 width: 0; 48 } 49 50 *::-webkit-scrollbar-track { 51 background: transparent; 52 } 53 54 *::-webkit-scrollbar-thumb { 55 background: transparent; 56 border: none; 57 } 58 59 * { 60 -ms-overflow-style: none; 61 } 62 63 ol, 64 li { 65 list-style: none; 66 margin: 0; 67 padding: 0; 68 } 69 70 .carousel { 71 position: relative; 72 padding-top: 75%; 73 perspective: 100px; 74 margin: 0 auto; 75 } 76 77 .carousel__viewport { 78 position: absolute; 79 top: 0; 80 right: 0; 81 bottom: 0; 82 left: 0; 83 display: flex; 84 overflow-x: scroll; 85 counter-reset: item; 86 scroll-behavior: smooth; 87 scroll-snap-type: x mandatory; 88 } 89 90 .carousel__slide { 91 position: relative; 92 flex: 0 0 100%; 93 counter-increment: item; 94 } 95 96 .carousel__snapper { 97 position: absolute; 98 top: 0; 99 left: 0; 100 width: 100%; 101 height: 100%; 102 scroll-snap-align: center; 103 } 104 105 @media (hover: hover) { 106 .carousel__snapper { 107 animation-name: tonext, snap; 108 animation-timing-function: ease; 109 animation-duration: 4s; 110 animation-iteration-count: infinite; 111 } 112 113 .carousel__slide:last-child .carousel__snapper { 114 animation-name: tostart, snap; 115 } 116 } 117 118 @media (prefers-reduced-motion: reduce) { 119 .carousel__snapper { 120 animation-name: none; 121 } 122 } 123 124 .carousel:hover .carousel__snapper, 125 .carousel:focus-within .carousel__snapper { 126 animation-name: none; 127 } 128 129 .carousel__navigation { 130 position: absolute; 131 right: 0; 132 bottom: 0; 133 left: 0; 134 text-align: center; 135 } 136 137 .carousel__navigation-list, 138 .carousel__navigation-item { 139 display: inline-block; 140 } 141 142 .carousel__navigation-button { 143 display: inline-block; 144 width: 1.5rem; 145 height: 1.5rem; 146 background-color: #333; 147 background-clip: content-box; 148 border: 0.25rem solid transparent; 149 border-radius: 50%; 150 font-size: 0; 151 transition: transform 0.1s; 152 } 153 154 .carousel::before, 155 .carousel::after, 156 .carousel__prev, 157 .carousel__next { 158 position: absolute; 159 margin-top: 37.5%; 160 width: 2rem; 161 height: 2rem; 162 transform: translateY(-50%); 163 border-radius: 50%; 164 font-size: 0; 165 outline: 0; 166 position: absolute; 167 top: -5%; 168 transform: translateY(-50%); 169 -webkit-transform: translateY(-50%); 170 -ms-transform: translateY(-50%); 171 } 172 173 .carousel::before, 174 .carousel__prev { 175 left: 9rem; 176 } 177 178 .carousel::after, 179 .carousel__next { 180 right: 9rem; 181 } 182 183 .carousel::before, 184 .carousel::after { 185 content: ""; 186 z-index: 1; 187 background-color: #333; 188 background-size: 1.5rem 1.5rem; 189 background-repeat: no-repeat; 190 background-position: center center; 191 color: #fff; 192 font-size: 2.5rem; 193 line-height: 4rem; 194 text-align: center; 195 pointer-events: none; 196 } 197 .CsmCard_5Iuoi { 198 background: #fff; 199 border: 1px solid hsla(0, 0%, 7%, .06); 200 border-radius: 8px; 201 box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .08); 202 color: inherit; 203 display: flex; 204 flex-flow: column; 205 padding: 10px; 206 position: relative; 207 width: 200px; 208 margin: 0 auto; 209 } 210 211 .Thumbnail_2aRly img { 212 height: 100%; 213 left: 0; 214 -o-object-fit: cover; 215 object-fit: cover; 216 top: 0; 217 width: 100%; 218 } 219 220 .Thumbnail_2aRly { 221 overflow: hidden; 222 position: relative; 223 } 224 225 .CsmCard__image_i10-u { 226 flex: 0 0 auto; 227 margin: 8px auto 4px; 228 } 229 230 .g-subtitle3 { 231 align-items: center; 232 color: rgba(18, 18, 18, 0.8); 233 display: flex; 234 margin-top: 2px; 235 } 236 237 .g-subtitle4 { 238 align-items: center; 239 color: hsla(0, 0%, 7%, .54); 240 display: flex; 241 margin: 2px; 242 } 243 244 .CsmCard__footer_F-ied { 245 color: hsla(0, 0%, 7%, .54); 246 align-items: center; 247 display: flex; 248 flex-flow: row nowrap; 249 gap: 4px; 250 justify-content: flex-start; 251 margin-top: auto; 252 } 253 254 .CsmCard__like_Hat65 { 255 margin-left: auto; 256 }

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

現状1つのコンテンツごとに前後の操作ボタンを実装してしまっているため、操作ボタンのコードを1つにまとめられれば、実装できるのでは無いかと思っております。

補足

特になし

shinoharat, juner👍を押しています

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

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

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

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

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

yambejp

2024/02/28 09:09

jsはダメなのにキーフレームアニメはOKなのでしょうか?
leomessi

2024/02/28 09:30

HTMLとCSSは使用できますので、キーフレームアニメは使用できます。
guest

回答2

0

紆余曲折してみました

CSS

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> 2<style> 3.wrap{ 4 flex-shrink: 0; 5 width:100px; 6 margin-left:25px; 7 height:100px; 8 background-Color:yellow; 9} 10.container{ 11 background-Color:gray; 12 width:150px; 13 overflow:hidden; 14 display:flex; 15 justify-content:space-between; 16 align-items:center; 17} 18[name=r]{display:none;} 19 20:root{ 21 --offset:-125px; 22} 23.container:has(#c1l:checked) .wrap{--from:1; --to:0; transform:translate(calc(var(--offset) * var(--to)));animation:slide1 1s; } 24.container:has(#c2l:checked) .wrap{--from:2; --to:1; transform:translate(calc(var(--offset) * var(--to)));animation:slide2 1s; } 25.container:has(#c3l:checked) .wrap{--from:3; --to:2; transform:translate(calc(var(--offset) * var(--to)));animation:slide3 1s; } 26.container:has(#c4l:checked) .wrap{--from:0; --to:3; transform:translate(calc(var(--offset) * var(--to)));animation:slide4 1s; } 27 28.container:has(#c1r:checked) .wrap{--from:3;--to:0;transform:translate(calc(var(--offset) * var(--to)));animation:slide1 1s;} 29.container:has(#c2r:checked) .wrap{--from:0;--to:1;transform:translate(calc(var(--offset) * var(--to)));animation:slide2 1s;} 30.container:has(#c3r:checked) .wrap{--from:1;--to:2;transform:translate(calc(var(--offset) * var(--to)));animation:slide3 1s;} 31.container:has(#c4r:checked) .wrap{--from:2;--to:3;transform:translate(calc(var(--offset) * var(--to)));animation:slide4 1s;} 32 33@keyframes slide{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}} 34@keyframes slide1{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}} 35@keyframes slide2{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}} 36@keyframes slide3{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}} 37@keyframes slide4{from{transform:translate(calc(var(--offset) * var(--from)))} to{transform:translate(calc(var(--offset) * var(--to)))}} 38 39.container:not(:has(:checked)) ~ * nav label:not(:nth-child(1)), 40.container:has(#c1l:checked) ~ * nav label:not(:nth-child(1)), 41.container:has(#c1r:checked) ~ * nav label:not(:nth-child(1)), 42.container:has(#c2l:checked) ~ * nav label:not(:nth-child(2)), 43.container:has(#c2r:checked) ~ * nav label:not(:nth-child(2)), 44.container:has(#c3l:checked) ~ * nav label:not(:nth-child(3)), 45.container:has(#c3r:checked) ~ * nav label:not(:nth-child(3)), 46.container:has(#c4l:checked) ~ * nav label:not(:nth-child(4)), 47.container:has(#c4r:checked) ~ * nav label:not(:nth-child(4)) 48{ display:none; }* 49</style> 50<div class="container"> 51<div class="wrap"> 52<input type="radio" name="r" id="c1l"> 53<input type="radio" name="r" id="c1r"> 54<span>a</span> 55</div> 56<div class="wrap"> 57<input type="radio" name="r" id="c2l"> 58<input type="radio" name="r" id="c2r"> 59<span>b</span> 60</div> 61<div class="wrap"> 62<input type="radio" name="r" id="c3l"> 63<input type="radio" name="r" id="c3r"> 64<span>c</span> 65</div> 66<div class="wrap"> 67<input type="radio" name="r" id="c4l"> 68<input type="radio" name="r" id="c4r"> 69<span>d</span> 70</div> 71</div> 72<div class="container"> 73<nav class="left"> 74<label for="c4l"><i class="fa-solid fa-circle-chevron-left"></i></label> 75<label for="c1l"><i class="fa-solid fa-circle-chevron-left"></i></label> 76<label for="c2l"><i class="fa-solid fa-circle-chevron-left"></i></label> 77<label for="c3l"><i class="fa-solid fa-circle-chevron-left"></i></label> 78</nav> 79<nav class="right"> 80<label for="c2r"><i class="fa-solid fa-circle-chevron-right"></i></label> 81<label for="c3r"><i class="fa-solid fa-circle-chevron-right"></i></label> 82<label for="c4r"><i class="fa-solid fa-circle-chevron-right"></i></label> 83<label for="c1r"><i class="fa-solid fa-circle-chevron-right"></i></label> 84</nav> 85</div>

投稿2024/02/29 12:33

編集2024/02/29 12:39
yambejp

総合スコア114738

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

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

0

なんかいろいろ触ってたらどこを変えたのかわからなくなってしまいましたので、とりあえず全部提示します。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/jh85py67/

なお、自動スライダーの部分は触っていませんので、よろしくお願いします。

html

1.cosme { 2 background: #f5f3f1; 3} 4 5.cosme__ttl { 6 font-size: 20px; 7 align-items: center; 8 display: flex; 9 justify-content: center; 10 padding: 15px 0; 11 margin: 0; 12} 13 14@keyframes snap { 15 96% { 16 scroll-snap-align: center; 17 } 18 19 97% { 20 scroll-snap-align: none; 21 } 22 23 99% { 24 scroll-snap-align: none; 25 } 26 27 100% { 28 scroll-snap-align: center; 29 } 30} 31 32body { 33 max-width: 37.5rem; 34 margin: 0 auto; 35 padding: 0 1.25rem; 36 font-family: 'Lato', sans-serif; 37} 38 39* { 40 box-sizing: border-box; 41 scrollbar-color: transparent transparent; 42 /* thumb and track color */ 43 scrollbar-width: 0px; 44} 45 46*::-webkit-scrollbar { 47 width: 0; 48} 49 50*::-webkit-scrollbar-track { 51 background: transparent; 52} 53 54*::-webkit-scrollbar-thumb { 55 background: transparent; 56 border: none; 57} 58 59* { 60 -ms-overflow-style: none; 61} 62 63ol, 64li { 65 list-style: none; 66 margin: 0; 67 padding: 0; 68} 69 70.carousel { 71 /* position: relative; 72 padding-top: 75%; */ 73 aspect-ratio: 4 / 3; 74 perspective: 100px; 75 margin: 0 auto; 76} 77 78.carousel__viewport { 79 /* position: absolute; 80 top: 0; 81 right: 0; 82 bottom: 0; 83 left: 0; */ 84 height: 100%; 85 display: flex; 86 overflow-x: scroll; 87 counter-reset: item; 88 scroll-behavior: smooth; 89 scroll-snap-type: x mandatory; 90} 91 92.carousel__slide { 93 /* position: relative; */ 94 /* flex: 0 0 100%; */ 95 flex: 0 0 50%; 96 counter-increment: item; 97 display: grid; 98 grid-template-areas: "a"; 99 100 & a:nth-child(2) { 101 grid-area: a; 102 } 103} 104 105.carousel__snapper { 106 /* position: absolute; 107 top: 0; 108 left: 0; */ 109 width: 100%; 110 height: 100%; 111 scroll-snap-align: center; 112 scroll-snap-align: none; 113 grid-area: a; 114} 115 116:target .carousel__snapper { 117 scroll-snap-align: start; 118} 119 120 121@media (hover: hover) { 122 .carousel__snapper { 123 animation-name: tonext, snap; 124 animation-timing-function: ease; 125 animation-duration: 4s; 126 animation-iteration-count: infinite; 127 } 128 129 .carousel__slide:last-child .carousel__snapper { 130 animation-name: tostart, snap; 131 } 132} 133 134@media (prefers-reduced-motion: reduce) { 135 .carousel__snapper { 136 animation-name: none; 137 } 138} 139 140.carousel:hover .carousel__snapper, 141.carousel:focus-within .carousel__snapper { 142 animation-name: none; 143} 144 145.carousel__navigation { 146 position: absolute; 147 right: 0; 148 bottom: 0; 149 left: 0; 150 text-align: center; 151} 152 153.carousel__navigation-list, 154.carousel__navigation-item { 155 display: inline-block; 156} 157 158.carousel__navigation-button { 159 display: inline-block; 160 width: 1.5rem; 161 height: 1.5rem; 162 background-color: #333; 163 background-clip: content-box; 164 border: 0.25rem solid transparent; 165 border-radius: 50%; 166 font-size: 0; 167 transition: transform 0.1s; 168} 169 170.carousel::before, 171.carousel::after, 172.carousel__prev, 173.carousel__next { 174 position: absolute; 175 margin-top: 37.5%; 176 width: 2rem; 177 height: 2rem; 178 transform: translateY(-50%); 179 border-radius: 50%; 180 font-size: 0; 181 outline: 0; 182 position: absolute; 183 top: -5%; 184 transform: translateY(-50%); 185 -webkit-transform: translateY(-50%); 186 -ms-transform: translateY(-50%); 187} 188 189:target :where(.carousel__prev, .carousel__next) { 190 z-index: 999; 191} 192 193.carousel::before, 194.carousel__prev { 195 left: 9rem; 196} 197 198.carousel::after, 199.carousel__next { 200 right: 9rem; 201} 202 203.carousel::before, 204.carousel::after { 205 content: ""; 206 z-index: 1; 207 background-color: #333; 208 background-size: 1.5rem 1.5rem; 209 background-repeat: no-repeat; 210 background-position: center center; 211 color: #fff; 212 font-size: 2.5rem; 213 line-height: 4rem; 214 text-align: center; 215 pointer-events: none; 216} 217 218.CsmCard_5Iuoi { 219 background: #fff; 220 border: 1px solid hsla(0, 0%, 7%, .06); 221 border-radius: 8px; 222 box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .08); 223 color: inherit; 224 display: flex; 225 flex-flow: column; 226 padding: 10px; 227 position: relative; 228 width: 200px; 229 margin: 0 auto; 230} 231 232.Thumbnail_2aRly img { 233 height: 100%; 234 left: 0; 235 -o-object-fit: cover; 236 object-fit: cover; 237 top: 0; 238 width: 100%; 239} 240 241.Thumbnail_2aRly { 242 overflow: hidden; 243 position: relative; 244} 245 246.CsmCard__image_i10-u { 247 flex: 0 0 auto; 248 margin: 8px auto 4px; 249} 250 251.g-subtitle3 { 252 align-items: center; 253 color: rgba(18, 18, 18, 0.8); 254 display: flex; 255 margin-top: 2px; 256} 257 258.g-subtitle4 { 259 align-items: center; 260 color: hsla(0, 0%, 7%, .54); 261 display: flex; 262 margin: 2px; 263} 264 265.CsmCard__footer_F-ied { 266 color: hsla(0, 0%, 7%, .54); 267 align-items: center; 268 display: flex; 269 flex-flow: row nowrap; 270 gap: 4px; 271 justify-content: flex-start; 272 margin-top: auto; 273} 274 275.CsmCard__like_Hat65 { 276 margin-left: auto; 277}

投稿2024/02/29 08:15

Lhankor_Mhy

総合スコア36057

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

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

Lhankor_Mhy

2024/02/29 09:29 編集

Firefox でテストして動作したのですが、これ、Chrome だとスムーススクロールしなかったですね。 仕様上はっきりしていない部分があって、ブラウザによって動作が異なるのかもしれません。なかなか大変そう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問