【FLOCSS / コンポーネント】カードレイアウトのバリエーション実装、横向きにする

今日は、前回実装したカードレイアウトのバリエーションを作成します。縦並び → 横向きにしてみます。

こんにちは。Webコーダーのはるです。

前回から書き始めた、FLOCSSで考えるカードレイアウトの記事 vol.2です。

前回は、カードレイアウトの実装について書きました。
もしよろしければ、下記リンクからご覧ください。

【FLOCSS / コンポーネント】カードレイアウトの実装、マークアップからリンクの付け方

今回は、前回作ったカードレイアウトのバリエーション（※）を作成してみます。

※FLOCSSでは正しくはModifierですが、わかりやすいようにバリエーションという言葉を使用しています。

【FLOCSS / コンポーネント】カードレイアウトのバリエーション実装
- HTML
- CSS
あとがき

【FLOCSS / コンポーネント】カードレイアウトのバリエーション実装

前回のカードレイアウトは下図です。

今回は、ここからバリエーションを作成して、下図のような横向きのレイアウトにしてみます。

※今回、PCのみ横レイアウトで表示し、SPでは見づらくなるため縦レイアウトを採用しています。
恐れ入りますが、PCからご覧ください。

HTML

<!DOCTYPE html>
<html lang="jn">
　<head>
　　<meta charset="UTF-8" />
　　<meta name="viewport" content="width=device-width, initial-scale=1.0" />
　　<meta http-equiv="X-UA-Compatible" content="ie=edge" />
　　<title>card layout</title>
　　<link rel="stylesheet" type="text/css" href="style.css" />
　</head>
　<body>
　　<div class="c-card c-card--row">
　　　<div class="c-card__contents">
　　　　<h2 class="c-card__title"><a class="c-card__link" href="#">タイトル</a></h2>
　　　　<!-- /.c-card__title -->

　　　　<p class="c-card__text">本文。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</p>
　　　　<!-- /.c-card__text -->

　　　　<div class="c-card__thumbnail"><img class="c-card__thumbnail-pict" src="thumbnail.jpg" alt="画像のキャプション"></div>
　　　　<!-- /.c-card__thumbnail -->

　　　　<ul class="c-card__info">
　　　　　<li class="c-card__info-item"><time datetime="2021-01-01">2021.01.01</time></li>
　　　　　<li class="c-card__info-item"><a class="c-card__category" href="#">HTMLカテゴリ</a></li>
　　　　</ul>
　　　　<!-- /.c-card__info -->
　　　</div>
　　　<!-- /.c-card__contents -->
　　</div>
　　<!-- /.c-card　-->
　</body>
</html>

<div class=”c-card c-card–row“>
→ ここで「.c-card–row」というバリエーション用のクラスを付与。
そのほかのHTMLは、.c-cardの時と変わらず。バリエーション作成時にHTMLの構造が変わらないのが理想。

CSS

/* 基本のカード */
.c-card {
　position: relative;
　width: 100%;
　max-width: 400px;
　border: 2px solid #ccc;
}

.c-card__contents {
　display: flex;
　flex-direction: column;
}

.c-card__title {
　font-weight: bold;
　font-size: 2rem;
　margin: 1.5rem 1rem 1rem;
　order: 2;
}

.c-card__link {
　text-decoration: none;
　color: currentColor;
}

.c-card__link:before {
　display: block;
　content: "";
　position: absolute;
　top: 0;
　left: 0;
　width: 100%;
　height: 100%;
}

.c-card__text {
　font-size: 1.2rem;
　padding: 0;
　margin: 0 1rem;
　order: 3;
}

.c-card__thumbnail {
　order: 1;
}

.c-card__thumbnail-pict {
　display: block;
　width: 100%;
　height: auto;
}

.c-card__info {
　display: flex;
　align-items: center;
　list-style: none;
　margin: 1.5rem 1rem;
　padding: 0;
　order: 4;
}

.c-card__category {
　display: inline-flex;
　align-items: center;
　justify-content: center;
　position: relative;
　z-index: 1;
　text-decoration: none;
　padding: 0.3rem 0.8rem;
　margin-left: 1.2rem;
　color: #fff;
　background-color: #ccc;
　transition: opacity 0.5s ease-in-out;
}

.c-card__category:focus,
.c-card__category:hover {
　opacity: 0.7;
}


/* c-card--row */
@media screen and (min-width: 768px) {
　.c-card.c-card--row {
　　max-width: 680px;
　　border: none;
　}

　.c-card.c-card--row .c-card__contents {
　　display: grid;
　　grid-template-columns: auto auto;
　　grid-template-rows: auto auto auto;
　　gap: 0 20px;

　　grid-template-areas:
　　　"pict title"
　　　"pict text"
　　　"pict info";
　}

　.c-card.c-card--row .c-card__thumbnail {
　　grid-area: pict;
　}

　.c-card.c-card--row .c-card__title {
　　grid-area: title;
　　margin: 0.3rem 0 0 0;
　　font-size: 1.4rem;
　}

　.c-card.c-card--row .c-card__text {
　　grid-area: text;
　　margin: 0;
　　font-size: 0.9rem;
　}

　.c-card.c-card--row .c-card__info {
　　grid-area: info;
　　margin: 0 0 0.3rem 0;
　　font-size: 0.9rem;
　}
}

コードが長く見えますが、
– 上部：前回のブログで解説した基本のカードレイアウト
– 下部：今回作成したバリエーション
です。

【バリエーションの仕様】
・HTMLの.c-cardクラスに .c-card–rowクラスが並列でつくと、バリエーションで作ったスタイルになります。
・今回は、768px以上の場合だけ横向き、767px以下は前回作った縦積みレイアウトに戻るようにしました。

以下、解説します。

.c-card.c-card--row .c-card__contents {
　　display: grid;
　　grid-template-columns: auto auto;
　　grid-template-rows: auto auto auto;
　　gap: 0 20px;

　　grid-template-areas:
　　　"pict title"
　　　"pict text"
　　　"pict info";
　}

（↑）元々の縦積みカードでは、display: flex; を指定していた部分です。

HTMLの構造を変えずに横並びのレイアウトにするには、flexboxは使用できないため、gridを使用します。 grid-template-areasで、以下のようなgridのエリア分けをしました。

 .c-card.c-card--row .c-card__thumbnail {
　　grid-area: pict;
　}

　.c-card.c-card--row .c-card__title {
　　grid-area: title;
　　margin: 0.3rem 0 0 0;
　　font-size: 1.4rem;
　}

　.c-card.c-card--row .c-card__text {
　　grid-area: text;
　　margin: 0;
　　font-size: 0.9rem;
　}

　.c-card.c-card--row .c-card__info {
　　grid-area: info;
　　margin: 0 0 0.3rem 0;
　　font-size: 0.9rem;
　}

（↑）.c-text__thumbnail には、grid-area: pict; など、それぞれのクラス名にグリッドエリア名を指定します。

gridは、下記の記事が大変わかりやすくお世話になりました。ありがとうございます。