Material Design for Bootstrap4(その1)導入とカードデザインの実装

Material Design for Bootstrap4(その1)導入とカードデザインの実装

Bootstrap4を使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap4」。

Material Design for Bootstrap

「Material Design for Bootstrap4(以下、MDB4と呼称)」は無料で商用利用可能です。
クレジット表記も必要なく、制作にも使えます。

ライセンスは「MTIライセンス」で、
ソースコード内(mdb.min.css)にクレジット表記が載っているので、それさえ消さなければ問題ありません。

以前、MDB4について単発の記事に概要のみ載せました。

マテリアルデザインを簡単に実装「Material Design for Bootstrap」

マテリアルデザインを簡単に実装「Material Design for Bootstrap」

2016.11.17

また、これのBootstrap3対応バージョンについて、8回のシリーズで書きました。

Bootstrap4も正式リリースから半年以上経ちましたので、そとそろ皆さん慣れてきた頃かと思います。

今回から数回に渡って「MDB4」について、シリーズ記事で解説していきます。

第一回目の今回は、導入方法とボタンの実装について書きます。

導入方法

最初に、こちらのページからフォルダをダウンロードしてください。
「DOWNLOAD」のボタンをクリックします。

圧縮されたフォルダを解凍すると、中には必要なファイル一式が入っています。
Bootstrap関連のファイルも全て揃ってます。

「index.html」のコードを見てもらえれば分かりますが、まずはHTMLのheadタグ内でCSSを読み込みます。

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">

この場合、「style.css」にはオリジナルのCSSコードを記入します。

次に、bodyの閉じタグの直前でjsを読み込みます。

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

これで導入は完了です。

カードデザインを実装

さて、今回は手始めに「カードデザイン」を実装してみます。

参照元:Bootstrap Cards

HTMLのコードは以下になります。

<!-- Card -->
<div class="card mt-5 mx-auto" style="width: 22rem;">
  <!-- Card image -->
  <div class="view overlay">
    <img class="card-img-top" src="画像ファイル" alt="Card image cap">
    <a href="#!">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <!-- Card content -->
  <div class="card-body">
    <!-- Title -->
    <h4 class="card-title">カードタイトル</h4>
    <!-- Text -->
    <p class="card-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <!-- Button -->
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>
<!-- Card -->

実際の表示はデモページをご覧ください。

デモページ:MDB4カードデザイン

コードでは全体を囲うdiv要素に

<div class="card mt-5 mx-auto" style="width: 22rem;">

クラス「mt-5 mx-auto」及びCSSコード「width: 22rem」を入れてますが、ここはそれぞれの制作状況に合わせて変えてください。

Bootstrapでもカードデザインはすぐに実装できますが、MDB4を使った場合はブロックに陰影が付いて、画像に若干の白っぽいオーバーレイが入ります。
また、画像にマウスをホバーさせると画像の色が少し変化します。

今回「その1」では、導入方法とカードデザインの実装について書きました。
「その2」以降は各パーツを次々と紹介していきます。

 

ken
早速、実際の制作でも使い始めました

 

関連記事
Material Design for Bootstrap4(その5)色・文字色の指定

Material Design for Bootstrap4(その5)色・文字色の指定

2019.01.15
Material Design for Bootstrap4(その4)マスクの実装

Material Design for Bootstrap4(その4)マスクの実装

2018.12.11
Material Design for Bootstrap4(その3)シャドウとホバーエフェクトの実装

Material Design for Bootstrap4(その3)シャドウとホバーエフェクトの実装

2018.10.24
Material Design for Bootstrap4(その2)ボタンの実装

Material Design for Bootstrap4(その2)ボタンの実装

2018.10.18