Chapter 11

ヒーローコンポーネントの作成

サイトトップの見栄えを良くするためのヒーローコンポーネントを作成します。ヒーローコンポーネント(※)とは、ファーストビューでユーザーにサイトを印象づける目的で使われます。派手な画像や動画を用いることが多いですが、今回はシンプルに文字ベースで作っていきます。

※ ヒーローヘッダと呼ぶことが多いですが、ここではヒーローコンポーネントと呼んでいます。

コーディング

コンポーネント

メッセージと著者情報を作成します。
画像や文字の内容は、ご自由に変更してください。

// src/components/hero.js
import React from "react"
import "../styles/hero.css"

export default function Hero() {
    return (
        <div className="hero">
            <h1 className="hero-text">
                Welcome to my blog!<br />
                Enjoy lots of posts.<br />
            </h1>
            <div className="hero-author">
                <img src="https://api.adorable.io/avatars/30/image.png" className="hero-author-image" alt="avatar"></img>
                <p className="hero-author-text">
                    Written by XXXX.<br />
                    Front Engineer at Hoge.Inc. Love JavaScript.
                </p>
            </div>
        </div>
    )
}

スタリング

画像と文字の見栄えを整えるようスタイリングを行います。
特筆すべき点としては、画面幅に合わせてフォントサイズが変わるようにしています。
モバイル/PCどちらで見ても、小さすぎず大きすぎないフォントサイズになるようにしています。

/* src/styles/hero.css */
.hero {
  margin: 100px 0px;
}

.hero-text {
    font-size: calc(24px + 1.5vw);
    line-height: 1.2;
}

.hero-author {
  display: flex;
}

.hero-author-image {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.hero-author-text {
  color: #595959;
  margin: 0 0 0 10px;
}

ヒーローコンポーネントの適用

作成したヒーローコンポーネントをトップページで読み込みます。

// src/pages/index.js
import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"

export default function Home() {
  return (
    <Layout>
      <Hero />
    </Layout>
  )
}

表示結果

見栄えが良くなり、webページっぽくなってきましたね。
次はブログ一覧を表示するコンポーネントを作成していきましょう。
hero.png