今日は、前回実装したカードレイアウトのバリエーションを、左右逆にして実装してみます。
こんにちは。Webコーダーのはるです。
FLOCSSで考えるカードレイアウトの記事 vol.3 です。
ここまで、基本のカードレイアウトとバリエーション実装について書きました。
もしよろしければ、下記リンクからご覧ください。
【FLOCSS / コンポーネント】カードレイアウトの実装、マークアップからリンクの付け方
【FLOCSS / コンポーネント】カードレイアウトのバリエーション実装、横向きにする
今回は、前回作ったバリエーション（※）の左右逆版を実装してみます。
※FLOCSSでは正しくはModifierですが、わかりやすいようにバリエーションという言葉を使用しています。
【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 c-card--row-reverse">
<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-reverse“>
→ ここで「.c-card–row-reverse」というバリエーション用のクラスを付与。 - そのほかのHTMLは、.c-card や .c-card–rowの時と変わらず。バリエーション作成時にHTMLの構造が変わらないのが理想。
CSS
前回までの基本のカードと横向きバリエーションのCSS、そして今回の左右逆版バリエーションの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;
}
@media screen and (min-width: 768px) {
/* c-card--row */
.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;
}
/* c-card--row-reverse */
.c-card.c-card--row.c-card--row-reverse .c-card__contents {
grid-template-areas:
"title pict"
"text pict"
"info pict";
}
}・HTMLの.c-cardクラスに .c-card–rowクラスと.c-card–row-reverseクラスが並列でつくと、左右逆バリエーションのスタイルになる
・768px以上の場合だけ横向き、767px以下は前回作った縦積みレイアウトに戻る
今回追加した左右逆版バリエーションのCSSを解説します。
※@media screen and (min-width: 768px) {}の中の、一番下に追記します。
（HTMLは、先ほど.c-card–row-reverseクラスを新たに付与しました）
/* c-card--row-reverse */
.c-card.c-card--row.c-card--row-reverse .c-card__contents {
grid-template-areas:
"title pict"
"text pict"
"info pict";
}（↑）このように、grid-template-areasを上書きするだけでOKです。
画像とテキストを左右逆にする必要があるため、以下のようなgridエリア分けに上書きしました。
※前回は、pictを左側にして記述していました。（下記コード）
grid-template-areas:
"pict title"
"pict text"
"pict info";
gridを使用していると、テキストと画像間の余白は
gap: 0 20px
と、普通の横向きレイアウトでも、左右逆レイアウトでも記述が変わりません。
単純に画像とテキスト位置を入れ替えるだけで、とても簡単にバリエーション作成ができました。
簡単なデモを、CodeSandboxで用意しました。
※横向きレイアウトはスマホから確認ができません。PCでご覧ください。
あとがき
日頃、時間を割いてフィードバックをくださる制作パートナーさんに心から感謝します。
カードレイアウトのバリエーション第２弾でした。
HTMLは、
<div class="c-card c-card--row c-card--row-reverse">と親タグにはクラス名が多くなってしまいますが、HTMLの構造は基本のカードレイアウトと変わらず、CSSの記述は最小限で済ませることができました。
今後も、上手くバリエーション化できるように練習していきます。
今日は以上です。
