覚え書き
- 初心者的メモ
- Next.js公式チュートリアルやってみた
- 【CSS】のところ
- 公式チュートリアルのURL
https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout
-.cssファイルは
-.module.cssとする必要があるらしい
HTML, CSSの時のcssはリセットCSS以外作った事が無かったのですが、ここで、レイアウト用とテキスト用のmodule.cssをそれぞれ用意するという事を学びました。
（ top = 一番上のフォルダ名 ）
- レイアウトなど用（コンテナー、ヘッダー等構成系？）
top/components/layout.module.css - テキストなど用（font-sizeやline-height等要素系？）
top/styles/utils.module.css
これをimportする構文
top/components/layout.jsとtop/pages/index.jsにimportする
（他ファイルからも読み込ませが必要だったりする？）
top/components/layout.js
//import
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import //その他のimportも記述
//Layoutコンポーネント
export default function Layout ({/* 省略 */}){
return (
<div>
////省略
<Head>
////<meta><link>など・・・省略
</Head>
<header>
////省略
</header>
<main>
////省略
</main>
<footer>
////省略
</footer>
</div>
);
}
まとめ
短いですが、まとめを。
- CSSの書き方の参考になる（悩みやすい初心者）
-
-.module.cssファイルを種類別で生成する - importで読み込ませる
- コードやファイル追加によっては状況が変わるかも
- 初心者メモなのでバグ他ご注意ください😅