【コピペOK】Bootstrap4で横並びのカードを作ってみた【初心者向け】 │ DAFUの備忘録

お久しぶりです、DAFUです。

今回は、先日ローンチしたTipXXXのデザインにBootstrapを使用したのですが、検索結果画面ではもう少し視認性を上げたいと思い、横長のカードを作成しました。

今回は、そのカードのCSSの解説などをしていこうと思います。

1 なぜ作ったか・カード概観
2 CSS解説
3 感想

なぜ作ったか・カード概観

Bootstrapは公式ドキュメントに様々な要素のクラスが載っていますが、そのカードの項目には横長のものはないんですよね。そのため、今回はBootstrapの誇るグリッドレイアウトを用いながら作成しました。

それが、こちらになります。

HTML約60行+CSS約120行です。

DAFU” data-pen-title=”Horizontal Card Bootstrap4.1.3″ data-preview=”true”>See the Pen DAFU/pen/aabqKQ/”>Horizontal Card Bootstrap4.1.3 by DAFU (DAFU“>@DAFU) on CodePen.

では、このカードのデザインについて解説していきます。

CSS解説

大枠を作成する

今回はBootstrapを用いているので、そのグリッドシステムを用いればめちゃくちゃ楽に設定出来ます。
Bootstrapでは、コンテナクラスの中にrowクラスを作り、そのrowクラスの中が12等分され、グリッドレイアウトとなります。

このレイアウトでは、カラム(col-*)というクラスを用いてその12等分されているうちのどれくらいを使用するか決めます。

また、Bootstrapのカラムクラスはブレークポイント(分岐)が多く設定されており、例えば”PCでは4つ横に並べたいけどスマホでは横に並べたくない”というようなことも出来ます。

ちなみにブレークポイントとそのクラスの一覧はこのようになっています。

接頭辞	分岐点(px)	備考
(なし)	~576px	スマホなど
sm	~768px	タブレットなど
md	~992px	小さめのPCなど
lg	~1200px	PC(ウィンドウサイズ)など
xl	それ以上	PC(フルスクリーン)など

これらを用いて、今回はこのように組み立てました。

<div class=”container-fluid”>
    <div class=”card-horizon”>
        <div class=”row card-horizon-con”>
            <div class=”col-md-4 col-4″>
                <!--ここにサムネイル写真が入ります -->
            </div>
            <div class=”col-md-8 col-8″>
                <!-- ここに文章が入ります -->
            </div>
        </div>
    </div>
</div>

これのcontainer-fluidは、先ほど説明した通りrowを入れる入れ物です。また、fluidがついているものは、全幅のもので、ブラウザいっぱいに表示されます。fluidの指定を外し、ただのcontainerとすると、幅が固定されます。先ほどのブレークポイントに合わせて細かい調節が出来ます。

また、col-md-4とcol-md-8についてですが、colというのはカラムのことで、mdはブレークポイント、4とか8はこの要素が12等分されたうちのいくらを使うかで、col-md-4ならば992px以上ではrow要素の12分の4に表示するということです。

今回はこれを用いて横に並べています。

カードの形を整える

このカードは、見てもらえれば分かりますがBootstrapだけではなくCSS要素を色々付け足しています。

このセクションではそれの解説と大体の整形をしていきます。

幅・高さ・背景色を設定する

幅は先ほどのcol要素で設定されていますが、このままだと高さがありません(写真も文章も入れてないから当たり前だけど)

そのため、この要素に高さを設定します。また、余白があって気持ち悪いので、それも調整します。

高さを設定するCSS

.card-horizon-con{
    height: 200px;
}

余白を設定するHTML

<div class="col-md-4 col-4 p-0 wh-100 left bg-secondary">
    <!-- 画像とかとか -->
</div>
<div class="col-md-8 col-8 p-0 wh-100 right bg-secondary">
    <!-- 文章とかとか -->
</div>

…これだけです。簡単でしょ？

また、追加したクラスの内、p-0,wh-100,bg-secondaryクラスはBootstrapのクラスです。

意味は、

p-0:paddingを0にする(公式ドキュメント)
wh-100:width(幅)とheight(高さ)を100％にする(公式ドキュメント)
bg-secondary:背景色を灰色っぽい色にする(公式ドキュメント)

