【自作ブログ #6】CSS適用 - スマレジエンジニアyushiのブログ

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

TypeScript
React
Next.js
Styled Components
GitHub Pages

今回は、CSS適用を行います。

CSS Modules

Next.jsで推奨されているCSS適用方法の1つは、CSS Modulesです。

Styling: CSS Modules | Next.js

CSS適用における大きな課題として、想定外の箇所に対してCSSが適用されてしまうリスクがあります。

selector指定を完璧に行えれば問題ないのですが、これにはかなり慎重な設計が必要です。

CSS Modulesでは、CSS適用をモジュール単位（.module.css）に制限でき、これにより上記の問題を簡単に回避することができます。

SCSSを適用することもできます。

sassの導入

sassを導入します。

npm i sass

なお、CSS Modulesについては特別な対応は不要です。

CSS適用

まず、記事ページのSCSSファイルを作成します。

([slug].module.scss)

$mobile-max-width: 768px;
$tablet-max-width: 1024px;

.AppContainer {
  width: $tablet-max-width;
  margin: 0 auto;
  padding: 0 15px;

  @media (max-width: $tablet-max-width) {
    width: $mobile-max-width;
  }
  @media (max-width: $mobile-max-width) {
    width: 100%;
  }
}

ここで定義した.AppContainerを、tsxファイルに適用します。

([slug].tsx)

import styles from './[slug].module.scss'

const Slug = ({ content, title, date }: Props) => {
  return (
    <div className={styles.AppContainer}>
      <ArticleContent content={content} date={dayjs(date)} title={title} />
    </div>
  )
}