PROGRAMMING

Reactでウェブサイトを作る！【カードコンポーネント】

今日もウェブサイトの制作についてやっていきます。

今回はカードを実装していこうと思います。

カードコンポーネントとは、画像がありその下に画像の説明などが載っているコンポーネントです。

カードコンポーネントについて詳しく下記のサイトに載ってあるので、参考にしました。

Shibajuku
 
カード型コンポーネントの僕なりのHTMLとCSSを紹介 | Shibajuku
https://shibajuku.net/card-component-markup/
ECサイトやブログの一覧ページでよく見かけるカード型コンポーネントの僕流のマークアップ方法をご紹介します。カード型コンポーネントは一般的に画像が先頭にあり、その後に見出しやテキストなどが続く縦型のコンポーネントで、あらゆるとろこでよく見かけます。

それでは今回の内容です。

今回の内容
・カードコンポーネントの作成
・カードコンポーネントの表示

前回と学習の手順は変わりませんが、こんな感じでやっていきたいと思います。

下記は参考にした動画とコードです。

GitHub
briancodex/react-website-v1
https://github.com/briancodex/react-website-v1/tree/starter
Contribute to briancodex/react-website-v1 development by creating an account on GitHub.

学習内容

カードコンポーネントのコードの完成図は下記の通りです。

横幅が変わっても、きれいに表示されるようになっていますね。

カードコンポーネントの作成

それでは、カードコンポーネントを作成していきますが、先にCardItemというコンポーネントを作っていきます。

このCardItemでは、引数をpropsにして、propsに入ったCards.jsのファイルのデータを受け取る場所です。

propsに関しては下記のページがわかりやすくなっています。

ja.reactjs.org
 
コンポーネントと props – React
https://ja.reactjs.org/docs/components-and-props.html
ユーザインターフェース構築のための JavaScript ライブラリ

それでは、まずは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}は他のファイルから渡される値です。

渡される値はパス、ラベル、画像、テキスト（文章）の４種類ですね。

これを他のファイルでレンダーをして、引数を渡すと、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についての理解が深まったらこれをベースにサイトを構築していこうと思っています。

最後まで読んでいただき、ありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.