一定の自信がついたBootstrap とCSS【Day 79 of 100】

たしかに早い、Bootstrap

雛形がある分、Bootstrapは早いね。

ナビ周りが簡単に実装できるのは特にいいね

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/bootstrap5-gallery/index.html

3カラムのGridも簡単に実装できるしね

col-lg-4 col-sm-6

12分割の4使う→3カラム。12分割の6使う→2カラム。

 <!-- gallery imageここから -->
      <!-- mt-4はmargin top 1.5remと同等 -->
      <div class="container mt-4">
        <!-- ガーター溝 gyはpadding 3は1remと同等 -->
        <div class="row gy-3">
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/C0zDWAPFT9A.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/fEK4jvgnApg.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/egfS7HzgKcc.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/e-S23SJzFqs.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/Hnwm8ktAd6E.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/gb3gq2Nh5xE.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/XKhV1c4oV7c.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/7qau-YIXn90.jpg" alt="Cat" class="img-thumbnail" />
          </div>
          <div class="col-lg-4 col-sm-6">
            <img src="https://learnwithnakamura.s3.ap-northeast-1.amazonaws.com/bootstrap5/QTe-MHNUrz4.jpg" alt="Cat" class="img-thumbnail" />
          </div>
        </div>
      </div>
      <!-- gallery imageここまで -->

今日で一旦CSSは終わり。いよいよこの教材版のJavaScriptに

https://www.udemy.com/share/101WGM3@e-kecYufCmhqC-ElJ6Gn49d6z4aua6IfywhJidZqvaDBJ_RSjKOoaBixYlTykQ==

この教材いいよ！って言ってもレベルによるわなぁ。

スマホでの見え方は

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/bootstrap5-gallery/index.html