Gatsby.jsでウェブサイトを作る！【ヒーローヘッダーの実装】

import React from 'react'
import './HeroSection.css'


function HeroSection(){
  return(
    <div className="hero-container">
      <h1>Travel</h1>
      <p>Plan your next trip today</p>
      <div className="hero-btns">
        <button>Get Started</button>
      </div>
    </div>
  )
}

export default HeroSection;

.hero-container{
  /* 上下左右を中央に配置、coverで画像の大きさを自動調整　画像をリピートしない  */
  background: url("../../images/background2.jpg") center center/cover no-repeat;
  height: 100vh;
  width: 100%;
  display: flex;
  /* 縦で要素を並べる */
  flex-direction: column;
  justify-content: center;
/* アイテムを中央付近にまとめる  */
  align-items: center;
  /* inset | offset-x | offset-y | blur-radius | spread-radius | color */
  /* 浮き上がったように見える| 横 |　縦　| ぼかし | 影の大きさ | 色 | */
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.2);
  /* 要素のコンテンツボックス全体を埋めるサイズになります。*/
  object-fit: contain;
  margin-top: -80px;
}

.hero-container > h1 {
  color: #ffffff;
  font-size: 100px;
  margin-top: 0px;
}

.hero-container > p {
  margin-top: 8px;
  color: #ffffff;
  font-size: 32px;
}

.hero-btns{
  margin-top: 32px;
}

@media screen and (max-width: 960px){
  .hero-container > h1{
    font-size: 70px;
  }
}
@media screen and (max-width: 768px){
  .hero-container > h1{
    font-size: 60px;
  }
  .hero-container > p{
    font-size: 30px;
  }
}

import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import HeroSection from "../components/HeroSection"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <HeroSection />
  </Layout>
)


export default IndexPage

import styled from "styled-components"

export const Button = styled.button`
  border-radius: 4px;
  /* primaryがtrueのとき#FF4040が表示され、falseのときは#0467FB */
  background: ${({ primary }) => (primary ? "#FF4040": "#0467FB")};
  /* ソース中の連続する半角スペース、タブ、改行を一つの半角スペースにまとめ表示。自動的な折り返しはしない */
  white-space: nowrap;
  /* bigがtrueのとき16px 64px、falseのときは10px 20px */
  padding: ${({ big }) => (big ? "16px 64px" : "10px 20px")};
  color: #fff;
  font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
  /*　アウトラインが表示されない */
  outline: none;
  border: none;
  cursor: pointer;
  font-family: "Ubuntu", sans-serif;

  &:hover{
  /* 要素と時間をと変化の仕方を指定する ease-outは開始時は早く変化し、終了時は緩やかに変化　*/
    transition: all 0.3s ease-out;
    background: ${({ primary }) => (primary ? "#0467FB" : "#FF4040")};
  }

@media screen and (max-width: 960px){
  width: 100%;
}
`

import React from 'react'
import './HeroSection.css'
import {Button} from '../ButtonElements'

function HeroSection(){
  return(
    <div className="hero-container">
      <h1>Travel</h1>
      <p>Plan your next trip today</p>
      <div className="hero-btns">
        <Button
         fontBig
         big
         primary
        >Get Started</Button>
      </div>
    </div>
  )
}

export default HeroSection;