
今日もウェブサイトの制作についてやっていきます。
今回はカードを実装していこうと思います。
カードコンポーネントとは、画像がありその下に画像の説明などが載っているコンポーネントです。
カードコンポーネントについて詳しく下記のサイトに載ってあるので、参考にしました。
それでは今回の内容です。
今回の内容
・カードコンポーネントの作成
・カードコンポーネントの表示
前回と学習の手順は変わりませんが、こんな感じでやっていきたいと思います。
下記は参考にした動画とコードです。
学習内容
カードコンポーネントのコードの完成図は下記の通りです。

横幅が変わっても、きれいに表示されるようになっていますね。
カードコンポーネントの作成
それでは、カードコンポーネントを作成していきますが、先にCardItemというコンポーネントを作っていきます。
このCardItem
では、引数をprops
にして、props
に入ったCards.js
のファイルのデータを受け取る場所です。
props
に関しては下記のページがわかりやすくなっています。
それでは、まずはCardItems.js
のファイルから見ていきます。
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props){
return(
<>
<li className="cards_item">
<Link className="cards_item_link" to={props.path}>
<figure className="cards_item_pic-wrap" data-category={props.label}>
<img
src={props.src}
alt="Travel"
className="cards_item_img"
/>
</figure>
<div className="cards_item_info">
<h5 className="cards_item_text">{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
{props.path}
、{props.label}
、{props.src}
、{props.text}
は他のファイルから渡される値です。
渡される値はパス、ラベル、画像、テキスト(文章)の4種類ですね。
これを他のファイルでレンダーをして、引数を渡すと、props
の部分に値が入り、カードが表示されます。
これだけでカードの構成が完成ですね。
それでは、次にCard.js
というファイルを作成して、CardItem
をレンダーして引数を渡します。
カードコンポーネントの表示
それでは、Card.js
ファイルを作成してみます。
import React from 'react';
import './Cards.css';
import CardItem from './CardItem';
function Cards() {
return (
<div className='cards'>
<h1>Check out these EPIC Destinations!</h1>
<div className='cards_container'>
<div className='cards_wrapper'>
<ul className='cards_items'>
<CardItem
src='images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/services'
/>
<CardItem
src='images/img-2.jpg'
text='Travel through the Islands of Bali in a Private Cruise'
label='Luxury'
path='/services'
/>
</ul>
<ul className='cards_items'>
<CardItem
src='images/img-3.jpg'
text='Set Sail in the Atlantic Ocean visiting Uncharted Waters'
label='Mystery'
path='/services'
/>
<CardItem
src='images/img-4.jpg'
text='Experience Football on Top of the Himilayan Mountains'
label='Adventure'
path='/products'
/>
<CardItem
src='images/img-8.jpg'
text='Ride through the Sahara Desert on a guided camel tour'
label='Adrenaline'
path='/sign-up'
/>
</ul>
</div>
</div>
</div>
);
}
export default Cards;
主にCards
コンポーネントでは、トップページのヒーローセクションのしたの部分を担当しているファイルです。
上記のコードで、下記の画像のようになります。

<CardItem
src='images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/services'
/>
上記のようにCardItem
コンポーネントの中に引数(
props)
を指定することで、値を渡すことができます。
これにより、いちいちコードを書く手間も減り、きれいなコードになるので可読性も上がりますね。
このようにprops
を使うことで簡単にカードコンポーネントを作ることができます。
CSSを使うことによってデザイン性もよくなっていますね。
CSSも載せておきますので、参考にしてみてください。
.cards {
padding: 4rem;
background: #fff;
}
h1 {
text-align: center;
}
.cards_container {
display: flex;
flex-flow: column;
align-items: center;
max-width: 1120px;
width: 90%;
margin: 0 auto;
}
.cards_wrapper {
margin: 50px 0 45px;
}
.cards_items {
margin-bottom: 24px;
}
.cards_item {
display: flex;
flex: 1;
margin: 0 1rem;
border-radius: 10px;
}
.cards_item_link {
display: flex;
flex-flow: column;
width: 100%;
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
border-radius: 10px;
overflow: hidden;
text-decoration: none;
}
.cards_item_pic-wrap {
position: relative;
width: 100%;
padding-top: 67%;
overflow: hidden;
}
.fade-img {
animation-name: fade-img;
animation-duration: 2s;
}
.cards_item_pic-wrap::after {
content: attr(data-category);
position: absolute;
bottom: 0;
margin-left: 10px;
padding: 6px 8px;
max-width: calc((100%) - 60px);
font-size: 12px;
font-weight: 700;
color: #fff;
background-color: #1f98f4;
box-sizing: border-box;
}
.cards_item_img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
transition: all 0.2s linear;
}
.cards_item_img:hover {
transform: scale(1.1);
}
.cards_item_info {
padding: 20px 30px 30px;
}
.cards_item_text {
color: #252e48;
font-size: 18px;
line-height: 24px;
}
@media only screen and (min-width: 1200px) {
.content_blog_container {
width: 84%;
}
}
@media only screen and (min-width: 1024px) {
.cards_items {
display: flex;
}
}
@media only screen and (max-width: 1024px) {
.cards_item {
margin-bottom: 2rem;
}
}
まとめ
これで今後カードを作るのに時間がかかることはなさそうですね。
今現在が動画をみて、それを真似しながらコードを書いている状況ですが、Reactについての理解が深まったらこれをベースにサイトを構築していこうと思っています。
最後まで読んでいただき、ありがとうございました。