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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
ホバーするとググッと画像が拡大されるカードパーツを実装したい

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

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

「ホバーアニメーション」付きのカードパーツで、実装した当時は少し手間取りました笑

アニメーションの仕組みを理解してしまえば、コピペで実現できてしまいます。

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

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

完成イメージ

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

▼▼▼

1度は目にしたことがある2カラムのカードデザインですね。

上下中央の位置にテキストを表示、ホバーすると背景画像がグイッと拡大されるのが特徴です。

疑似要素beforeやtransform:scale()を駆使して実装します。

コーポレートサイトで、各ページ（サービス紹介ページや採用情報ページ）への内部リンクをオシャレに見せたい時に使用されそうなデザインとなります。

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

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

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

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

レスポンシブでは、折り返して1カラムになるよう実装しております。

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

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

HTML

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

カードブロックの数を増やしたい場合は、「Card-Item」の塊を増やしてあげればOK！

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Item">
      <a href="" class="Card-Item-Box">
        <span class="Card-Item-Box-Title">ABOUT</span>
        <div class="Card-Item-Box-ImgBox">
          <div class="Card-Item-Box-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div>
        </div>
      </a>
    </div>
    <div class="Card-Item">
      <a href="" class="Card-Item-Box">
        <span class="Card-Item-Box-Title">SERVICE</span>
        <div class="Card-Item-Box-ImgBox">
          <div class="Card-Item-Box-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div>
        </div>
      </a>
    </div>
    <div class="Card-Item">
      <a href="" class="Card-Item-Box">
        <span class="Card-Item-Box-Title">NEWS</span>
        <div class="Card-Item-Box-ImgBox">
          <div class="Card-Item-Box-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div>
        </div>
      </a>
    </div>
    <div class="Card-Item">
      <a href="" class="Card-Item-Box">
        <span class="Card-Item-Box-Title">RECRUIT</span>
        <div class="Card-Item-Box-ImgBox">
          <div class="Card-Item-Box-ImgBox-Img" style="background: url('画像URL') no-repeat; background-position: center; background-size: cover;"></div>
        </div>
      </a>
    </div>
  </div>
</div>

CSS

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

文字サイズや、アニメーションの速度、ボーダーの色などはよしなに変更してお使いください。

CSS

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

.Card{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.Card-Item{
  width: 50%;
  box-sizing: border-box;
}
@media screen and (max-width: 480px){
  .Card-Item{
    width: 100%;
  }
}
.Card-Item:nth-child(2n-1){
  border-right: 1px solid #fff;
}
.Card-Item:nth-child(1),
.Card-Item:nth-child(2){
  border-bottom: 1px solid #fff;
}
.Card-Item-Box{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Card-Item-Box-ImgBox{
  width: 100%;
  overflow: hidden;
}
.Card-Item-Box-ImgBox-Img{
  width: 100%;
  padding-top: 36%;
  transform: scale(1);
  transition: .3s ease-in-out;
}
.Card-Item-Box-ImgBox:hover .Card-Item-Box-ImgBox-Img{
  transform: scale(1.3);
}
.Card-Item-Box::before{
  content:" ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s linear;
}
.Card-Item-Box:hover::before{
  opacity: 0.3;
}
.Card-Item-Box-Title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-bottom: 1px solid #fff;
  margin: 0;
  padding: 0;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  z-index: 1;
}

まとめ

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

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

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