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

HTML/CSS
2021.05.29
 

今日は「カードレイアウトの実装」についてアウトプットします。主に、リンクの付け方についてです。

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

久しぶりの記事になってしまいました。

今後は、お仕事のフィードバックをアウトプットしたいと思っています。CSS設計のFLOCSSでいうコンポーネントやプロジェクトの実装方法を記事にしていきます。

自分の頭を整理するコードメモのような記事がしばらく続くと思われます…

【FLOCSS / コンポーネント】カードレイアウトの実装

今回は、ブログ記事へのリンクを想定したカードレイアウトを実装してみます。（下図イメージ）

要素は、

  • サムネイル画像
  • 記事のタイトル
  • 記事の本文
  • 日付やラベルなどの情報

で作成します。

仕様は、カード全体が一つのリンク（ブログ記事へ）になっていて、中のラベルは別リンクでクリックが可能なものです。

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__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>

HTMLを組んだ時点でのプレビューです。リセットCSSは入れていないです。

  • カード全体につけるリンクは、空の<a>タグではなくタイトルを囲む（before要素などを使用して全体にリンクをつける）
  • HTML の構造だけを見たとき、「この順番で並んでいたらわかりやすいだろうな」という順番でカード内の要素を並べる（※）
  • 日付は<time>タグを使用

 

　<time>タグは、ブラウザに日付であるということを認識させるために使用します。datetime属性には、読み取ってほしい日付の形式を入力します。（詳しくはMDN）

<time datetime=”2021-01-01“>2021-01-01</time>

 

上記リスト（※）で書いた ”HTML の構造だけを見たとき、「この順番で並んでいたらわかりやすいだろうな」という順番でカード内の要素を並べる” の部分について

SEOや視覚の不自由な方への読み上げ機能（スクリーンリーダー）を意識して、デザイン通りの順番ではなく、情報が読み取りやすい順番でHTMLを書くとなお良い。（後ほどCSSで、FLEXのorderプロパティを使用してデザイン通りの順番に並び替える）

CSS

CodeSandboxで簡単なサンプルを作成しました。

↑埋め込むとスクロールになって見にくいですね。。Open Sandboxから別ウィンドウで開くことができます。

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__link:before { 
　　display: block;
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

（↑）c-card__linkは、カードのタイトルを囲んでいる<a>タグです。before要素を使って、このリンクをカード全体に広げています。これでカード全体をクリックできます。

.c-card__category {
　display: inline-flex;
　align-items: center;
　justify-content: center;
　position: relative;
　z-index: 1;
　min-width: 2rem;
　min-height: 1.1rem;
　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;
}

（↑）ブログカテゴリのラベルは、別リンクとしてクリックできるようにします。position: relative; と z-index: 1; を記述して、全体のリンクとは別にクリックができるようにしました。また、わかりやすいようにラベルをhoverしたときだけ、opacityを変えました。

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

（↑）最後に、SEOやスクリーンリーダーのためにHTMLの順番を変えていたので、デザイン通りの順番に整えます。

カードの内側を囲っているc-card__contentsに対して、flex-direction: column; を指定。さらに、カード内の要素それぞれに対して、order: 1 ~ 4で順番を振り分けます。orderの順番に並び替えされます。

あとがき

日頃、時間を割いてフィードバックをくださる制作パートナーさんに感謝します。

しばらくアウトプットから遠ざかってしまっていたので、より良いコンポーネント・プロジェクトが作れるようにコツコツとアウトプットを増やしていきます。

今日は以上です。

スポンサーリンク