こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
- Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
- ２つの要素がオシャレに重なり合っていて、テキスト情報も盛り込めるカードパーツを実装したい
という方のお悩みを解決します！
今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。
シンプルですが、洗練されたイメージを与えることのできるデザインで初学者の方には難易度高めかなと思います。
同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです！！
完成イメージ
今回紹介するコードで実現できるカードデザインはこちら！
▼▼▼
画像と長方形がいい感じに重なり合っていて、テキストも挿入できるのが特徴です。
この画像では分かりづらいと思いますが、緑色の長方形はウィンドウ右端にピタッと寄っている想定です。
実装のポイントは緑色の長方形を起点にして、画像をabsoluteで配置する点です。
ポートフォリオで、自分のプロフィール情報をオシャレに見せたい時に使用されそうなデザインとなります。
以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！
それでは見ていきましょう〜〜
カードデザインのサンプルコード
こちら、CodePenで作った見本です！
レスポンシブには未対応です。
この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいです。
See the Pen
XWXoEXY by 石森裕也 (@yuyaphotograph)
on CodePen.
HTML
こちら、今回のカードデザインのHTML構造です！
文章部分は「Inner-Card-Text-Item」を増やしてあげればOK。
文章の余白は2番目以降のpタグに設定します。
改行はよしなに。
<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で行っています。
デザインデータにあわせてよしなに変更してください。
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;
}まとめ
以上、実務でよく使われる少し複雑なカードデザインのコーディングのサンプルコード⑬を紹介しました。
少しとっつきにくいですが、Web制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！
コーディングスキルアップシリーズはこちら！
