こんにちは。
ゆうや(@yuyaphotograph )です!
この記事では、
HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい コピペでOKなカードブロックのコードを見たい という方のお悩みを解決します!
今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したもの です。
HTML構造が複雑なだけでなく、jQueryを用いたホバーエフェクトつきなので当時は苦戦しました笑
同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです!!
完成イメージ 今回紹介するコードで実現できるカードデザインはこちら!
▼▼▼
▼▼▼
ホバーすると、、、 ▼▼▼
背景画像がフワッと切り替わって中から文章が現れた!
3カラムのカードです!
最大の特徴は、マウスオーバー時に、背景画像がふわ~っと移り変わって、中から隠れていた文章が現れる点です。
コーポレートサイトのトップページの会社名の由来を紹介するブロックなどに使用されそうなデザインとなります。
以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます!
それでは見ていきましょう〜〜
カードデザインのサンプルコード こちら、CodePenで作った見本です!
レスポンシブでは、一列になるように実装しております。
この画面だと2分割されて本来のPCサイズで表示されないので、ぜひ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' );
}
);
});
コピー
まとめ 以上、実務でよく使われる少し複雑なカードデザインのコーディングのサンプルコード⑤を紹介しました。
コーポレートサイトの制作案件をする際にきっと!役立つスキルとなりますのでぜひ覚えていきましょう〜!
コーディングスキルアップシリーズはこちら!