Web制作コース

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

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


ここでは完成物のデザインを確認します。
デザインを見ながら、**どのようにコーディングするかをイメージ**します。
下記のポイントを参考に[**完成見本サイト**](https://if-tech-support.github.io/code-lesson-tutorial/nyumon1/answer/index.html)を確認してみよう。

<br />

### ポイント
* 各セクションのグループ分け
  * ヘッダー、 各コンテンツ、フッターなど
* どこで画像を使用しているか
* コンテンツの最大幅は設定されているか
* レスポンシブデザインの横幅の余白はあるか
* 共通パーツはあるか
  * 見出し、コンテナなど
* 見出しはいくつ使われているか
  * h1-h2-h3...　など
  
### PC版
![PC版デザイン](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ba2e8f96-21cd-4de5-b7a7-14c406a19d97.png)

---

### SP（スマートフォン）版
![スマートフォン版デザイン](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/8318905f-88cc-4b52-8520-f290bd4db551.png)

完成物のデザイン確認

サンプルコードはここで紹介するコーディングルールに従っています。
**コーディングルールには正解はありません**。人それぞれな部分も多くありますが、まずはシンプルなルールをこちらで設定しています。


### フォルダ構造
  - 任意の場所に新しいフォルダを作成しフォルダ名を`TarosScenery`としてください。
  -   `TarosScenery`フォルダ内に`index.html`を作成してください。
 -   `TarosScenery`フォルダ内に`css`フォルダを作成し、その中に`style.css`を作成してください。
  -  `TarosScenery`フォルダ内に`image`フォルダを作成し、その中に画像データを配置してください。

~~~

TarosScenery/
├ index.html
├ css/
│  └ style.css
└ image/
　　├ about.png
　　├ favicon.ico
　　├ works1.png
　　├ works2.png
　　└ works3.png

~~~


### パスの記述方法
~~~html~index
<img src="image/***.png" alt="..." />
~~~
相対パスを使用します。
- 相対パスとは<br>
現在のディレクトリからの位置を基準に指定するパス。<br>
例: ../images/logo.png (親ディレクトリのimageフォルダ内のファイル)


### メディアクエリ

~~~css~style
.header__title {
  font-size: 40px;
}
@media screen and (max-width:768px) {
 .header__title{  
   font-size:24px
 }
}
~~~
メディアクエリはデスクトップファーストで記述します。また、セレクタ毎に並べて記述する事により、**見やすく保守性が高いコード**になります。


### スタイリング
スタイリングを指定する場合は、クラス名をつけるようにしてください。**スタイリングのために、idは使用しない**ことが推奨されております。


### HTMLの雛形を作る

~~~html~index
<!DOCTYPE html>
<html lang="ja">
  <head>
    
    <meta charset="utf-8" />
    
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    
    <title>Taro's Scenery</title>
    
    <meta name="description" content="フォトグラファーの山田太郎です" />
    
    <meta name="format-detection" content="telephone=no" />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
    />
    
    <link rel="stylesheet" href="style.css" />
  </head>
    <body>
    ...
    </body>
</html>
~~~


### CSSの雛形を作る
~~~css~style
/**
 * 共通部品
 *
 * @format
 */

html {
  font-family: Inter;
  color: #333;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

a:hover {
    opacity: 0.8;
}
/* ここから記述します。 */
~~~

コーディングルールの確認と準備

### 指示書
- 全体
  - セクショニングタグを有効的に使用します。
  - コンテンツの横幅(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セクション

コーディング

### ソースコードやデモサイトの確認
コーディング作業が完了後、ソースコードやデモサイトと比較して最終チェックをしてみましょう。

**[完成見本サイト](https://if-tech-support.github.io/code-lesson-tutorial/nyumon1/answer/index.html)**

### コーディングが綺麗にできているか確認する便利なツール

**HTMLチェッカー**

Chromeの拡張機能「HTMLチェッカー」をインストールすると、HTMLタグの閉じ忘れなど、コードの問題点を教えてくれます。


**[HTMLチェッカーの使い方はこちら](https://magazine.techacademy.jp/magazine/32089)**
<br>
※HTMLチェッカーは環境によりエラーが発生する事があります。
**HTML5バリデーター**で代用可能です。
**[HTML5バリデーターの使い方はこちら](https://rakko.tools/tools/58/#line30)**


最終チェック


学習お疲れ様でした。

ご自身の書いたコードと見本を比べていかがでしたか？

良いと思ったポイントは今後の模写コーディングの参考にしてみてください。
また、こちらのデザインをもとにコーディングしたサイトは、SNSやポートフォリオ、ブログへ掲載していただいてOKです。

進捗をX(旧Twitter)で、 #CodeLesson のハッシュタグ付きでツイートしていただければ、いいねやRTをさせていただきます。
また、掲載する際は本チュートリアルのリンクを貼るようにお願いいたします。

<br />
※再配布や販売する行為は禁止です。