自分用のメモ
Contents
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
Next Create Appで作成します。
下記ページの続きです。
Next Create Appで作成されたソースの変更
styled-jsxを使った実装
- 12～29行目で、自動的にタグにstyleが適用されるようになります。
import Head from 'next/head'
const Home = () => {
let title = 'Next.js page'
let message = 'React Next.js sample page.'
return (
<div>
<Head>
<title>{title}</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' crossOrigin='anonymous'></link>
</Head>
<style jsx>{`
h1 {
text-align: center;
}
h2 {
text-align: center;
margin: 0px 5px;
color: #aad;
font-size: 36pt;
fon-weight: bold;
}
p {
text-align: left;
margin: 0px 5px;
color: blue;
font-size: 18pt;
}
`}</style>
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h2 className='my-3 subtitle'>{title}</h2>
<div className='alert alert-primary text-center'>
<p className='h5'>{message}.</p>
</div>
</div>
</div>
)
}
export default HomeCSSファイルを使った実装（./styles/Home.module.css）
- styled-jsxで定義した内容をコピーしました。タグ名の先頭に.（ドット）が必要です。
.h1 {
text-align: center;
}
.h2 {
text-align: center;
margin: 0px 5px;
color: #aad;
font-size: 36pt;
fon-weight: bold;
}
.p {
text-align: left;
margin: 0px 5px;
color: blue;
font-size: 18pt;
}- 2行目にimport文を書くだけでstyleが適用されます。
import Head from 'next/head'
import styles from '../styles/Home.module.css'
const Home = () => {
let title = 'Next.js page'
let message = 'React Next.js sample page.'
return (
<div>
<Head>
<title>{title}</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css' crossOrigin='anonymous'></link>
</Head>
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h2 className='my-3 subtitle'>{title}</h2>
<div className='alert alert-primary text-center'>
<p className='h5'>{message}.</p>
</div>
</div>
</div>
)
}
export default Homeあとがき
特になし
コメントを残す