Web制作コース

【中級編💼】レイアウトとレスポンシブ対応を学ぼう

プロフィールサイトを作ろう

### 指示書
- 全体
  - セクショニングタグを有効的に使用します。
  - コンテンツの横幅(wrapper)は1,080pxで、左右の余白は100px(SP時は20px)で固定します。
  - 横並びにするプロパティはdisplay:flexを使用し、要素の間隔にはgapプロパティを使用します。
- ヘッダー
  - 横並びにするプロパティを使用してください。
- Aboutセクション
  - 横並びにするプロパティを使用してください。
- Worksセクション
  - 画像はwrapperに沿って、３分割になるように調整してください。
- スマホレスポンシブ
  - ブレークポイントは768px以下からです。
メディアクエリを使用して、該当箇所が縦方向になるように調整してください。

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

  <header class="header u-wrapper">
      <h1 class="header__title">Taro's Scenery</h1>
      <nav>
        <ul class="header__nav">
          <li><a href="#about">ABOUT</a></li>
          <li><a href="works">WORKS</a></li>
        </ul>
      </nav>
    </header>

~~~

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

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

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

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

/*--------------------------------
header
---------------------------------*/
.header {
  display: flex;
  padding-top: 16px;
  padding-bottom: 16px;
  justify-content: space-between;
  align-items: center;

  @media screen and (max-width: 768px) {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.header__title {
  font-size: 40px;

  @media screen and (max-width: 768px) {
    font-size: 20px;
  }
}

.header__nav {
  display: flex;
  gap: 16px;
}
~~~
- ヘッダーを横並びに指定して左右等間隔に並べ、上下中央寄せに指定します。
- ヘッダーの上下左右内側の余白を指定します。レスポンシブ時スタイリングも併せて指定します。
- ヘッダータイトルのフォントサイズを指定します。レスポンシブ時スタイリングも併せて指定します。
- ヘッダーナビを横並びに指定し、要素の間隔（gap）を指定します。
- CSSもHTML同様にコメントアウトがあると分かりやすく表示できます。

### 共通部品のスタイリング
~~~css~style
html {
  font-family: Inter;
  color: #333;
}

.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）と左右の余白（margin）を指定します。
こちらは共通部品なので、**コード上部の共通部品の位置**に記述しましょう。


### 他セクションのマークアップとスタイリング
header同様に他セクションをマークアップとスタイリングを進めていきましょう。
- aboutセクション
- worksセクション
- footerセクション

4. コーディング