今回はBLOGのセクションを作ります。
1.大枠を作る
ポートフォリオエリアあたりから全体を囲うcontainerや見出しの部分をコピー＆ペーストし、必要な部分だけを書き換えます。
カードを３枚並べるためにcol-md-4クラスを適用したdivを作ります。
その中にBootstrapからコピーしてきたカードテンプレートを張り付けてください。
ブラウザで表示を確認してみましょう。
2.カードの中身を作る
ポートフォリオの完成図通りになるよう、カードの中にイメージやテキストを入れていきます。
カードのタイトルで急にh5タグになると、HTMLの構造上良くないです。
h3タグに変更して、card-titleというクラスを追加。
カードフッターの部分は横並びになるようbootstrapのクラスを加えています。
追加したクラスを使って、CSSでサイズを調節などの調節を行います。
.blog-card .card-title {
font-size: 1.2rem;
}
.blog-card .avatar {
width: 32px;
height: 32px;
margin-right: 4px;
}
書けたら、ブラウザで表示を確認してください。
3.カテゴリーラベルを加える
最後に写真と見出しの間にある、カテゴリー名が書かれたラベルのような部分を作ります。
2つのBOXを跨ぐような位置に要素を配置したい場合、「position」というcssプロパティを使用します。
まずはhtmlから作ってみましょう。
card-bodyクラスを持つdivの下に、「card-category-box」という独自クラスを指定したdivを作ります。
カテゴリー名（テキスト）部分には「card-category」クラスを付けておきます。
この状態では当然ブラウザで確認すると見出しの上に文字が表示されます。 ここからcssで「card-category-box」が置かれる位置を調整していきましょう。
positionプロパティ
positionプロパティはその要素がどのように配置されるかを指定するcssプロパティです。
「position: absolute;」と指定された子要素は「position: relative;」となっている要素（親要素）からの距離を設定することで、入力した値の位置に強制的に配置されます。
今回の場合はcard-bodyの上辺から15px上に指定しているので、上に15pxはみ出す＝写真と重なる位置に配置されました。
詳細解説：position-MDN
カードが１枚完成したら、コピー＆ペーストで残る２枚を配置。 中にある画像（imgタグのパス）を変更してください。
３枚がズレなく配置されていれば、BLOGセクション完成です。