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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
２つの要素がオシャレに重なり合っていて、テキスト情報も盛り込めるカードパーツを実装したい

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

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

シンプルですが、洗練されたイメージを与えることのできるデザインで初学者の方には難易度高めかなと思います。

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

目次 [非表示]

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

完成イメージ

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

▼▼▼

画像と長方形がいい感じに重なり合っていて、テキストも挿入できるのが特徴です。

この画像では分かりづらいと思いますが、緑色の長方形はウィンドウ右端にピタッと寄っている想定です。

実装のポイントは緑色の長方形を起点にして、画像をabsoluteで配置する点です。

ポートフォリオで、自分のプロフィール情報をオシャレに見せたい時に使用されそうなデザインとなります。

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

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

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

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

レスポンシブには未対応です。

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

HTML

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

文章部分は「Inner-Card-Text-Item」を増やしてあげればOK。

文章の余白は2番目以降のpタグに設定します。

改行はよしなに。

HTML

<div class="Inner">
  <div class="Inner-Card">
    <div class="Inner-Card-ImgBox"><div class="Inner-Card-ImgBox-Img" style="background: url('画像URL or パス') no-repeat; background-position: center; background-size: cover;"></div></div>
    <div class="Inner-Card-Text">
      <p class="Inner-Card-Text-Item">テキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p>
      <p class="Inner-Card-Text-Item">テキスト<br>テキストテキストテキスト</p>
    </div>
  </div>
</div>

CSS

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

文字サイズや、画像の横幅や配置などはよしなに変更してお使いください。

画像の横幅・長方形の横幅・absoluteの位置指定はpxではなく、vwで行っています。

デザインデータにあわせてよしなに変更してください。

CSS

p{
  margin: 0;
  padding: 0;
}

.Inner {
  padding-top: 64px;
  width: 100%;
}
.Inner-Card {
  position: relative;
  margin-left: auto;
  width: 60vw;
  height: 29.6vw;
  background: #5bc8ac;
}
.Inner-Card-ImgBox {
  position: absolute;
  top: -55px;
  left: -29.3vw;
  width: 51vw;
}
.Inner-Card-ImgBox-Img {
  width: 100%;
  padding-top: 51.42%;
}
.Inner-Card-Text {
/*   margin-top: -16px; */
  margin-left: auto;
  width: 53.6%;
}
.Inner-Card-Text-Item {
  line-height: 1.8;
  font-size: 16px;
}
.Inner-Card-Text-Item:nth-child(2) {
  margin-top: 48px;
}