Zenn
🧊

TailWindCSSでFooterの位置を固定する

2022/10/09に公開
Tailwind CSS
tech

見えない余白を解消する必要があった!

TailWindCSSのサンプルを使ってカッコイイFooterを使おうとしたが、右側に余白ができて、綺麗なUIを作れなかった😱
Reactでやっと時は、問題なかったのですが、Next.jsだと上手くいかない?
コンポーネント思考が原因かと思っていたのですが、そうではないみたいですね。ブラウザ側がデフォルトで持っているCSSに原因があるようです。ブラウザがCSS持っているんですね知らなかった...

リセットCSSを使うと解消することができます。
こちらのサイトに詳しく書かれています。
https://web-camp.io/magazine/archives/30817

Next.jsでTailWindCSSを使うには、こちらの公式ドキュメント通りに、設定すれば環境構築ができます。
https://tailwindcss.com/docs/guides/nextjs

stylesフォルダの中に、reset.min.cssというファイルを作成して、こちらに、上のリンクから、見れるHTML5 Doctor CSS Resetというものに書いてあるコードをコピペして使うと、全てのCSSがリセットされる。
これだけでは、使えないので、_app.jsでインポートしなければならない。
TailWindCSSも無力化されてしまうようなので、_app.jsでインポートして、全てのページで使えるようにする。

フォルダ構成はこのようになっています。

reset.min.css
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
   font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

_app.jsで使用するCSSをインポートする。これで全体で使えるようになる。

_app.js
import '../styles/reset.min.css'
import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

pagesフォルダに、componentsフォルダを作成して、header.jsxとfooter.jsxを作成する。どちらも、FlexBOXを使わないと、いい感じに配置にできなかった!
本当はnavタグとか、使った方がいいんでしょうけどね😅

headerを設定。こちらは、難しくなかった。FlexBOXで横並びに配置する。普通のCSSでやった時もflexでレイアウトを普段から、整えています。

header.jsx
export default function Header() {
  return (
    <header className="bg-slate-500">
      <div className="flex">
        <div>
          <div class="flex p-4">
            <div className="pr-10 pl-10 text-slate-300">HOME</div>
            <div className="pr-10 text-slate-300">INFO</div>
            <div className="pr-10 text-slate-300">CONTACT</div>
          </div>
        </div>
      </div>
    </header>
  );
}

こちらが問題のfooterですね。結構難しかったです😇
画面下にくっつけて配置しているせいか文字が左端によってしまったので、FlexBOXでレイアウトを整えている情報をネットで見つけて、そちらの方法で解決しました。

absolute bottom-0と書けば画面下の位置にfooterがくっついて位置を固定できる。でもこれは癖がありましたね。他にいい方法ないものか?
以前生のCSSで教えてもらった方法があったけど今回はこちらの方法でやってみます。デザインにこだわってないので💦

<footer className="absolute bottom-0 bg-slate-500">

FlexBoxとdivを使ってレイアウトを整えています。最近は、div使うのは古いというが、TailWindCSSはdiv多いような気がする?

footer.jsx
export default function Footer() {
  return (
    <footer className="absolute bottom-0 bg-slate-500">
      <div className="flex">
        <div className="flex-1 w-screen">
          <div class="flex justify-center ...">
            <div className="pr-10 text-slate-300">@Copyright</div>
            <div className="pr-10 text-slate-300">2022 10/08 SAT </div>
            <div className="pr-10 text-slate-300">JboyHashimoto</div>
          </div>
        </div>
      </div>
    </footer>
  );
}

index.jsで、headerとfooterを読み込む

index.js
import Footer from "./components/footer";
import Header from "./components/header";

export default function Home() {
  return (
    <div>
    <Header />
    <Footer />
    </div>
  )
}

こちらが作成している画面です。これ作るだけですごく時間かかりました(笑)

最後に

以前は、Next.js好きじゃなくてNuxt2を使っていたのですが、最近は流行りもあってか、情報が多く、学習コストも下がってきてまた勉強をしてます。
TailWindCSSとは、相性がいいのですが私、地方住まいなので、地元の企業さんはScssの方を使ってる企業が多いので、そっちで作った方がいいかなと悩んでたりしますね。

追加事項

footerなのですが、CSSのスタイルを参考にスタイルを適応したら解決できました!

参考にしたサイト

こちらのCSSをTailwindCSSのドキュメントを見ながら、同じように書くと直せました😅
https://www.eyesofc.co.jp/webeyes/category/homepage/875/
position:absoluteだと癖があるので、position:fixedの方が良いですね。

参考にしたCSS

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #44aa33;
}
footer.jsx
export const Footer = () => {
  return (
    <footer className="fixed bottom-0 left-0 right-0 bg-cyan-400">
      <div className="grid grid-cols-4 gap-8 p-8">
        <div className="mb-8">
          <address>〒815-0000 福岡県〇〇市</address>
        </div>
        <div>
          <div className="mb-8">最新の記事</div>
          <ul>
            <li>記事1</li>
            <li>記事2</li>
            <li>記事3</li>
          </ul>
        </div>
        <div className="col-span-4 justify-self-center">
          @Copy 2022 10/31 JboyHashimoto
        </div>
      </div>
    </footer>
  )
}

Discussion