CSSをあてよう
CSSをあてていきましょう。
まずは「public」フォルダ内に「asset」フォルダを作成し、その中に「css」フォルダを作成し、更にその中に「style.css」ファイルを作成します。
style.cssの中にスタイルを記述します。
/* h1スタイル */
h1 {
font-size: 2.5rem;
/* 大きな見出しサイズ */
color: #333;
/* 濃いグレー */
text-align: center;
/* 中央揃え */
margin: 20px 0;
/* 上下に余白 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
/* 軽い影 */
}
/* aタグのスタイル */
a {
color: #0070f3;
/* 明るい青色 */
text-decoration: none;
/* 下線を削除 */
font-weight: bold;
/* 太字 */
transition: color 0.3s ease;
/* 色変化のアニメーション */
}
a:hover {
color: #0056b3;
/* ホバー時の濃い青色 */
text-decoration: underline;
/* 下線を追加 */
}
次に、layout.jsでstyle.cssを読み込みます。
import '../public/asset/css/style.css';
npm run devで開発サーバーを立ち上げ、http://localhost:3000にアクセスし、下のように表示されれば成功です。
特定のページのみであてたいCSS
場合によってはページごとにCSSを管理したいことがあります。aboutページを例にとって作成してみます。
まずはapp/aboutフォルダに「about.css」を作成します。
about.css内にスタイルを記述します。
/* Aboutページ専用スタイル */
h1 {
font-size: 2.5rem;
color: #ff6347; /* トマト色 */
text-align: left;
margin: 20px 0;
}
p {
font-size: 1rem;
line-height: 1.6;
color: #333;
}
次にapp/about/page.jsでabout.cssを読み込みます。
http://localhost:3000/aboutにアクセスし、下のように表示されれば成功です。
それぞれの画面を検証ツールで見てましょう
about
top
aboutページにはh1に対して２つのスタイルがあたっているのに対し、トップページでは１つだけです。
about.cssがaboutページにのみあたっていることが確認できます。
ファイルの置き場所について
CSSファイルの置き場所ですが、現在下図のようになっています。
これは置き場所に決まりがあるわけではなく、一般的な配置の仕方にしていますが、
実際は管理しやすいように自由に配置できます。
その際はimportでよみこむ際のパスに気をつけましょう。
画像を配置しよう
画像の配置について見ていきます。
まずはpublic/assetに「img」フォルダを作成し、適当な画像を配置します。
次に、app/components/welcome.jsでImageコンポーネントをインポートし、Welcomeコンポーネント内に配置します。
import Image from "next/image"; <Image
src="/asset/img/image.jpg"
alt="Example Image"
width={500}
height={300}
/>
表示できました。
今回のImageコンポーネントについて、srcのパスが
src="/asset/img/image.jpg"となっています。
これはpublic/ディレクトリはルートパス(/)として扱われるため、このような記述になっています。
また、下記記述
width={500}
height={300}これはimageタグのwidthとheightを指定するものですが、Imageコンポーネントでは指定必須になっています。CSSで上書きできるので、一旦適当な数値を入れておきましょう。
書き方について、imageタグであればwidth=”500″と記述しますが、width={500}となっています。
この書き方について次回説明していきます。
コメント