Web制作コース

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

ショップサイトを作ろう

Webサイト制作の初心者の方を想定した、実践型演習課題です。ショップサイトを構築するプロセスを学びます。

## 最初にやっていただきたいこと
[**「進める上での重要なポイント」**](https://www.notion.so/if-tech/05080e07b0b248aa9e7c86b8188ff27d)をまとめておりますので、ご確認願います。
模写コーディングレッスンに少しずつ慣れていきましょう。

## 依頼背景
あなたは、花屋のオーナーです。
この度、自分のお店を紹介するショップサイトを作成することにしました。
シンプルで必要な情報だけを掲載したサイトを作成しようとしています。


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

## こんな方におすすめ
* サイト制作にまだ慣れていない方
* CodeLessonでHTML・CSSの入門レベルを学習中・学習済みの方
* 制作フローを学びたい方
* 簡単におしゃれなサイトを作りたい方

## ポイントとなるスキル
- HTML<br>
<button data-type="skill" data-skill="d8680c35-dadb-46e4-94c4-437ff5bb7857" data-keyword="title"></button><button data-type="skill" data-skill="dc091af4-0d50-4478-a6ec-afd14e2ea349" data-keyword="title"></button>

- CSS<br>
<button data-type="skill" data-skill="19579eaa-6231-4962-9d1a-bb3ea6c3f077" data-keyword="title"></button><button data-type="skill" data-skill="00555acc-ab66-49cc-8d8e-4c05205b554c" data-keyword="title"></button><button data-type="skill" data-skill="7b8ff63e-65c0-403f-a1ca-b9d8f5f27e93" data-keyword="title"></button>
<button data-type="skill" data-skill="c0688dd6-8cfb-4776-8a24-6294a5afa765" data-keyword="title"></button><button data-type="skill" data-skill="dbd975aa-f6b1-457a-b064-340a36c5a0a3" data-keyword="title"></button><button data-type="skill" data-skill="61796f94-644f-4999-ad93-ce1e0a8c447f" data-keyword="title"></button><button data-type="skill" data-skill="b69ae36a-eee1-4192-9873-591b872c432e" data-keyword="title"></button>


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

はじめに

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

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

---

#### SP（スマートフォン）版
![スマートフォン版デザイン](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7ade829d-1432-42a5-9ee2-4debd3d5f73e.png)


完成物のデザイン確認

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


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

~~~

FlowerRoom/
├ index.html
├ css/
│  └ style.css
└ image/
　　├ spring_pc.png
　　├ spring_sp.png
　　├ favicon.ico
　　├ hd-wallpaper.png
　　└ summer.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.0" />
		
		<title>Flower Room</title>
		
		<meta name="description" content="フラワーショップのサイトです" />
		
		<meta name="format-detection" content="telephone=no" />
		
		<link rel="shortcut icon" href="img/favicon.ico" />
		
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
		/>
		
		<link rel="stylesheet" href="css/style.css" />
	</head>
    <body>
    ...
    </body>
</html>
~~~


#### CSSの雛形を作る
~~~css~style
@charset "utf-8";
/* 共通部品 */
html {
    font-family: Noto Sans JP;
    color: #333;
    line-height: 1.5;
    letter-spacing: 0.08em;
}
/* ここから記述します。 */
~~~

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

## 指示書
- 全体
  - セクショニングタグを有効的に使用します。
  - コンテンツの横幅`.wrapper`は`1080px`で、左右の余白は`40px`で固定します。
  - 横並びにするプロパティは`display:flex`を使用し、要素の間隔には`gap`プロパティを使用します。
- ヘッダー
  - ヘッダーナビゲーションは、横並びにするプロパティを使用してください。
- ファーストビュー
  - ファーストビューは、レスポンシブで画像を切り替えるようにしてください。
- pickupセクション
  - 横並びにするプロパティを使用してください。`flex-direction`プロパティを使用して二つ目のアイテムを左右対象に並べてください。
- shopセクション
  - 画面全体幅になるように調整してください。
- フッターセクション
  - `display:flex;`プロパティを使用し上下左右中央寄せしてください。
- スマホレスポンシブ
  - ブレークポイントは560px以下からです。
メディアクエリを使用して、該当箇所が縦方向になるように調整してください。


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

 <header class="header">
  <h1 class="header__title">Flower Room</h1>
  <nav>
   <ul class="header__nav">
    <li><a href="#pickup">PICK UP</a></li>
    <li><a href="#shop">SHOP</a></li>
   </ul>
  </nav>
 </header>

~~~

- ヘッダー部分には`header`タグを使用します。
- グローバルナビは`nav>ul>li>a`タグを使用します。
- `<!– header –>`はコメントアウトです。この部分が`header`部分であることがわかりやすく表示しています。必須ではありませんが、コードが見やすくなるので、積極的に使用しましょう。

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

/*--------------------------------
header
---------------------------------*/
.header {
    padding: 12px;
    display: flex;
    background-color: #83776A;
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.header__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.header__nav {
    display: flex;
    gap: 20px;
    font-weight: 500;
}
~~~
- ヘッダーの上下左右内側の余白を指定します。
- ヘッダーの左右中央寄せには`disply:flex;`プロパティを使用します。
- ヘッダーの背景色と文字色を指定します。
- ヘッダータイトルのフォントサイズと太さを指定します。
- ヘッダータイトルの下側の余白を指定します。
- ヘッダーナビを横並びに指定し、要素の間隔`gap`を指定します。
- ヘッダーナビの文字太さを指定します。
<br>

### 他セクションのマークアップとスタイリング
header同様に、他セクションのHTMLとCSSの実装を進めていきましょう。

- firstViewセクション
- pickupセクション
- shopセクション
- footerセクション

コーディング

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

**[完成見本サイト](https://if-tech-support.github.io/code-lesson-tutorial/beginner1/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 />
※再配布や販売する行為は禁止です。

6. 完成・まとめ