少し複雑なカードデザインのコーディングパーツ④【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
コピペでOKなカードブロックのコードを見たい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

HTML構造が複雑なだけでなく、jQueryを用いたホバーエフェクトつきなので当時は苦戦しました笑

同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです！！

完成イメージ
カードデザインのサンプルコード
まとめ

完成イメージ

今回紹介するコードで実現できるカードデザインはこちら！

▼▼▼

ホバーすると、、、
▼▼▼

背景画像がフワッと切り替わって中から文章が現れた！

3カラムのカードです！

最大の特徴は、マウスオーバー時に、背景画像がふわ～っと移り変わって、中から隠れていた文章が現れる点です。

コーポレートサイトのトップページの会社名の由来を紹介するブロックなどに使用されそうなデザインとなります。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

カードデザインのサンプルコード

こちら、CodePenで作った見本です！

レスポンシブでは、一列になるように実装しております。

この画面だと2分割されて本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでござる。

＊スマホだと、最初からホバー後状態になってしまうバグが発生中。後ほど修正します（汗）

See the Pen
wvMdbBd by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、今回のカードデザインのHTML構造です！

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Item">
      <div class="Card-Item-ImgBox">
        <div class="Card-Item-ImgBox-Text">
          テキスト<br>
          テキストテキスト<br>
          テキストテキスト<br>
          テキストテキスト<br>
          テキストテキスト
        </div>
        <div class="Card-Item-ImgBox-Headline">
          <h2 class="Card-Item-ImgBox-Headline-Title">タイトル</h2>
          <p class="Card-Item-ImgBox-Headline-SubTitle">- サブタイトル -</p>
        </div>
        <div class="Card-Item-ImgBox-Border"></div>
      </div>
    </div>
    <div class="Card-Item">
      <div class="Card-Item-ImgBox">
        <div class="Card-Item-ImgBox-Text">
          テキスト<br>
          テキストテキスト<br>
          テキストテキスト<br>
          テキストテキスト<br>
          テキストテキスト
        </div>
        <div class="Card-Item-ImgBox-Headline">
          <h2 class="Card-Item-ImgBox-Headline-Title">タイトル</h2>
          <p class="Card-Item-ImgBox-Headline-SubTitle">- サブタイトル -</p>
        </div>
        <div class="Card-Item-ImgBox-Border"></div>
      </div>
    </div>
    <div class="Card-Item">
      <div class="Card-Item-ImgBox">
        <div class="Card-Item-ImgBox-Text">
          テキスト<br>
          テキストテキスト<br>
          テキストテキスト<br>
          テキストテキスト<br>
          テキストテキスト
        </div>
        <div class="Card-Item-ImgBox-Headline">
          <h2 class="Card-Item-ImgBox-Headline-Title">タイトル</h2>
          <p class="Card-Item-ImgBox-Headline-SubTitle">- サブタイトル -</p>
        </div>
        <div class="Card-Item-ImgBox-Border"></div>
      </div>
    </div>
  </div>
</div>

CSS

こちらスタイリングです！

文字サイズや、上下の余白、画像の縦横比率などはよしなに変更してお使いください。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

.Card {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 540px) {
  .Card {
    flex-wrap: wrap;
  }
}
.Card-Item {
  width: calc((100% / 3) - 20px);
}
@media screen and (max-width: 540px) {
  .Card-Item {
    width: 100%;
  }
}
@media screen and (max-width: 540px) {
  .Card-Item:not(:first-child) {
    margin-top: 32px;
  }
}
.Card-Item-ImgBox {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("初期状態の背景画像");
}
@media screen and (max-width: 540px) {
  .Card-Item-ImgBox {
    padding-top: 120%;
    background-image: none;
  }
}
.Card-Item-ImgBox-Text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("ホバー後の背景画像");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: all 0.5s ease;
  line-height: 1.8;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 540px) {
  .Card-Item-ImgBox-Text {
    opacity: 1;
  }
}
.Card-Item-ImgBox-Text:hover {
  opacity: 1;
  z-index: 1000;
}
.Card-Item-ImgBox-Text.JS_opacity_trigger {
  opacity: 1;
  z-index: 1000;
}
.Card-Item-ImgBox-Headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 540px) {
  .Card-Item-ImgBox-Headline {
    opacity: 0;
  }
}
.Card-Item-ImgBox-Headline-Title {
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 32px;
}
.Card-Item-ImgBox-Headline-SubTitle {
  margin-top: 20px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
.Card-Item-ImgBox-Border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  z-index: 10000;
  background-color: transparent;
}

jQuery

ホバーしたら対象のカードに「JS_opacity_trigger」クラスを付与する処理をjQueryで行います！

jQuery

$(function(){

	$('.Card-Item-ImgBox-Border').hover(
		function(){
			var i = $('.Card-Item-ImgBox-Border').index(this);
			$('.Card-Item-ImgBox-Text').eq(i).addClass('JS_opacity_trigger');
		},
		function(){
			var i = $('.Card-Item-ImgBox-Border').index(this);
			$('.Card-Item-ImgBox-Text').eq(i).removeClass('JS_opacity_trigger');
		}
	);

});

まとめ

以上、実務でよく使われる少し複雑なカードデザインのコーディングのサンプルコード⑤を紹介しました。

コーポレートサイトの制作案件をする際にきっと！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！