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

7289 ワード
Bootstrap Ruby Rails Ruby テキストリンク

サロンの共同開発で、ブログアプリを作成している際に、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サイズ

タブレットサイズ

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

スマホサイズ

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

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

修正したコード

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サイズ

タブレットサイズ

スマホサイズ

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

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

<div class="texts-wrapper">
   <div class="contents-title text-center">
     <h3>タイトル</h3>
   </div>

この形の方が、自然だった？？のかなと感じました。色んなコードを書きながら、身につけていきたいです。見た目も美しいコードの方が、読みやすいですよね。

まとめ

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

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

参考記事＆使用画像：

  • 【公式】Bootstrap Cards
  • 【公式】Bootstrap Grid system
  • 　 Lorem Picsum
    →「とりあえず画像を入れる」ツールです。ポートフォリオなどを作成する際、「画像を入れたいがまだ決まってない」、空白のスペースではイメージがつかない時などに便利なツールです。参考までにご紹介いたしました。