今日は、「カードレイアウト内のラベルが2行になる場合を考える」についてです。
こんにちは。Webコーダーのはるです。
FLOCSSで考えるカードレイアウトの記事 vol.4 です。
カードレイアウトの記事は、今回で一度完結させようと思っています。
前回までの記事は以下です。もしよろしければご覧ください。
【FLOCSS / コンポーネント】カードレイアウトの実装、マークアップからリンクの付け方
【FLOCSS / コンポーネント】カードレイアウトのバリエーション実装、横向きにする
【FLOCSS / コンポーネント】カードレイアウトの横向きバリエーション、左右逆版の実装
今回は、カードレイアウト内のラベルが2行に改行される場合を考えてみます。
【FLOCSS / コンポーネント】カードレイアウト内のラベルが2行になる場合を考える
最初に作ったカードレイアウトは下図です。
例えば「HTMLカテゴリ」などのラベルが、カードによっては複数ある場合はどうでしょうか？
わかりやすいように日付は削除して、下図のような出来上がりを目標にコードを考えてみます。
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">
<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__label">
<li class="c-card__label-item"><a class="c-card__category" href="#">HTMLカテゴリ</a></li>
<li class="c-card__label-item"><a class="c-card__category" href="#">CSSカテゴリ</a></li>
<li class="c-card__label-item"><a class="c-card__category" href="#">JavaScriptカテゴリ</a></li>
<li class="c-card__label-item"><a class="c-card__category" href="#">Web制作カテゴリ</a></li>
</ul>
<!-- /.c-card__label -->
</div>
<!-- /.c-card__contents -->
</div>
<!-- /.c-card -->
</body>
</html>- 基本のカードレイアウトの、ラベル部分だけ変更しています。下記コードの部分です。
<ul class="c-card__label">
<li class="c-card__label-item"><a class="c-card__category" href="#">HTMLカテゴリ</a></li>
<li class="c-card__label-item"><a class="c-card__category" href="#">CSSカテゴリ</a></li>
<li class="c-card__label-item"><a class="c-card__category" href="#">JavaScriptカテゴリ</a></li>
<li class="c-card__label-item"><a class="c-card__category" href="#">Web制作カテゴリ</a></li>
</ul>（↑）<ul>は元々、.c-card__infoというクラス名をつけて、<li>に日付とラベルを入れていました。今回は<li>をラベルのみにしたので、<ul>を.c-card__labelと改名して新たに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__label {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 1.5rem 0.5rem 1rem 1rem;
order: 4;
}
.c-card__label-item {
margin: 0 0.5rem 0.5rem 0;
}
.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;
color: #fff;
background-color: #ccc;
transition: opacity 0.5s ease-in-out;
}
.c-card__category:focus,
.c-card__category:hover {
opacity: 0.7;
}- 基本のカードレイアウトのCSSから変更したのは、.c-card__label と .c-card__label-item の部分です。
解説していきます。
.c-card__label {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 1.5rem 0.5rem 1rem 1rem;
order: 4;
}
.c-card__label-item {
margin: 0 0.5rem 0.5rem 0;
}（↑）基本のカードレイアウトでは、.c-card__infoクラスで書かれていた部分です。
今回は、以下を追加しました。
flex-wrap: wrap;（↑）flex-wrapは、flexアイテムの改行について指示するプロパティです。
初期値はnowrap（改行なし）なので、何も指定しないと1行に全て収まるようにアイテムが縮小されてしまいます。（詳しくはMDNの解説をご覧ください）
今回は、wrap(改行する)を指定します。下図のようになります。
これではラベル同士がくっついてしまっているので、marginで制御します。
.c-card__label-item に対して右と下にmarginをつけました。
.c-card__label-item {
margin: 0 0.5rem 0.5rem 0;
}（↑）これだと、下図のように余計な余白（青で囲った部分）もついてしまいます。
余分な余白を消していきます。.c-card__label-itemの親 .c-card__labelに対してマイナスのmarginをつけて相殺します。下図のイメージです。
図のように、周りのmargin（オレンジ色の部分）を右と下だけ縮小させます。
具体的なコードです。.c-card__label-itemにつけた余白分をmarginから引きます。
.c-card__label {
margin: 1.5rem 0.5rem 1rem 1rem;
}※ （↑）.c-card__labelのその他のコードは省略しています。
marginは元々、
margin: 1.5rem 1rem 1.5rem 1rem;
と指定していましたが、ここから、右を-0.5rem、下を-0.5remしました。
これで、必要のない余白を相殺することができました。
簡単なデモを、CodeSandboxで用意しました。
あとがき
日頃、時間を割いてフィードバックをくださる制作パートナーさんに心から感謝します。
今回は、.c-card__label (親) と.c-card__label-item (子) のシンプルな関係の場合で解説しました。
例えば、.c-card__label (親) と .c-card__label-list (親) と.c-card__label-item (子) など、親が複数ある場合は子から見て一つ上の階層でmarginを相殺するのがベストです。
一番上の親にマイナスmarginを使用してしまうと、そこに背景色や背景画像がある場合に表示に影響が出てしまいます。
マイナスmarginの使用は最小限に、今回のようにどうしても使用する場合は他の表示に影響が出ないように気をつける必要があります。
----------------------------------------------------------
今回で、連載してきたカードレイアウトの記事は一旦完結です。読んでくださってありがとうございました。今後、また学びがあれば vol.5 を作成したいと思います。
次回からは、別のコンポーネントやプロジェクトの記事を書いていきます。
margin: 0 -0.5rem -0.5rem 0 ;
のようにマイナスのmarginを使って相殺します。