というものです。

これらは公式ドキュメント(英語)により詳しい解説が載っているので興味があればぜひ見てみてください。

また、left/rightクラスは、これからデザインに使う独自クラスです。

col-md-4/8があるんだからleft/rightは要らないのでは?と思われそうですが、BootstrapのクラスにCSSをあてるとエラーの元(styleタグではなくCSSファイルを使う場合は特に)なので、極力このように独自クラスを作るようにしましょう。

画像・文章を挿入する

このセクションでやっとカードに中身が追加されます。

画像は今回サンプル画像なのでhttps://placehold.jp/のものを使用します。

こういう時に簡単に使えて便利ですよ(´▽｀)

HTMLコード

<div class="col-md-4 col-4 p-0 wh-100 left bg-secondary">
    <img src="https://placehold.jp/200x200.jpg" alt="Sample">
</div>
<div class="col-md-8 col-8 p-0 wh-100 right bg-secondary">
    <h5 class="card-title text-white">
        Example Title
    </h5>
    <p class="card-text text-white">
        Example Text for Horizontal Card with Bootstrap 4.1.3 by DAFU.
    </p>
</div>

CSSコード

.left > img{
    width: 100%;
    height: 100%;
}

ここのHTMLで使っているクラスは基本的にBootstrapのクラスです。

card-title,card-text:カードの見出しと中身(公式ドキュメント)

text-white:文字色を白に(公式ドキュメント)

というものです。

また、CSSは画像が枠より大きかったり小さかったりという場合でも見切れたり枠を余らせたりせずに画像を枠のサイズいっぱいに表示するというものです。

.left > imgは、.leftクラスの中のimg要素という意味で、.left imgと同じ意味ですが可読性に優れるので私はこの書き方を使っています。

画像にキャプションを重ねる

このセクションは無くてもカードになるけど、あったらおしゃれかな?というものです。

なお、このセクションを書くにあたり、参考にしたサイトを紹介しておきます。

画像にホバーしたらキャプションを上に重ねるCSSを書いてみた。

https://horicdesign.com/css/entry-58.html

まずは、画像のキャプションとなるHTMLを書きます。

<div class="col-md-4 p-0 wh-100 left bg-secondary">
    <img src="https://placehold.jp/200x200.jpg" alt="Sample">
    <div class="postdata text-white">
        <ul>
            <li>投稿者:@kikiriko200</li>
            <li>カテゴリー:Category</li>
            <li>投稿日時:YYYY/MM/DD</li>
        </ul>
    </div>
    <div class="postdata-sp">
        <div class="category text-white">
        <p>Category</p>
        </div>
        <div class="author text-white">
        <p>@kikiriko200</p>
        </div>
    </div>
</div>

HTMLはこのような感じです。

postdataクラスはPC用、postdata-spクラスはスマホ用で分けています(スマホにはhoverアクションがないため)。

CSSも書いていきます。

.postdata{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    padding: 10px;
}

.postdata:hover {
    opacity: 1;
    transition: 1.0s;
    -moz-transition: 1.0s;
    -o-transition: 1.0s;
}

.postdata > ul{
    padding: 0;
}

.postdata > ul > li{
    list-style: none;
    border-bottom: 1px solid white;
}

.postdata-sp{
    display: none;
}
.category,.author{
    position: absolute;
    left: 0;
    background: gray;
    opacity: 0.6;
}

.category{
    top: 0;
}

.author{
    bottom: 0;
}

.category:hover,.author:hover{/*正直なくていい*/
    opacity: 1;
}

.category > p,.author > p{
    margin: 0;
}

@media(max-width: 768px;){
    .postdata{
        display: none;
    }
    .postdata-sp{
        display: block;
    }
}

このような感じです。
簡単に解説すると、768px以下ならpostdata-spを表示して、それ以上ならpostdataを表示します。

また、postdataでは画像にカーソルを乗せるとふわっとキャプションが表示されます。

このふわっと変化するのはtransitionを利用しており、この場合1秒かけて変化します。

また、opacityというのは透明度のことで、0(透明)~1(不透明)で指定します。

