PROGRAMMING

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

今日はウェブサイトのヒーローヘッダーの追加をしていきます。

ヒーローヘッダーについては下記のサイトを参考にして下さい。

この記事でわかること
・ヒーローヘッダーのデザイン方法
・Buttonコンポーネント

ウェブサイトのデザインの重要な部分です。

コードも理解できるようにコードに書き込みをしておきます。

今回はこんな感じでやっていきたいと思います。

参考文献

今回もこちらの動画を参考にさせて頂いております。

HeroSectionコンポーネント

まずはHeroSectionというコンポーネントを作成するので、Herosectionのフォルダを作成します。

その下にindex.jsHeroSection.cssのファイルを作成します。

index.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;

こちらはほとんどHTMLと変わりませんね。

次にCSSの部分を作って、デザインしていきます。

.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;
  }
}

backgroundに画像を追加する方法で、いろいろなデザインの指定ができます。

上記のページを参考に理解しました。ぜひ参考にしてみて下さい。

HeroSection.cssでは横幅のサイズを変えるとフォントサイズを変更できるようにしています。

それでは、index.jsでレンダーできるようにHeroSectionコンポーネントを追加します。

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

無事に表示できているか、フォントのサイズが変更できているかどうかを確認してみます。

これでヒーローヘッダーが完成です。

次に、この HeroSectionindex.jsButtonコンポーネントを追加して、"Get started"にデザイン性をもう少し加えていきます。

Buttonコンポーネント

Buttonコンポーネントのファイル名をButtonElements.jsという名前にします。

ファイルはcomponentsの下に置きます。

ファイルの中でButtonコンポーネントを定義して、その中にcssを追加していきます。

完成のイメージはこちらです。

こんな感じでボタン機能を追加していきます。

それではButtonElementsにコードを追加していきます。

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%;
}
`

background: ${({ primary }) => (primary ? "#FF4040": "#0467FB")};では背景の色がprimaryが渡されると色が赤になります。

こうするとButtonを渡す値によって変化させることができます。

primaryをどうやって渡すのか。HeroSection/index.jsButtonコンポーネントを渡してみます。

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;

これでButtonコンポーネントfontBigbigprimaryを渡したので、background: ${({ primary }) => (primary ? "#FF4040": "#0467FB")};の左の値が実行されます。

逆に値が渡されない場合は、右の赤色が実行されます。

このようにButtonをレンダーするときに値を変えるだけでデザインを変えることができます。

これでヒーローヘッダーを完了することができました。

まとめ

次ではGrapgqlを使って、画像を表示させていきたいと思います。

簡単に多くの画像を一覧できるようにしていきます。

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

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.