こんにちは。新卒のSKです。

前回に引き続き、「開発の現場で使えるツール紹介」にて紹介したツールをより細かく解説しようと思います。
今回は、Bootstrap4 Cheat Sheet。
◆サイトはこちら: https://hackerthemes.com/bootstrap-cheatsheet/

Bootstrapは、近年ではどのサイトでも利用されているようなので今更感はありますが、
手動で作るのが面倒なものは、大体Bootstrap4を導入して少し手を加えるだけで解決することも。

あらかじめサンプルとして部品が用意されているから、
WEB制作する側は応用するだけで良いですね。効率的で時短。

ボタン類もデザインはシンプルですがモダンで、
汎用性がある割にはしっかり見栄えするサイトが作れます。

これれらの機能を全部覚えて使うのはかなり厳しいので、
簡単に調べられて、視覚的にも確認が可能なのが、今回のCheet Sheetです。

Bootstrap4の機能のすべてがここでチェックできて、コードも確認できるからとても便利。
サンプルがPreveiw欄に表示されるので、必要な機能が備わってるか、コーディングでいちいち確認する必要もなく、確認も楽です。

ちなみに、先日も少し紹介していたBootstrapにおける新機能「カード」はこのような感じ。

<div class="card">
  <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
      Some quick example text to build on the card title
      and make up the bulk of the card's content.
    </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

同じような表示をさせるのに
いちいち枠を作ってその中に画像埋め込んで、
marginやpaddingを設定する必要がなくなりましたね。