Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

スクールサイトを作ろう

### 指示書
- 全体
  - セクショニングタグを有効的に使用します。
  - コンテンツの横幅`.wrapper`は`1080px`で、左右の余白は`100px`で固定します。
  - 横並びにするプロパティは`display:flex;`を使用し、要素の間隔には`gap`プロパティを使用します。
- ヘッダー
  - 高さは`height`プロパティを使用せず、<strong>`padding`プロパティを使用して</strong>ください。
  - 横並びにするプロパティを使用してください。
- ファーストビュー
  - 画像はブラウザ幅いっぱいに広げてください。
- Courseセクション
  - 横並びにするプロパティを使用してください。
- Newsセクション
  - `dispray: flex;` `flex-direction: column;`を指定して縦並びにしてください。
  - 要素の間隔には`gap`プロパティを使用してください。
- Contactセクション
   - `dispray: flex;` `flex-direction: column;`を指定して縦並びにしてください。
  - 要素の間隔には`margin-bottom`プロパティを使用してください。
- フッター
  - 高さは`height`プロパティを使用せず、<strong>`padding`プロパティを使用して</strong>ください。
  - テキストを中央寄せにしてください。
- スマホレスポンシブ
  - ブレークポイントは`768px`以下からです。
メディアクエリを使用して、該当箇所が縦方向になるように調整してください。

### headerのマークアップ
~~~ html~index

    <header class="header">
      <div class="header__inner wrapper">
        <h1 class="header__title">Smile Cooking</h1>
        <nav class="header__nav">
          <ul class="header__navList">
            <li class="header__navItem"><a href="#course">Course</a></li>
            <li class="header__navItem"><a href="#news">News</a></li>
            <li class="header__navItem"><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

~~~

- ヘッダー部分には`header`タグを使用します。

- ヘッダーの最大幅と左右中央寄せ、左右の余白は、他のセクションと共通化できそうなので、共通部品として`.wrapper`クラスを追加しています。

- `<!– header –>`はコメントアウトです。この部分が`header`部分であることがわかりやすく表示しています。必須ではありませんが、コードが見やすくなるので、積極的に使用しましょう。

### headerのスタイリング
~~~ css~style
/* 個別部品 */

/*--------------------------------
header
---------------------------------*/
.header {
  display: flex;
  justify-content: space-between;
  background: #188888;
  color: #ffffff;
  width: 100%;
  padding: 38px 0;
  @media screen and (max-width: 768px) {
		padding: 16px;
	}
}
.header__title {
  font-size: 24px;
  font-weight: bold;
  @media screen and (max-width: 768px) {
		margin-bottom: 10px;
	}
}
.header__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media screen and (max-width: 768px) {
		flex-direction: column;
	}
}

.header__navList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

.header__navItem a {
  color: #ffffff;
}

.header__navItem a:hover {
  text-decoration: underline;
}

~~~
- ヘッダーをフレックスボックスで配置し、要素を左右に配置します。
- ヘッダーの背景色と文字色を指定します。
- ヘッダーの幅を`100%`に設定します。
- ヘッダーの上下の内側余白を指定します。レスポンシブ時のスタイルも記述します。
- ヘッダータイトルのフォントサイズと太さを指定します。レスポンシブ時のスタイルも記述します。
- ヘッダー内の要素をフレックスボックスで配置し、要素を左右に配置します。レスポンシブ時のスタイルも記述します。
- ナビゲーションリストのリストスタイルを無効にし、内側と外側の余白を0に設定します。
- ナビゲーションリストをフレックスボックスで配置し、要素間の間隔を`gap`で設定します。
- ナビゲーションアイテム内のリンクの文字色を指定します。
- ナビゲーションアイテム内のリンクにホバー時の装飾を追加します。

- CSSもHTML同様にコメントアウトがあると分かりやすく表示できます。

### 共通部品のスタイリング
~~~ css~style
html {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.u-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 100px;
  @media screen and (max-width: 768px) {
		padding: 0 20px;
	}
}
~~~
- 全てのタグに適用したいスタイルは`html`要素に直接スタイリングを記述しましょう
- 先ほどHTMLマークアップした共通部品の`.u-wrapper`に最大幅（`max-width`）と左右の余白を指定します。
こちらは共通部品なので、**コード上部の共通部品の位置**に記述しましょう。


### 他セクションのマークアップとスタイリング
`header`同様に他セクションをマークアップとスタイリングを進めていきましょう。
- ファーストビューセクション
- Courseセクション
- Newsセクション
- Contactセクション
- フッターセクション