Q&A
現状のCSSコードも提示してください。
あと「scroll-snapを使ってリストのようにしたい」というのがどういう意味なのか分かりづらいです。
現状の状態から、どこをどのような動作にしたいのか具体的に説明してください。
以下のコードを画面幅が744px以下の時にscroll-snapを使ってリストのようにしたいのですがうまくできないので教えていただけると幸いです。
HTML
1<div class="all-two"> 2 <div data-reactroot> 3 <div class="container-two"> 4 <div class="hosting-chapter"> 5 <div class="life-style">ホスティングで実現する、自分らしいライフスタイル</div> 6 <div class="chapteritem-one"> 7 <div class="title-one">ホスティングで広がる可能性</div> 8 <div class="list-one">柔軟な働き方を楽しみながら、ホスティングをとおして、好きなことをもっとするための収入アップや長く続く友情関係にめぐりあう機会を得てみませんか。</div> 9 <div class="link-one"> 10 <a target="blank" href="#" class="hosting-world">ホスティングの世界を知ろう</a> 11 </div> 12 </div> 13 <div class="chapteritem-two"> 14 <div class="title-two">安心のホスティング</div> 15 <div class="list-two">24時間365日対応サポート、頼れるホストコミュニティからツールのカスタム設定、ヒント・実践アドバイスのご提供、Airbnbが全力でホストの成功をサポートします。</div> 16 <div class="link-two"> 17 <a target="blank" href="#" class="hosting-surport">Airbnbによるホストのサポート体制</a> 18 </div> 19 </div> 20 </div> 21 </div> 22 <div></div> 23 </div> 24</div>
CSS
1.chapteritem-one { 2 flex-basis: 100%; 3 flex: 1; 4 max-width: 313px; 5 margin-right: 16px; 6} 7.title-one { 8 max-width: 313px; 9 font-family: sans-serif; 10 margin-bottom: 16px; 11 font-weight: 600; 12 color: #333333; 13 font-size: 24px; 14 line-height: 30px; 15} 16.list-one { 17 max-width: 313px; 18 font-family: sans-serif; 19 color: #484848; 20 font-size: 16px; 21 line-height: 25px; 22 margin-bottom: 16px; 23} 24.link-one { 25 margin-top: 32px; 26} 27.hosting-world { 28 font-size: inherit; 29 font-family: inherit; 30 font-style: inherit; 31 font-variant: inherit; 32 line-height: inherit; 33 color: #222222; 34 text-decoration: underline; 35 border-radius: 4px; 36 font-weight: 600; 37 outline: none; 38} 39.chapteritem-two { 40 flex-basis: 100%; 41 flex: 1; 42 max-width: 313px; 43} 44.title-two { 45 max-width: 313px; 46 font-family: sans-serif; 47 margin-bottom: 16px; 48 font-weight: 600; 49 color: #333333; 50 font-size: 24px; 51 line-height: 30px; 52} 53.list-two { 54 max-width: 313px; 55 font-family: sans-serif; 56 color: #484848; 57 font-size: 16px; 58 line-height: 25px; 59 margin-bottom: 16px; 60} 61.link-two { 62 margin-top: 32px; 63} 64.hosting-surport { 65 font-size: inherit; 66 font-family: inherit; 67 font-style: inherit; 68 font-variant: inherit; 69 line-height: inherit; 70 color: #222222; 71 text-decoration: underline; 72 border-radius: 4px; 73 font-weight: 600; 74 outline: none; 75}
「リストのようにしたい」とはなんですか？
一つの要素のみを表示させて横にスクロールをすると別の要素に切り替わるということです。説明不足ですみません。
ご提示のコードには scroll-snap が見当たらないようでした。
まだ打ち込んでいない状態です。
scroll-snap を使うには、まずスクロールするボックスが必要ですが、そちらもないように見えます。
ご提示のHTMLの親要素がスクロールボックスでしょうか？
そうだと思います
ご提示いただけますか？
div.chapteritem-one div.chapteritem-one をそれぞれ画面サイズ一杯に広げておいて、
スクロールでスナップさせたいということでしょうか。
縦スクロールではなく横スクロールで切り替わるということでしょうか。
もう少していねいに説明しないと、伝わらないですよ。
あと、scroll-snapについて自分なりに調べて、とりあえずできるとこまでコードを書きましょう。
このままだと、作成依頼になりますので、terataiでは推奨されない質問に該当します。
了解しました
コードを書いてまた不明点等あったら質問します
max-width: 313px; としている所から画面いっぱいということではなさそうですね。
何をどのように切り替えたいのでしょうか。
質問の編集を拝読。
ご提示いただいたコードは横スクロールさせることができませんでした。
ボックス内部をスクロールさせることについて、なにがわからないのかわからないような、まったく手付かずの状態ですか？
div.chapteritem-one div.chapteritem-twoの二つを画面幅が744px以上では横並びにして、744px以下になったときにのみ横スクロールをさせたいということです。
この場合どこにコードを打つのかもわかりません。
＠shouwuh様
細かいけどツッコミをば。
「二つを画面幅が744px以上では横並びにして、744px以下になったときにのみ横スクロール」
744pxの時にすごーく困るのでこの表現は止めておきましょう。
@media、overflow:hidden;あたりも一緒に使うかな？と思います。
通りすがりで失礼しましたっ
確かにおっしゃる通りでした
至らず申し訳ございません
ご指摘ありがとうございました
ご解決されたようで何よりです。
BAの選出をお願いします。
回答1件
0
ベストアンサー
忖度してみました。
下記のサンプルのような感じでしょうか。
投稿2021/03/25 13:33
総合スコア33692
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1615348455_NTM2MDNjNWM4ZjRj
このサイトのような横スクロール型のものです。
質問のところに打ち込んでいるコードをこのサイトのように表示したいのですが教えていただけますでしょうか
ちなみに質問のコードの部分は画面幅が744px未満の時にのみ要素が1つずつ表示されるようになり横スクロールをすると表示される要素が変化するということです
一応、それと同じような動作になっていると思いますが。サイズとかは違いますが。
そのサイトでは scroll-snap は使わずにJavascriptで実装しているようですが、いまならscroll-snapの方がいいでしょう。
同様に打ち込んだところ修正できました
ご丁寧にサンプルまでありがとうございました
助かりました
あなたの回答
tips
プレビュー
