CSS Flexboxを使用したカード型リストの作り方
今回はFlexboxを使用したカード型リストの作り方を備忘録も兼ねて簡単にまとめました。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！
目次
カード型リストを作るには？
まずは土台となるHTMLを記述していきます。
その後、土台（HTML）を記述できたらその土台をもとにCSSを記述して装飾していきます。
HTMLを記述していこう
下記のように土台となるHTMLを記述します。
class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です！
class名はできるだけ誰か別の人が見ても何の為の要素なのか、できる限りわかるようなclass名にしましょう。
作って終わりではなく、その後の運用も考慮して制作する事が大切です！
<ul class="cardTypeList">
<li class="cardTypeList__item">
<a class="cardTypeList__link" href="#">
<div class="cardTypeList__imageBox">
<img class="cardTypeList__image" src="/img/○○○○.jpg">
</div>
<dl class="cardTypeList__textBox">
<dt class="cardTypeList__title">タイトルタイトルタイトルタイトル</dt>
<dd class="cardTypeList__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
</a>
</li>
</ul><!-- /.cardTypeList -->※<li>〜</li>までが1つのカード型リストコンテンツになってますので複数表示させたい場合は<li>〜</li>をコピペで増やしてみましょう
CSSで装飾してカード型リストの見た目を作ろう
土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、カード型リストのデザインを形作っていきます。
装飾が正常にできたらデモページのようなカード型リストのデザインになります。
/*------------------------------
cardTypeList
------------------------------*/
.cardTypeList {
display: flex;
flex-flow: row wrap;
width: 620px;
margin: 20px auto;
}
.cardTypeList__item {
width: 300px;
margin-bottom: 20px;
}
.cardTypeList__item:not(:nth-child(2n)) {
margin-right: 20px;
}
.cardTypeList__link {
display: block;
color: #333333;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 4px 10px 0 rgba(40, 49, 53, 0.2);
overflow: hidden;
}
.cardTypeList__link:hover {
opacity: 0.8;
}
.cardTypeList__image {
display: block;
width: 100%;
height: auto;
}
.cardTypeList__textBox {
padding: 15px;
box-sizing: border-box;
}
.cardTypeList__title {
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin-bottom: 10px;
}
.cardTypeList__text {
font-size: 12px;
line-height: 1.5;
}各指定箇所の簡単な説明
簡単に説明しますとまずは下記大枠の部分、class名cardTypeListで「Flexbox」を使いその後の小要素（<li>〜</li>部分）を横並びにしたいので「Flexbox」のプロパティを下記のハイライト部分のように追加し、指定していきます。
.cardTypeList {
display: flex;
flex-flow: row wrap;
width: 620px;
margin: 20px auto;
}その後、下記の「各カードのリスト」にあたる部分、class名cardTypeList__itemに「各カードの横幅」を追加し、cardTypeList__item:not(:nth-child(2n))部分で各カード間の余白を下記のように指定していきます。
:not(:nth-child(2n))は:nth-child(2n)部分が「兄弟要素の中で2つおきの要素（2の乗数）を選択」というような意味で、:not()部分が「()内に指定した以外の要素を選択」というような意味になります。
上記の事からこの場合、「兄弟要素の中で2つおきの要素（2の乗数）以外の要素を選択」というような意味になります。
※カードの横並び枚数によって「各カードの横幅」と「:not(:nth-child(2n))」を「:not(:nth-child(3n))」とかに修正したりして調整する感じです
.cardTypeList__item {
width: 300px;
margin-bottom: 20px;
}
.cardTypeList__item:not(:nth-child(2n)) {
margin-right: 20px;
}その後、下記の「カードデザインの外枠」にあたる部分、class名cardTypeList__linkに「テキストのカラー」と「カード外枠部分の角丸指定」やカードが浮いたように見せる「カードの影の部分」を下記のように追加し、カードにカーソルが「hover」した時に選択されてるのがわかるように、cardTypeList__link:hoverの部分で今回は単純な少し透過するように指定しています。
.cardTypeList__link {
display: block;
color: #333333;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 4px 10px 0 rgba(40, 49, 53, 0.2);
overflow: hidden;
}
.cardTypeList__link:hover {
opacity: 0.8;
}あとは、下記のようにclass名cardTypeList__imageに画像のstyleを指定し、class名cardTypeList__textBoxにテキスト部分全体の余白のstyleを指定して、class名cardTypeList__titleにタイトル部分、class名cardTypeList__textにテキスト部分のstyleを指定して完成という感じです。
.cardTypeList__image {
display: block;
width: 100%;
height: auto;
}
.cardTypeList__textBox {
padding: 15px;
box-sizing: border-box;
}
.cardTypeList__title {
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin-bottom: 10px;
}
.cardTypeList__text {
font-size: 12px;
line-height: 1.5;
}まとめ
今回は「CSS Flexboxを使用したカード型リスト」について簡単にはなりますが、HTML・CSSでの作り方を説明させていただきました！
「Flexbox」や「box-shadow」などもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
Flexbox
box-shadow
デモページ
デモページはこちらになります。
See the Pen カード型リストの作り方 by hiroyuki.miyauchi (@hiromiya) on CodePen.
※各言語ボタンを押し下し、ソースコードをLIVE（リアルタイム）で書き換えて表示・実行結果を確認できます。
最後にもう一度ポイントをおさらい
- class名はその後の運用も考慮して誰でも何の為の要素なのかできるだけわかりやすく制作するようにしよう
- Flexboxは様々なプロパティがあり簡単に横並びのコンテンツを制作できるので色々試して活用してみよう
- 「:nth-child(2n)」は「兄弟要素の中で2つおきの要素（2の乗数）を選択」というような意味で、「:not()」は「()内に指定した以外の要素を選択」というような意味のように他にもCSSの擬似クラスでいろんな指定の仕方ができるので興味あれば調べてみて色々試してみてください！
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。
