【rails】画像つきBootstrap Cardsを、Grid systemと組み合わせて、表示する


サロンの共同開発で、ブログアプリを作成している際に、Bootstrapのcardを利用しました。
CardをPCでは3列、タブレットでは2列、スマホでは、1列とし、Cardの中央寄せ表示に苦戦したため、備忘録として残します。


#開発環境
・ruby 2.7.2
・rails　6.1.1
・bootstrap　4.5.1


#初めに実装したコード

```index.html.erb
<div class="base-container mw-xl">
<div class="texts-wrapper">
  <div class="contents-title text-center">
    <h3>タイトル</h3>
    <div class="row justify-content-center">#左右中央揃え
      <div class="card-deck">#カード型デザインの横並びになっている要素の高さ調整を自動化
        <% @texts.each do |text| %>
          <div class="col-12 col-md-6 col-lg-4 text-card-container">#グリッドブレークポイントを定義
            <div class="card content-card border-dark">#カードに黒枠を追加
              <div class="card-header p-0">
              <img class="card-img-top" src="https://picsum.photos/30/20.jpg" alt="画像">
              </div>
              <div class="card-body d-flex align-items-center">
                <p class="card-title text-left">Card title</p>#テキストタイトルを左寄せ
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
</div>

```

```application.scss

#元々のテキストサイズを参考に、カードの幅を決める
div.text-card-container {
  padding-left: 9px;
  padding-right: 9px;
  margin-bottom: 50px;
}

div.content-card {
  height: 350px;
  max-width: 360px;
  margin: 0 auto;
}

```

##見た目
PCサイズ
![スクリーンショット 2021-03-06 18.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/86fc79d7-4f81-142e-4050-8039c7c69f07.png)

タブレットサイズ
![スクリーンショット 2021-03-06 18.48.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/8f1d0c3f-bb03-df54-0bf1-320f67f78ec4.png)

よくみると、左右の幅が揃っていない‥

スマホサイズ
![スクリーンショット 2021-03-06 18.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/620294f5-092b-511a-1e32-6f4c1a75258f.png)

このサイズで、中央寄せになっていない‥
(2回目のコードレビューでも、上手く修正が出来ていませんでした。コードレビューして頂いたメンターの方に申し訳ない‥:sweat_smile:)

色んな機能をつけすぎているのでは？と思い、シンプルに考え直しました。

##修正したコード

```index.html.erb
<div class="texts-wrapper">
   <div class="contents-title text-center">
     <h3>タイトル</h3>
     <div class="row">
       <% @texts.each do |text| %>
         <div class="col-12 col-md-6 col-lg-4">
           <div class="card">
             <img class="card-img-top" src="https://picsum.photos/30/20.jpg" alt="画像">
               <div class="card-body">
                 <p class="card-title">Card title</p>
               </div>
           </div>
         </div>
       <% end %>
     </div>
   </div>
 </div> 
```
```application.scss

.card {
  margin: 0 auto 60px;
  max-width: 376px;
  height: 370px;
}
.card-body p {
  text-align: left;

```
##見た目

PCサイズ
![スクリーンショット 2021-03-06 20.48.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/4fb22196-97e6-7f63-7d26-d8297efa0d20.png)

タブレットサイズ
![スクリーンショット 2021-03-06 20.48.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/be391433-f48b-4ebd-2822-4d3654d075f2.png)

スマホサイズ
![スクリーンショット 2021-03-06 20.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/78025fa4-990e-afd0-8725-0409e9f5d04c.png)

スマホサイズでも、ちゃんとCardが中央寄せに修正できています:relaxed:

いま、まとめながら気づきましたが、

```
<div class="texts-wrapper">
   <div class="contents-title text-center">
     <h3>タイトル</h3>
   </div>
```
この形の方が、自然だった？？のかなと感じました。色んなコードを書きながら、身につけていきたいです。見た目も美しいコードの方が、読みやすいですよね。


#まとめ

今回、左右中央寄せなどのコードを色々詰め込みすぎ、CSSのコードでCard幅を固定したのも、上手く表示されなった原因だと思います。コードを組むときには、時には引き算も大事なんだと、学びました。
また、今回修正したコード以外でも、実装は可能です。（共同開発のメンバーは、違うコードを組んで、同じように表示されていました。）

私と同じように、苦戦している方々の参考になれば良いなと思い、記事にまとめてみました。
記事の感想やご意見、アドバイス等ございましたら、コメントして頂けると幸いです。
最後まで読んでいただき、ありがとうございました。




##参考記事＆使用画像：

  * [【公式】Bootstrap Cards](https://getbootstrap.jp/docs/4.5/components/card/)
  * [【公式】Bootstrap Grid system](https://getbootstrap.jp/docs/4.2/layout/grid/)
  * 　[ Lorem Picsum](https://picsum.photos/)  
→「とりあえず画像を入れる」ツールです。ポートフォリオなどを作成する際、「画像を入れたいがまだ決まってない」、空白のスペースではイメージがつかない時などに便利なツールです。参考までにご紹介いたしました。