また、今回postdataとpostdata-spの振り分けには@mediaを使用しました。
この@mediaでのブレークポイントはレスポンシブデザインを作成する時に多用するので覚えておきましょう。

position:absoluteとは、要素内のどこに表示させるかを絶対位置で指定するものです。

この説明では分かりにくいでしょうから、サンプルを見てもらった方が早いので、最初に見せたサンプルをスマホとPCでそれぞれ見て、違いを確認してみてください。

スマホで見たとき用のレイアウトを設定する

ここでは、CSSの@mediaプロパティを用いてブレークポイントを設定し、スマホから見たときのレイアウトを設定します。

CSSはこんな感じ

@media (max-width: 768px){
    .card-horizon-con{
        height: 100px;
    }
    .left{
        width: 100px;
    }
    .left > img{
        height: 100px;
        width: 100px;
    }
    .postdata{
        display: none;
    }
    .postdata-sp{
        display: block;
    }
    .right{
        font-size: 0.75rem;
        overflow: scroll;
    }
}

このようになっています。

上から解説すると、card-horizon-conクラスの高さを100pxにすることでカードの高さを抑え、leftとleft > imgで画像のを100x100pxにし、rightで文字の大きさを調節しています。(0.75rem = 75%です)

また、overflow:scrollは、要素からはみ出したものをスクロール出来るようにする設定です。

まとめ

ここまでで完成したので、コードをまとめてみます。

HTML

<div class="container-fluid">
    <div class="card-horizon">
        <div class="row card-horizon-con">
            <div class="col-md-4 col-4 p-0 wh-100 left bg-secondary">
                <img src="https://placehold.jp/200x200.jpg" alt="Sample">
                <div class="postdata text-white">
                    <ul>
                        <li>投稿者:@kikiriko200</li>
                        <li>カテゴリー:Category</li>
                        <li>投稿日時:YYYY/MM/DD</li>
                    </ul>
                </div>
                <div class="postdata-sp">
                    <div class="category text-white">
                        <p>Category</p>
                    </div>
                    <div class="author text-white">
                        <p>@kikiriko200</p>
                    </div>
                </div>
            </div>
            <div class="col-md-8 p-0 wh-100 right bg-secondary">
                <h5 class="card-title text-white">
                    Example Title
                </h5>
                <p class="card-text text-white">
                    Example Text for Horizontal Card with Bootstrap 4.1.3 by DAFU.
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.card-horizon-con{
    height: 200px;
    overflow: hidden;/*はみ出したら表示しない*/
}

.center{
    margin: 2em auto;
}

.left > img{
    width: 100%;
    height: 100%;
}

.postdata{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    padding: 10px;
}

.postdata:hover {
    opacity: 1;
    transition: 1.0s;
    -moz-transition: 1.0s;
    -o-transition: 1.0s;
}

.postdata > ul{
    padding: 0;
}

.postdata > ul > li{
    list-style: none;
    border-bottom: 1px solid white;
}

.postdata-sp{
    display: none;
}

.category,.author{
    position: absolute;
    background: gray;
    opacity: 0.6;
}

.category{
    top: 0;
    left: 0;
}

.author{
    bottom: 0;
    left: 0;
}

.category:hover,.author:hover{
    opacity: 1;
}

.category > p,.author > p{
    margin: 0;
}
@media (max-width: 768px){
    .card-horizon-con{
        border-radius: 0;
        height: 100px;
    }
    .left{
        width: 100px;
    }
    .left > img{
        height: 100px;
        width: 100px;
    }
    .postdata{
        display: none;
    }
    .postdata-sp{
        display: block;
    }
    .right{
        overflow: scroll;
    }
    .right > p{
        font-size: 0.75rem;
    }
}

感想

今回カードを作ってみて、改めてBootstrapの便利さを実感しました。

ほとんどのことは既にBootstrapで定義されていて、これに慣れたらCSS自分で書けなくなりそうというのは本当かもしれません。ただ、今回のように自分でBootstrapの要素を用いてカスタマイズなど出来ればさらに表現の幅が広がるのも事実だと思います。

また、Codepenで作ったサンプルにはボタンが追加されていますので、気になる人はそちらも見てみてください。

<<前の記事

sinatraでハマったとこまとめ

次の記事>>

テーマをSentryからLionmediaに変更しました