Web制作コース

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

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


Webサイト制作がはじめての方を想定した、実践型演習課題です。
このレッスンでは、VS Codeと検証ツールを使用して開発を進めていきますのでVS Codeをインストールされていない方は事前にインストールをお願いします。
## 最初にやっていただきたいこと
[**「進める上での重要なポイント」**](https://www.notion.so/if-tech/05080e07b0b248aa9e7c86b8188ff27d)をまとめておりますので、ご確認願います。
答えを見ながらでも大丈夫なので、「なんでこのコードを書くとこうなるのか」を考えながらWebサイトを実装していきましょう。

## 依頼背景
あなたは、写真家です。
この度、自分のスキルをアピールするプロフィールサイトを作成することにしました。

シンプルで必要な情報だけを掲載したサイトを作成しようとしています。

## 単価目安
3,000〜5,000円

## こんな方におすすめ
* サイト制作経験がほとんどない方
* CodeLessonでHTML・CSSの入門レベルを学習中・学習済みの方
* 制作フローを学びたい方
* 自分に何が足りないか確かめたい

## 必要スキル
- HTML<br>
<button data-type="skill" data-skill="60160478-506f-4fa3-8f9e-2ec3540ca42a" data-keyword="title"></button><button data-type="skill" data-skill="a2d1d8da-f623-4c54-8d7b-6ea0f92610e7" data-keyword="title"></button><button data-type="skill" data-skill="50cf9278-92ce-4fe1-baa1-90fc4a7137b5" data-keyword="title"></button><button data-type="skill" data-skill="b583951d-4307-44f6-9838-53abc2e709c8" data-keyword="title"></button><button data-type="skill" data-skill="0b18ecfc-fb5a-4a10-bdab-eb62a32cd2ff" data-keyword="title"><button data-type="skill" data-skill="7aba20db-5e95-41ae-a74c-089889ab7f15" data-keyword="title"></button><button data-type="skill" data-skill="4d04b239-7b8c-4bad-a41d-bf44010e3bf0" data-keyword="title"></button><button data-type="skill" data-skill="db002c67-415d-49dd-ba42-559ad478e900" data-keyword="title"></button><button data-type="skill" data-skill="cb26af6f-d8e4-4e7c-9777-e109551fe306" data-keyword="title"></button><button data-type="skill" data-skill="890ee197-fdb3-467b-95af-42d2c002a256" data-keyword="title"></button><button data-type="skill" data-skill="3ab6253c-7420-4d2c-a476-5fbc8ea2f1db" data-keyword="title"></button><button data-type="skill" data-skill="53c9cc5c-6511-4168-a175-652aca1e61e9" data-keyword="title"></button><button data-type="skill" data-skill="42d1d79a-da32-4d9e-9689-2e198ba259bc" data-keyword="title"></button><button data-type="skill" data-skill="a9ec78ea-6355-4e80-a1e7-f786da2fde1a" data-keyword="title"></button><button data-type="skill" data-skill="8fbcdcd5-e823-48ac-aff2-55f364e07b4c" data-keyword="title"></button><button data-type="skill" data-skill="f5ecb017-f9bc-4314-8987-8bd77745042f" data-keyword="title"></button><button data-type="skill" data-skill="37e1d35b-ac2d-4385-a436-f30f91b2ede3" data-keyword="title"></button><button data-type="skill" data-skill="6b850045-147c-4507-bdec-c98d2db777bb" data-keyword="title"></button><button data-type="skill" data-skill="3b83300b-2830-4394-ae5d-4a19860f0531" data-keyword="title"></button><button data-type="skill" data-skill="90f1fa46-e497-4825-aee5-7c8a44f84c91" data-keyword="title"></button><button data-type="skill" data-skill="32b0d901-ed3f-4cd5-8989-44ee0882dc4e" data-keyword="title"></button><button data-type="skill" data-skill="ea71119d-a3d2-47b8-965b-ebbe92c08fec" data-keyword="title"></button>

<br>

- CSS<br>
<button data-type="skill" data-skill="9be1db2b-62b2-44c4-813c-3eba52b79b83" data-keyword="title"><button data-type="skill" data-skill="7b3f166b-71e4-433f-83eb-06f28c746741" data-keyword="title"><button data-type="skill" data-skill="13f6b3b1-2ec1-4d43-9149-672e48dde061" data-keyword="title"></button><button data-type="skill" data-skill="ba848ea2-941a-4e59-834c-66c7e523a4a7" data-keyword="title"></button><button data-type="skill" data-skill="9b880b19-f9d2-47f3-b28f-f4385c2c7543" data-keyword="title"></button><button data-type="skill" data-skill="a4707f41-ae65-4f9f-a415-49acf7366d8d" data-keyword="title"></button><button data-type="skill" data-skill="8f8716bc-fd5e-41ba-879c-0f1faa3910de" data-keyword="title"></button></button><button data-type="skill" data-skill="2af6e890-91da-47c6-a441-58af05dffed4" data-keyword="title"></button></button><button data-type="skill" data-skill="92348eee-2b41-44ee-aa20-bf0619000073" data-keyword="title"></button></button><button data-type="skill" data-skill="b8bcd5eb-3448-4390-b87a-12453ec35f7c" data-keyword="title"></button>
<button data-type="skill" data-skill="def403e1-01a9-4700-ab82-1182ba1f21b7" data-keyword="title"></button><button data-type="skill" data-skill="12006996-fb43-454c-bb68-207dbe762c38" data-keyword="title"></button><button data-type="skill" data-skill="9993e7ba-a793-44bd-b9f0-17e49705085f" data-keyword="title"></button><button data-type="skill" data-skill="15f8a8d9-bed3-493e-ac74-ab1d4359d37f" data-keyword="title"></button><button data-type="skill" data-skill="7f72c2ed-9979-458d-9604-f1493b850dc1" data-keyword="title"></button><button data-type="skill" data-skill="c9347c8b-2084-4e74-8e70-482d261129c8" data-keyword="title"></button><button data-type="skill" data-skill="4c1d62e3-13f7-4376-8015-2fa37b3ca014" data-keyword="title"></button><button data-type="skill" data-skill="5bbe4366-a3f5-41a4-85ac-bb03ec461371" data-keyword="title"></button><button data-type="skill" data-skill="0144b43a-a731-4595-ad5e-670fb5e10bef" data-keyword="title"></button><button data-type="skill" data-skill="c72d1ad2-8e18-4840-8e21-ac03a46e7cd0" data-keyword="title"></button>


## 各種ダウンロードファイル
**[ダウンロードはこちら](https://www.notion.so/if-tech/b8eea75554f0453fac0f5dba6d1f0946)**


はじめに


ここでは完成物のデザインを確認します。
デザインを見ながら、**どのようにコーディングするかをイメージ**します。
下記のポイントを参考に[**完成見本サイト**](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 />
※再配布や販売する行為は禁止です。

2. 完成物のデザイン確認