
今日はウェブサイトのヒーローヘッダーの追加をしていきます。
ヒーローヘッダーについては下記のサイトを参考にして下さい。
この記事でわかること
・ヒーローヘッダーのデザイン方法
・Buttonコンポーネント
ウェブサイトのデザインの重要な部分です。
コードも理解できるようにコードに書き込みをしておきます。
今回はこんな感じでやっていきたいと思います。
参考文献
今回もこちらの動画を参考にさせて頂いております。
HeroSectionコンポーネント
まずはHeroSection
というコンポーネントを作成するので、Herosection
のフォルダを作成します。
その下にindex.js
とHeroSection.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
無事に表示できているか、フォントのサイズが変更できているかどうかを確認してみます。

これでヒーローヘッダーが完成です。
次に、この HeroSection
のindex.js
にButtonコンポーネント
を追加して、"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.js
にButtonコンポーネント
を渡してみます。
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コンポーネント
に fontBig
・big
・primary
を渡したので、background: ${({ primary }) => (primary ? "#FF4040": "#0467FB")};
の左の値が実行されます。
逆に値が渡されない場合は、右の赤色が実行されます。
このようにButton
をレンダーするときに値を変えるだけでデザインを変えることができます。
これでヒーローヘッダーを完了することができました。
まとめ
次ではGrapgqlを使って、画像を表示させていきたいと思います。
簡単に多くの画像を一覧できるようにしていきます。
最後まで読んで頂きありがとうございました。