KumaTechLab
2020-10-14

記事一覧向けのCSS

記事一覧向けのCSS

ブログやホームページでの記事一覧の表現方法をカード型とメディア型に分けて紹介します。

カード型は縦横が近い形

メディア型は横長の形

を指しています。

どちらの要素も基本的な

  • 画像
  • タイトル
  • 抜粋

の３つの項目で構成します。

BEMとMaterial Designを参考にしています。

BEM・・・http://getbem.com/

Material Design・・・https://material.io/components/cards

カード型

カード型はスマホな画面が小さい場合に有効です。

デスクトップでは２カラム３カラムにして対応することができます。

<div class="card">
	<figure class="card__img-wrapper">
		<img src="" class="card__img">
	</figure>
	<div class="card__body">
		<div class="card__title">タイトル</div>
		<div class="card__excerpt">抜粋</div>
	</div>
</div>

HTMLは上のような形です。

ここにCSSでカード型になるようにします。

.card {
		box-shadow: 0px 1px 1px rgba(0,0,0,.14),
              		0px 2px 1px rgba(0,0,0,.12),
              		0px 1px 3px rgba(0,0,0,.20);
    border-radius: 4px;
	}


	.card:hover {
		box-shadow: 0px 8px 10px rgba(0,0,0,.14),
              		0px 3px 14px rgba(0,0,0,.12),
              		0px 5px 5px rgba(0,0,0,.20);
	}


	.card__img-wrapper {
		position: relative;
		padding-top: 56.25%; 
		overflow: hidden; 
	}


	.card__img {
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}


	.card__body {
		padding: 16px;
	}


	.card__body > *:last-child {
		margin-bottom: 0;
	}


	.card__title {
		margin-bottom: 5px;
		font-size: 1.125em;
		font-weight: bold;
	}


	.card__excerpt {
		color: #777;
　　font-size: .875em
	}

カード上部に画像用のスペースを作っておきそこにabsoluteで画像を配置します。

overflow:hiddenによって枠内に画像が収まっているように見えます。

padding-topのパーセントは使用する画像の縦横比に合わせて変更してください。

これを実際に記事に適用してみたいと思います。

WordPressのサーバー選び方
初心者の方に優しいサーバーを選びました。

こんな感じになります。

コピーして使用する際にはデフォルトのCSSとの打消しのためのCSSが必要になる場合があります。

メディア型

次にメディア型の一覧表示方法を見てみます。

一覧表示ではカード型よりもこちらの方が見かけることが多いのではないでしょうか。

<div class="media">
	<figure class="media__img-wrapper">
		<img src="" class="media__img">
	</figure>
	<div class="media__body">
		<div class="media__title">タイトル</div>
		<div class="media__excerpt">抜粋</div>
	</div>
</div>

名前が変わるだけ構成はカード型と変わりません。

.media {
		display: flex;
		align-items: center;
		box-shadow: 0px 1px 1px rgba(0,0,0,.14),
              		0px 2px 1px rgba(0,0,0,.12),
              		0px 1px 3px rgba(0,0,0,.20);
        border-radius: 4px;
  padding: 1em;
	}


.media:hover {
		box-shadow: 0px 8px 10px rgba(0,0,0,.14),
              		0px 3px 14px rgba(0,0,0,.12),
              		0px 5px 5px rgba(0,0,0,.20);
	}


	.media__img-wrapper {
		flex: 0 1 27.58333%;
		margin-right: 3.33333%;
	}


	.media__img {
		width: 100%;
		border-radius: 4px;
	}


	.media__body {
		flex: 1;
	}


	.media__body > *:last-child {
		margin-bottom: 0;
	}


	.media__title {
		margin-bottom: 10px;
		font-size: 1.125em;
		font-weight: bold;
	}

flexで配置を行っています。

そのため、レスポンシブルの際の調整が行いやすくなります。

imgのflexに指定している値(%)を変えることで画像の割合を変えることも可能です。

WordPressのサーバー選び方
初心者の方に優しいサーバーを選びました。初心者の方に優しいサーバーを選びました。初心者の方に優しいサーバーを選びました。初心者の方に優しいサーバーを選びました。

これが実際に使用した形です。

まとめ

どちらの形も良く見られる形です。

上のコードがコピペで使用可能ですが、打消しのCSSが必要になる場合もあります。

2020 KumaTechLab.