🏓

React(jsx) + CSS でよくあるフッターメニューを作る

2021/06/19に公開

フッターぐらいはさらっと作れるようになりたいものです。でも今の自分では色々調べないと作れませんでした。
レスポンシブは色を変えたりして少し遊んでみましたが、フッター自体はシンプルに作りました。
せっかくReactで作ったのならComponentで使いまわせ方が良いですよね。
なので共有します。

分からなくて調べたことは

aタグのデフォルト青色が変える方法
windowサイズによって横並びの文字列を折り返して表示する方法

です。

完成イメージ

レスポンシブは少し挙動がぎこちないですが、こんな感じにしてみました。

シンプルな普通のフッターです。

前提条件

MacBook Air (M1, 2020)を使ってます。
create-react-app で作ったアプリに導入してます。
ファイル構成は主にトラハックさんの動画を参考にしてます。

実際のコード

1.フッターコンポーネントを作る

src/compornents/footer/FooterBoxDetail.jsx

import React from "react";
import "../../assets/css/footerDetail.css";
import logo from "../../assets/img/src/TimeBooth_logo_row01.png";

const FooterBoxDetail = () => {
  return (
    <footer className="footer-detail-container">
      <div className="footer-detail-container--inner center-box">
        <div className="footer-detail-top--inner flex-row">
          <img className="footer-detail-logo" src={logo} alt="ロゴ画像" />
          <div className="copy-detail arial">© 2021 Rayward Inc.</div>
        </div>
        <div className="footer-detail-middle--inner flex-row">
          <div className="footer-detail-menu-text">
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              特定商取引法に基づく表記
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              プライバシーポリシー
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              利用規約
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              ロイヤルティ利用規約
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              会社概要
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default FooterBoxDetail;

windowサイズによって横並びの文字列を折り返して表示する方法

liは使わずdivをflexで横並びにしてます

  <div className="footer-detail-top--inner flex-row">

普通はulとliを使ってフッターを作るのでしょうか？調べるとそういったコードが多かったです。
使い慣れてなかったので、divとflexで強引に作りました。

flex-rowはよく使うやつだったので共通CSSとして登録して使ってます

.flex-row {
  display: flex;
  flex-flow: row;
  align-items: center;
}

2.CSSをあてる

src/assets/css/footerDetail.css

/*********** footerDetail ***********/
.footer-detail-container {
  position: relative;
  background-color: #e3e3e3;
  height: auto;
}
.footer-detail-container--inner {
  width: 100%;
}
.footer-detail-top--inner {
  padding: 30px 0px 5px 10px;
}
.footer-detail-middle--inner {
  padding: 0px 0px 30px 15px;
}
.footer-detail-logo {
  width: 150px;
}
.copy-detail {
  color: #404040;
  font-size: 11px;
  padding-top: 11px;
  padding-left: 5px;
}
.footer-detail-menu-text {
  font-size: 11px;
  letter-spacing: 0.125rem;
  line-height: 1.7;
  text-decoration: none;
  color: grey;
}
.footer-detail-menu-text > a {
  display: inline-block;
  text-decoration: none;
  color: grey;
  padding: 0px 5px 5px 5px;
}

/*********** Responsive ***********/
@media screen and (min-width: 576px) {
  .footer-container--inner {
    width: 80%;
  }
}
@media screen and (min-width: 1024px) {
  .footer-detail-container {
    background-color: black;
  }
  .footer-detail-container--inner {
    width: 650px;
  }
  .copy-detail {
    color: white;
  }
  .footer-detail-menu-text {
    color: white;
  }
  .footer-detail-menu-text > a {
    color: white;
  }
}

レスポンシブのポイント

メディアクエリ

@media screen and (min-width: 1024px)

メディアクエリを使って強引にレスポンシブ調整している感じです。

aタグのデフォルト青色が変える方法

aタグにCSS

.footer-detail-menu-text > a {
  display: inline-block;
  text-decoration: none;
  color: grey;
  padding: 0px 5px 5px 5px;
}

aタグにCSSを当てるときは > を使って要素の指定？をするとうまくいきました

参考

Reactアプリ全般で参考にしているトラハックさん
YouTubeのvideoIDが不正です

追伸

CSSの技術記事は実際に作成したアプリで説明すると、ものすごく分かりづらいことに気がつきました。
書いてる途中で、これ絶対に他の人には役に立たないなって感じてました(笑)
CSS説明用にサンプルアプリを用意するか、挙動を確認しながら理解できる形にしないと難しいですね。

今回はフロントエンドの奥深さを勝手に実感しました。
今は一人で開発しているので問題なかったですが、チームとなるとCSSの設計はもちろん、名称とかめっちゃ合わせるの大変そうです⋯⋯。
一度、フロントエンドのプロフェッショナルから基礎を学んでみたいものです。
おすすめの動画などありましたら、コメントなどで共有してもらえると嬉しいですm(_ _)m