page.js

CSS Modules

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}


import './globals.css'

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}


.container {
  max-width: 960px;
  padding: 0 16px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0 8px;
  }
}

.fv {
  height: 400px;
  background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-position: center;
  margin-bottom: 100px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.title {
  /* 問題2. app/page.module.cssにtitleクラスを定義してください */
  /* この下に解答してください */
  font-size: 24px;
  font-weight: bold;
  color: #1d5396;
  margin: 0 auto 16px;
  border-bottom: 1px solid #1d5396;
  display: inline-block;
}


// 問題3. app/page.tsxのTopコンポーネントにスタイルを適用してください
// この下に解答してください
import styles from './page.module.css'

export default function Top() {
  return (
    <>
      {/* 問題1. app/page.tsxのTopコンポーネントを要件に従って作成してください */}
      {/* この下に解答してください */}
      <div className={styles.fv}></div>
      <div className={styles.container}>
        <div className={styles.section}>
          <h2 className={styles.title}>MISSION</h2>
        </div>
        <div className={styles.section}>
          <h2 className={styles.title}>SERVICE</h2>
        </div>
        <div className={styles.section}>
          <h2 className={styles.title}>NEWS</h2>
        </div>
      </div>
    </>
  )
}


.container {
  max-width: 960px;
  padding: 0 16px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0 8px;
  }
}

.fv {
  height: 400px;
  background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-position: center;
  margin-bottom: 100px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.title {
  /* 問題2. app/page.module.cssにtitleクラスを定義してください */
  /* この下に解答してください */
  border-bottom: 1px solid #1d5396;
  display: inline-block;
}


// 問題3. app/page.tsxのTopコンポーネントにスタイルを適用してください
// この下に解答してください

export default function Top() {
  return (
    <>
      {/* 問題1. app/page.tsxのTopコンポーネントを要件に従って作成してください */}
      {/* この下に解答してください */}
      <div></div>
    </>
  )
}



    /** fvクラスありのdiv */
    const answer_fv = `
  <>
    {/* 問題1. app/page.tsxのTopコンポーネントを要件に従って作成してください */}
    {/* この下に解答してください */}
    <div className={styles.fv}></div>
  `;
    /** fvクラスなしのdiv */
    const answer_none_fv = `
  <>
    {/* 問題1. app/page.tsxのTopコンポーネントを要件に従って作成してください */}
    {/* この下に解答してください */}
    <div></div>
  `;
    /** クラスなしのdiv開始タグ */
    const answer_div = '<div>';
    /** containerクラスありのdiv */
    const answer_container = '<div className={styles.container}>';
    /** sectionクラスありのdiv */
    const answer_section = '<div className={styles.section}>';
    /** titleクラスなしのh2でMISSIONの場合 */
    const answer_h2_mission = `
        <h2>MISSION</h2>
      </div>
  `;
    /** titleクラスなしのh2でSERVICEの場合 */
    const answer_h2_service = `
        <h2>SERVICE</h2>
      </div>
  `;
    /** titleクラスなしのh2でNEWSの場合 */
    const answer_h2_news = `
        <h2>NEWS</h2>
      </div>
  `;
    /** titleクラスありのh2でMISSIONの場合 */
    const answer_title_mission = `
        <h2 className={styles.title}>MISSION</h2>
      </div>
  `;
    /** titleクラスありのh2でSERVICEの場合 */
    const answer_title_service = `
        <h2 className={styles.title}>SERVICE</h2>
      </div>
  `;
    /** titleクラスありのh2でNEWSの場合 */
    const answer_title_news = `
        <h2 className={styles.title}>NEWS</h2>
      </div>
  `;
    /** 共通する閉じタグ */
    const common_close_elements = `
    </div>
  </>
  `;
    const hint1 = '再度導入説明にある要件を確認してみましょう';
    const hint2_1 = `
  以下を参考にしましょう
  ~~~css
  /* 文字について、大きさが15px、太さがnormal、色が黒の場合 */
  font-size: 15px;
  font-weight: normal;
  color: #000;
  ~~~
  `;
    const hint2_2 = `
  以下を参考にしましょう
  ~~~css
  /* 外側の下余白が24pxの場合 */
  margin-bottom: 24px;
  ~~~
  `;
    const answer2 = '.title {';
    const answer2_1_1 = 'font-size: 24px;';
    const answer2_1_2 = 'font-weight: bold;';
    const answer2_1_3 = 'color: #1d5396;';
    const answer2_2 = 'margin: 0 auto 16px;';
    const hint3_1 = `
  以下を参考にしましょう
  ~~~tsx
  // 2階層上にあるpage.module.cssをclassesとして読み込む場合
  import classes from '../../page.module.css'
  ~~~
  `;
    const hint3_2 = `
  以下を参考にしましょう
  ~~~tsx
  import classes from './page.module.css'

  export default function Example() {
    return (
      <>
        <div className={classes.first}>1</div>
        <div className={classes.second}>2</div>
      </>
    )
  }
  `;
    const hint3_3 = `
  以下を参考にしましょう
  ~~~tsx
  import classes from './page.module.css'

  export default function Home() {
    return (
      <div>
        <h2 className={classes.title}>HOME</h2>
        <p className={classes.description}>当サイトへようこそ！</p>
      </div>
    )
  }
  ~~~
  `;
    const answer3_1 = "import styles from './page.module.css'";
    const answer3_3_1 = answer_fv + answer_container;
    const answer3_3_2 = answer_none_fv + answer_container;
    const answer3_3_3 = answer_fv + answer_div;
    const answer3_3_4 = answer_none_fv + answer_div;
    const answer3_4_1 = answer_section + answer_h2_mission;
    const answer3_4_2 = answer_section + answer_h2_service;
    const answer3_4_3 = answer_section + answer_h2_news + common_close_elements;
    const answer3_4_4 = answer_section + answer_title_mission;
    const answer3_4_5 = answer_section + answer_title_service;
    const answer3_4_6 = answer_section + answer_title_news + common_close_elements;
    const answer3_4_7 = answer_div + answer_h2_mission;
    const answer3_4_8 = answer_div + answer_h2_service;
    const answer3_4_9 = answer_div + answer_h2_news + common_close_elements;
    const answer3_5_1 = answer_div + answer_title_mission;
    const answer3_5_2 = answer_div + answer_title_service;
    const answer3_5_3 = answer_div + answer_title_news + common_close_elements;
    const questions = [
        {
            title: 'app/page.tsxのTopコンポーネントを要件に従って作成してください',
            tests: [
                {
                    title: 'Topコンポーネントを作成しよう',
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor([answer_fv, answer_none_fv], 'app/page.tsx');
                        isContainTextInEditor([answer3_3_1, answer3_3_2, answer3_3_3, answer3_3_4], 'app/page.tsx');
                        isContainTextInEditor([answer3_4_1, answer3_4_4, answer3_4_7, answer3_5_1], 'app/page.tsx');
                        isContainTextInEditor([answer3_4_2, answer3_4_5, answer3_4_8, answer3_5_2], 'app/page.tsx');
                        isContainTextInEditor([answer3_4_3, answer3_4_6, answer3_4_9, answer3_5_3], 'app/page.tsx');
                    }
                }
            ]
        },
        {
            title: 'app/page.module.cssに`title`クラスを定義してください',
            tests: [
                {
                    title: '文字について、大きさは`*24px*`、太さは`*bold*`、色は`*#1d5396*`にしよう',
                    hint: hint2_1,
                    test: () => {
                        isContainTextInEditor(answer2, 'app/page.module.css');
                        isContainTextInEditor(answer2_1_1, 'app/page.module.css');
                        isContainTextInEditor(answer2_1_2, 'app/page.module.css');
                        isContainTextInEditor(answer2_1_3, 'app/page.module.css');
                    }
                },
                {
                    title: '外側の余白を`*0 auto 16px*`にしよう',
                    hint: hint2_2,
                    test: () => {
                        isContainTextInEditor(answer2, 'app/page.module.css');
                        isContainTextInEditor(answer2_2, 'app/page.module.css');
                    }
                }
            ]
        },
        {
            title: 'app/page.tsxのTopコンポーネントにスタイルを適用してください',
            tests: [
                {
                    title: 'app/page.module.cssから`*styles*`としてスタイル定義をインポートしよう',
                    hint: hint3_1,
                    test: () => {
                        isContainTextInEditor(answer3_1, 'app/page.tsx');
                    }
                },
                {
                    title: '1つ目の`div`に`*fv*`クラスを指定しよう',
                    hint: hint3_2,
                    test: () => {
                        isContainTextInEditor(answer_fv, 'app/page.tsx');
                    }
                },
                {
                    title: '2つ目の`div`に`*container*`クラスを指定しよう',
                    hint: hint3_2,
                    test: () => {
                        isContainTextInEditor([answer3_3_1, answer3_3_2], 'app/page.tsx');
                    }
                },
                {
                    title: '2つ目の`div`の直下にある`h2`を子要素にもつ`div`に`*section*`クラスを指定しよう',
                    hint: hint3_3,
                    test: () => {
                        isContainTextInEditor([answer3_4_1, answer3_4_4], 'app/page.tsx');
                        isContainTextInEditor([answer3_4_2, answer3_4_5], 'app/page.tsx');
                        isContainTextInEditor([answer3_4_3, answer3_4_6], 'app/page.tsx');
                    }
                },
                {
                    title: '`h2`に`*title*`クラスを指定しよう',
                    hint: hint3_3,
                    test: () => {
                        isContainTextInEditor([answer3_5_1, answer3_4_4], 'app/page.tsx');
                        isContainTextInEditor([answer3_5_2, answer3_4_5], 'app/page.tsx');
                        isContainTextInEditor([answer3_5_3, answer3_4_6], 'app/page.tsx');
                    }
                }
            ]
        }
    ];


トップページを作ろう

Next.js

App Router

Next CLI

完成形を見てみよう

layout.js

レイアウトを作ろう

next/link

ヘッダーを表示しよう

ヘッダーのスタイルを整えよう

フッターを作ろう

配列操作/map

企業のミッションとサービス概要を表示しよう

企業のミッションとサービス概要にスタイルを適用しよう

企業のニュースを表示しよう

企業概要ページを作ろう

企業概要を表示しよう

企業のサービス紹介ページを作ろう

企業のサービスの詳細情報の表示しよう

企業ウェブサイトを作成を通して、Next.jsの概要、App Routerの概要、ページの生成方法、CSS Modulesの使い方、ルーティングの実装方法を学びます。

「App Routerを使って企業ウェブサイトを作ろう」レッスンの総復習クイズです。