• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

HTMLとCSSのみで作ったカードデザインのテンプレートパーツ

HTMLとCSSで作ったカードデザインのテンプレート

コピペで使えるテンプレートパーツのご紹介です。
記事の一覧などで利用しやすいカードデザインをHTMLCSSのみで作りました。

実際のコード

サンプルとなるHTMLは記事一覧画面に表示されることがよくある情報にし、
それぞれに対してCSS(Sass)でスタイルを当てていきます。

<article class="card">
  <img class="card__img" src="https://placehold.jp/32/eeeeee/212121/768x432.png?text=%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F" alt="">
  <div class="card__meta">
    <p class="card__cat">PARTS</p>
    <time class="card__time" datetime="2020-01-09">2020.01.09</time>
  </div>
  <h2 class="card__ttl">3秒で利用可能!効率化UPにつながるオススメのコピペパーツをご紹介します!</h2>
  <p class="card__desc">
    HTMLやCSSの組み合わせでよく使うデザインってありますよね。プログラミングの世界ではDRYという考え方がありますが、HTMLやCSSにも応用...
  </p>
</article>
.card {
  & {
    width: 400px;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid #ccc;
    background: #fff;
  }
  &__img {
    width: 100%;
  }
  &__meta {
    display: flex;
    align-items: center;
  }
  &__cat {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    background: #ffb300;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 14px;
  }
  &__time {
    margin: 0 0 0 auto;
    font-size: 12px;
    color: #666;
  }
  &__ttl {
    font-size: 20px;
    margin: 0;
  }
  &__desc {
    font-size: 16px;
  }
}

Sassを利用せずにCSSのみで実装する場合は以下の記述になります。

.card {
  width: 400px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid #ccc;
  background: #fff;
}
.card__img {
  width: 100%;
}
.card__meta {
  display: flex;
  align-items: center;
}
.card__cat {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  background: #ffb300;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
}
.card__time {
  margin: 0 0 0 auto;
  font-size: 12px;
  color: #666;
}
.card__ttl {
  font-size: 20px;
  margin: 0;
}
.card__desc {
  font-size: 16px;
}

実装した結果

card-design-html-css

実装についての補足と解説

HTML

テンプレートパーツとしての要素のみなので、HTML側には特別なポイントはなく、よくある構成にしました。

CSS

単純な構成にしていますが、カテゴリと投稿日時部分については、
CSSのflexbox指定で横並びにしています。

また、以下の記述をすることで投稿日時のみ右寄せにしたデザインを実現しています。

.card__time {
  margin: 0 0 0 auto;
}
// 余白を上も右も下も0に。ただし、左の余白は自動で調整。 = 右寄せ。

最後に

ブログサイトなどでは頻繁に登場するカードデザインテンプレートのご紹介でした。

特にWordPressなどのCMSを使った記事一覧ページで参考になると思いますので、
ぜひ活用してみてくださいね。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND