目次
1.この記事を書くきっかけ
2.自己紹介
3.この記事を見てほしい人
4.Reactについて
5.Next.js + Tailwind cssの導入方法
6.Tailwind css
7.スクロールアニメーション
8.Next.jsのImageについて
9.おわり
10.おまけ
1. この記事を書くきっかけ
fwywdという会社の１次試験でQiitaに記事を投稿するという試験があり、書くことになりました。
初めて記事を書くので、ご不明な点等があるかもしれませんが、できるだけ詳しく書いていくので、どうぞよろしくお願いいたします。
2. 自己紹介
私はhtml css を３カ月前に勉強し始めたばかりの学生です。
Tailwind css歴は２カ月程度ですが、こんな私でもfwywdの一次試験のサイト制作が通ったので、ぜひ参考にしていただければ幸いです。
3. この記事を見てほしい人
Reactを触ったことがある人(jsx記法、コンポーネント化)
cssを触ったことがある人(hover、レスポンシブ)
Tailwind cssを触ったことがない人
fwywdの一次試験に応募したい人
4. Reactについて
ReactはNext.jsのもとになるものですが、説明については割愛させていただきます。
こちらの動画で詳しく解説しています。
5. Next.js+Tailwind cssの導入方法
nodeについて
nodeは必須なので、入っていない方はこちらの記事を参考にしてください
すでにnode、npmかyarnが入っている方
vscode
vscodeが入っていない方は、インストールすることを強くお勧めします。
個人的におすすめな拡張機能
絶対に必要
Japanese Language Pack ( 日本語になる )
Tailwind CSS intelliSense ( 補完機能 )
Error Lens ( エラーの内容が表示される )
ESLint ( 構文エラーがわかる )
あると便利
Auto Rename Tag ( 開始タグ、終了タグの片方を自動補完 )
Git History ( git使うときに便利 )
indent-rainbow ( 空白に色がついて、まとまりがわかりやすい )
HTML CSS Support ( 補完機能 )
HTML Snippets ( 補完機能 )
6. Tailwind cssについて
生のcssの説明については割愛させて頂きます。
基本的な使い方
Tailwind css は、HTMLのタグにクラスを与えることで、スタイルが付加されます。
Bootstrapを触ったことがある人なら、すぐに慣れると思います。
cssのコード
h1{
font-size:30px;
color:#535353;
width:100%;
height:50%;
}
Tailwind cssのコード
<h1 className="text-[30px] text-[#535353] w-full h-[50%] ">Hello Tailwind</h1>
このように、必要なスタイルに応じたクラスを、つけ足していきます。
下のサイトはTailwind cssを使う上で必須なサイトで、サイトの上部の ”Search” に当てたいcssを入力するとTailwindのクラスに直してくれます。
例
background-color
結果
bg-red-50
bg-red-100
・
・
・
ファイルのtailwind.config の設定を mode:"jit"にしないと、[ ]を使った書き方はできません。
基本的なクラス
padding -> p 例: padding:10px; -> p-[10px] padding-left:10%; -> pl-[10%]
margin -> m 例: margin:10px; -> m-[10px] margin-left:10%; -> ml-[10%]
width -> w 例: width:100px -> w-[100px] width:100% -> w-full か w-[100%]
height -> h 例: height:2em -> h-[2em] height:100vh -> h-[100vh]
font-size:100px; -> text-[100px]
font-family:bold; -> font-bold
color:red; -> text-red-500 color:#92400E; -> text-[#92400E]
background-color:red; -> bg-red-500 background-color:#92400E -> bg-[#92400E]
border:2px solid black; -> border-2 border-black border-solid
border-radius:100px; -> rounded-[100px]
text-align:center; -> text-center text-align:left -> text-left
float:left; -> float-left float:right; -> float-right
opacity:0.1; -> opacity-10 opacity:1; -> opacity:100 opacity:0.54 -> opacity-[54%]
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); -> shadow
display:none; -> hidden display:block; -> block display:flex; -> flex display:grid; -> grid
position:relative; -> relative position:absolute; -> absolute
見栄えを気にせず ずらずら書きましたが、基本的なcss はこのようなクラスを書くことで、同等のスタイルになります。
これを見て、「案外、複雑じゃないかも！」と思えたら、すぐにTailwind cssをマスターできるはずです。
hover activeについて
次に、hoverやactiveについてです。
Tailwind cssではクラスの前に hover: とつけるだけで、hoverしたときのスタイルになります。
しかし、ひとつひとつにhover:をつける必要があるところがデメリットです。
試しにこちらのコードを読み込んでみてください。
<button className="py-[10px] px-[20px] border border-black duration-300 hover:text-white hover:bg-black hover:translate-y-[-10px] hover:rotate-[360deg] hover:scale-150">Hover me!</button>
hoverしたときにボタンが動いたでしょうか？
ここに書いてある hover: で始まるクラスは、全てhoverしたときに発火します。
hover:p-10 hover:m-10 hover:text-black hover:hidden のように、ほとんどのクラスをhoverにあてることができます
activeについても同様で、先ほどのコードのhoverの部分をactiveに変えるだけで、クリックしている間だけ発火させることができます。
<button className="py-[10px] px-[20px] border border-black duration-300 active:text-white active:bg-black active:translate-y-[-10px] active:rotate-[360deg] active:scale-150">Click me!</button>
また、このクラスの中に duration-300とありますが、これはcssでいうtransition:0.3sと同じスタイルになるので、hoverやactiveを使うときには必ずつけましょう
レスポンシブについて
レスポンシブデザインは、cssでは
@media (min-width: 600px) {
/* 画面の横幅が600px以上で適用 */
}
@media (min-width: 1000px) {
/* 画面の横幅が1000px以上で適用 */
}
のように書きます。
Tailwind cssの場合では、hover: active:と似た書き方になります。
<button className="py-[10px] px-[20px] border border-black block sm:hidden md:block lg:hidden xl:block" 2xl:hidden> responsive BTN </button>
画面の横幅を変えることで、このボタンは出たり消えたりします。
このsm: のように書いたものはデフォルトで、以下のようになります。
BreackPoint
min-width
CSS
sm
640px
@media (min-width: 640px) { ... }
md
768px
@media (min-width: 768px) { ... }
lg
1024px
@media (min-width: 1024px) { ... }
xl
1280px
@media (min-width: 1280px) { ... }
2xl
1536px
@media (min-width: 1536px) { ... }
<p className="text-[10px] sm:text-[100px]"> Big </p>
このコードの場合、sm(640px)になるまで text-[10px]の状態でいて、sm(640px)を超えた時に text-[100px]の状態になります。
7. スクロールアニメーション
スクロールアニメーションをつけると、それだけでとても高度なサイトに見せることができます。
生のJavaScriptでやると、
const els = document.querySelectorAll(".new-Animation");
const cb = function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("fadeIn");
//observer.unobserve(entry.target);
} else {
entry.target.classList.remove("fadeIn");
}
});
}
const options = {
root: null,
rootMargin: "0px 0px",
threshold: 0
};
const io = new IntersectionObserver(cb, options);
els.forEach(el => io.observe(el));
このような書き方になると思います。ですが、Next.jsはReactなのでdom操作は推奨されていません。
そこで、react-intersection-observerというライブラリを使うと、簡単に実装することができます。
以下のサイトでわかりやすく説明しています。
スクロールアニメーションのコンポーネント化
また、スクロールアニメーションを導入する際におススメするのが、スクロールアニメーションの動作をコンポーネント化して、動作させたい要素ごとに呼び出す方法です。
その方法は、まず、react-intersection-observerをインストールします。
そして、プロジェクトの直下にcomponentsフォルダを作り、ここではFadeIn.jsxを作ります。
components
FadeIn.jsx
pages
api
_app.js
index.js
FadeIn.jsxに以下を書きます。
import { useInView } from 'react-intersection-observer';
export const FadeIn = ({ children }) => {
const { ref, inView } = useInView({
// オプション
rootMargin: '-50px', // ref要素が現れてから50px過ぎたら
triggerOnce: true, // 最初の一度だけ実行
});
return (
<div
ref={ref}
className={`${inView ? "opacity-100" : "opacity-0 translate-y-[50%]"} duration-[1s]`}
>
{children}
</div>
)
}
そしたら、index.jsに以下を書くとスクロールアニメーションが実行できます。
import { FadeIn } from '../components/FadeIn';
export default function Home() {
return (
<div>
<FadeIn>
<h1 className="my-[300px] text-[100px]">fadein</h1>
</FadeIn>
<FadeIn>
<h1 className="my-[300px] text-[100px]">fadein</h1>
</FadeIn>
<FadeIn>
<h1 className="my-[300px] text-[100px]">fadein</h1>
</FadeIn>
</div>
)
}
このように＜FadeIn＞＜/FadeIn＞で囲った要素が、スクロールで画面に入った時にふわっと出現ます。
右から出現
import { useInView } from 'react-intersection-observer';
export const SlideInRight = ({ children }) => {
const { ref, inView } = useInView({
// オプション
rootMargin: '-100px', // ref要素が現れてから50px過ぎたら
triggerOnce: true, // 最初の一度だけ実行
});
return (
<div
ref={ref}
className={`${inView ? "opacity-100" : "opacity-0 translate-x-[50%]"} duration-[1s]`}
>
{children}
</div>
)
}
左から出現
import { useInView } from 'react-intersection-observer';
export const SlideInLeft = ({ children }) => {
const { ref, inView } = useInView({
// オプション
rootMargin: '-100px', // ref要素が現れてから50px過ぎたら
triggerOnce: true, // 最初の一度だけ実行
});
return (
<div
ref={ref}
className={`${inView ? "opacity-100" : "opacity-0 translate-x-[-50%]"} duration-[1s]`}
>
{children}
</div>
)
}
これをセクションや、ブロックごとに、このコンポーネントを使い分けることで、よりアップグレードしたサイトになります。
8. next.jsのImageについて
Next.jsはそのまま使うだけでも、SEO効果がかなり高いです。
さらに、SEO効果を高めるためにimgタグではなく、Imageを使うことが推奨されています。
こちらのサイトで詳しく説明しています。
昔のNext.jsでは
<img src="/img.png" alt="img"/>
と、いう書き方でしたが
import img from "../public/img.png"
.
.
.
<Image src={img} alt="img"/>
今は、このような書き方が推奨されています。
元の画像のサイズを変えない場合の書き方です。
<Image src={img} placeholder="blur" alt="img" />
また、このようなオプションをつけることをおススメします。
placeholder="blur"をつけることで、画像完全に読み込まれるまで、ぼやけて表示してくれるので、表示速度が上昇します。
（src={img}のような書き方以外は、placeholderは使えません）
画像のサイズを変える場合で、アスペクト比を保ちたい場合には以下のように書きます。
<Image src="/img.png" width={100} height={500} objectFit="contain" alt="img"/>
widthとheightは、両方かかないとエラーになるので注意して下さい。
また、objectFit="contain"を追加すると、画像のアスペクト比が保たれます。
9. おわり
お疲れ様でした。Next.js + Tailwind css はこの先のフロントエンドで主流になると思うので、ぜひこの機会に習得してみてください。
ここまで読んでいただき誠にありがとうございました。
10. おまけ
固定されたヘッダーを、下スクロールしたときに消えて、上スクロールしたときに表示する方法
このgithubのサイトをスクロールしていくと、inistall の仕方が書いてあります。
コードはこちらです。
import { useState } from 'react';
import { useScrollPosition } from "@n8tb1t/use-scroll-position";
export default function Home() {
const [showHeader, setShowHeader] = useState(true);
useScrollPosition(({ prevPos, currPos }) => {
const visible = currPos.y > prevPos.y;
setShowHeader(visible);
}, []);
return(
<div>
<header className={`fixed top-0 z-10 bg-red-300 bg-opacity-75 w-full duration-300
${showHeader ? "" : "translate-y-[-100%]"}`}>
HEADER
</header>
<div className="my-[1000px]">text</div>
</div>
)
}
header のクラス内に${showHeader ? "" : "translate-y-[-100%]"}とあります。
これは、showHeaderという変数に今現在上にスクロールしているか、下にスクロールかを判別しています。
また、この書き方は三項演算子といい、ここではshowHeaderがtrueの時に左、falseの時に右の""の中が実行されます。
ここでは、下にスクロールしているときはtrueが格納されるので${showHeader ? "" : "translate-y-[-100%]"}ここでいう ""がクラスにあてられます。
上にスクロールしているときはfalseが格納されるので"translate-y-[-100%]"、つまり上に100%動くのでヘッダーが上に隠れます。
↧