80517


**実現したいこと**  
以下のカードを横にスライドできるような形に持っていきたいです。  
しかし、現時点において横に配置することができていません。  
そこでまず横にカードを並べたいです。

**カードの仕組み**  
カードは裏で動いているCMSの追加に合わせて増えていく仕組みです。現時点においてカードは縦並びに追加されてしまいます。一番良い形としては、追加に伴い、カード自体のサイズを変えることなく、スクロールバーなどによりスクロールできるようにすることです。

**試したこと**  
bootstrapを使ってカード表示→CSSが効きにくく、使いづらいため、CSS手打ちによるカード作成に切り替え  
nowrapの追加  
display: inline-blockの追加などを行いました。

[code]

    div.code_group {
          overflow-x: auto;
          white-space: nowrap;
        }
        
     div.code__imgframe{
      width: 100%;
      height: auto;
      padding-top: 56.25%;
      background: #bbb;
      box-sizing: border-box;
    }
    
    div.code{
      width: 288px;
      height: auto;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,.2)
      display: inline-block;
      }
    
    img.code__imgframe{
      width: 100%;
      height: auto;
      padding-top: 56.25%;
    }
    div.code__textbox{
      width: 100%;
      height: auto;
      padding: 20px 18px;
      background: #fff;
      box-sizing: border-box;
    }
    div.code__textbox > * + *{
      margin-top: 10px;
    }
    div.code__titletext{
      font-size: 20px;
      font-weight: bold;
      line-height: 125%;
    }
    div.code__overviewtext{
      font-size: 12px;
      line-height: 150%;
    }
[/code]

[code]

    <div class="code_group">
      <div class="code">
        <div class="code__imgframe"></div>
        <div class="code__textbox">
          <div class="code__titletext">
            タイトル
          </div>
          <div class="code__overviewtext">
          テキスト
          </div>
        </div>
      </div>
      <div class="code">
        <div class="code__imgframe"></div>
        <div class="code__textbox">
          <div class="code__titletext">
            タイトル
          </div>
          <div class="code__overviewtext">
          テキスト
          </div>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2021-07-31T07:30:23.790
80503
2021-08-01T10:06:47.557
47454
question
html css
カードを横スライドできるようにしたい。


現状のコードで、動いていない理由は、単純にセミコロンが抜けているからのようです。  
下記のコードのようにセミコロンを足してください。

[code]

    div.code_group {
          overflow-x: auto;
          white-space: nowrap;
        }
        
     div.code__imgframe{
      width: 100%;
      height: auto;
      padding-top: 56.25%;
      background: #bbb;
      box-sizing: border-box;
    }
    
    div.code{
      width: 288px;
      height: auto;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,.2); /* <---- */
      display: inline-block;
      }
    
    img.code__imgframe{
      width: 100%;
      height: auto;
      padding-top: 56.25%;
    }
    div.code__textbox{
      width: 100%;
      height: auto;
      padding: 20px 18px;
      background: #fff;
      box-sizing: border-box;
    }
    div.code__textbox > * + *{
      margin-top: 10px;
    }
    div.code__titletext{
      font-size: 20px;
      font-weight: bold;
      line-height: 125%;
    }
    div.code__overviewtext{
      font-size: 12px;
      line-height: 150%;
    }
[/code]

[code]

    <div class="code_group">
      <div class="code">
        <div class="code__imgframe"></div>
        <div class="code__textbox">
          <div class="code__titletext">
            タイトル
          </div>
          <div class="code__overviewtext">
          テキスト
          </div>
        </div>
      </div>
      <div class="code">
        <div class="code__imgframe"></div>
        <div class="code__textbox">
          <div class="code__titletext">
            タイトル
          </div>
          <div class="code__overviewtext">
          テキスト
          </div>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2021-08-01T10:06:47.557
80517
2021-08-01T10:06:47.557
9008
80503
answer