【HTML/CSS】スターバックスのHPを模写する

# 1. はじめに
HTML/CSSを勉強して1ヶ月も経っていない人間による備忘録です。
間違い、冗長なコードがあります。
頑張ってんな～。くらいの気持ちで見ていただけると幸いです。

## 1-1. 模写実装までにやったこと
Progate：HTML/CSS：一周
Udemy：ちゃんと学ぶ、HTML/CSS + JavaScript：セクション3まで
HTML&CSSとWebデザインが1冊できちんと身につく本：流し読み
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ：流し読み
HTML5＆CSS3デザイン現場の新標準ガイド[第2版] ：適宜確認

## 1-2. この記事のやりたいこと
タイトルの通り、スターバックスのHPを模写していく。

最初からサイトを制作していくのではなく、
部分模写からはじめて、最後に全部の部品をつなぎ合わせていく。

![screencapture-starbucks-co-jp-2022-06-15-22_09_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/b1ba3714-1548-8622-2e28-3cd12a966d49.png)

https://www.starbucks.co.jp/


## 1-3. なんでスターバックスのHPなのか
* フルスクリーンのサイトを制作したかった
* テキストの回り込みで「Float」が使えると思った
* ヘッダーが固定されており、「position」が使えると思った
* 横並びで「フレックスボックス」が使えると思った
* 記事一覧で「グリッドレイアウト」が使えると思った

つまるところ、学べる要素がたくさん詰まっているなと感じたためです。

はじめての模写ということで、
どういうサイトを制作したいか。というよりも
**どんな技術を使いたいか**に焦点を当てて取り組みました。


## 1-4. 完成図

![サイト‗完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/6c2e8233-1ba5-afbd-97ab-4df4fc44c1b8.png)

## 1-5. 得た知識
当初の目的以外にも多くのことを学べたのでまとめておく。
* [ブロック要素の上下左右の中央寄せ](#2-1-ヘッダーを制作)
* [border-radiusで正円を作る](#2-1-ヘッダーを制作)
* [リストの「・」を消す方法](#2-1-ヘッダーを制作)
* [最後の要素だけにスタイルを適用](#2-1-ヘッダーを制作)
* [ヘッダーを固定する方法](#2-1-ヘッダーを制作)
* [絶対配置する際の親要素は「position:fixed;」でも可能](#2-1-ヘッダーを制作)
* [リンクの下線をなくす](#2-4-お知らせ一覧を制作)
* [行間を指定](#2-4-お知らせ一覧を制作)
* [自動的に中身の要素の高さに合わせる](#2-4-お知らせ一覧を制作)
* [親のボックスを基点に子要素を配置する](#2-4-お知らせ一覧を制作)
* [ボックスの角を丸くする](#2-4-お知らせ一覧を制作)
* [水平方向に中央揃えにする3つの方法。](#2-5-記事一覧を制作)
* [フレックスボックスとグリッドレイアウトの使い分け](#2-5-記事一覧を制作)
* [暗黙のトラック](#2-5-記事一覧を制作)
* [スクロールバー](#2-5-記事一覧を制作)
* [floatとflexboxの使い分け](#2-5-記事一覧を制作)
* [calc()関数](#2-5-記事一覧を制作)
* [ブロックレベルのリンクを制作する](#2-5-記事一覧を制作)
* [最後の要素だけにスタイルを適用](#2-7-フッターを制作)


## 1-6. 開発環境
ブラウザ：GoogleChrome（100.0.4896.88）
VScode：1.68.1
スクリーン解像度：1920×1080

## 1-7. この記事の注意事項
* わかりやすいようにbackground-colorやborderなどを指定していますが、目的以外のコードは割愛しています。
* 前回からコードの変更がないことろも割愛しています。

# 2. 実装
<!-- -------------------2-1------------------- -->
## 2-1. ヘッダーを制作
### 2-1-1. やりたいこと

![ヘッダー_完成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/acb04ea5-e2a7-a62d-6c10-04dca226958b.png)

### 2-1-2. 得た知識
* ブロック要素の上下左右の中央寄せ
* border-radiusで正円を作る
* リストの「・」を消す方法
* 最後の要素だけにスタイルを適用
* ヘッダーを固定する方法
* 絶対配置する際の親要素は「position:fixed;」でも可能

### 2-1-3. 参考文献
詳細は別の記事に書いてます

https://qiita.com/Rice_Cooker/items/363d3a4c4bda929e9109

<!-- -------------------2-2------------------- -->
## 2-2. メインコンテンツの領域を制作
### 2-2-1. やりたいこと
![サイト_メイン領域.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/41f67c1a-1e33-e8b1-cdb8-3dad8ac2f6a5.png)


### 2-2-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <main class="main-wrapper-position">
    <div class="main-wrapper main-container">
      <!-- メインビューレフトここから -->
      <div class="main-left">
      </div>
      <!-- メインビューライトここから -->
      <div class="main-right">
      </div>  
      <!-- メインビューナビここから -->
      <div class="main-navi">
      </div>
    </div>
  </main>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .main-wrapper-position {
  display: flex;
  justify-content: flex-end;
}
.main-container {
  display: flex;
}

.main-wrapper {
  height: 100vh;
  width: calc(100% - 120px);
}

.main-left {
  width: 55%;
}

.main-right {
  width: 45%;
}

.main-navi {
  width: 130px;
}
```
</details>

### 2-2-3. ポイント
:thinking:左側にヘッダー分(120px)の領域を空けて要素を並べたいんやが
:bulb:calc関数で横幅算出させたのち、右揃えしよ

:::note
**右揃え**
  display: flex;
  justify-content: flex-end;
:::

### 2-2-4. 参考文献
[1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座](https://www.amazon.co.jp/1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML-%EF%BC%86-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-Mana-ebook/dp/B07PS1ZJN6)

<!-- -------------------2-3------------------- -->
## 2-3. メインコンテンツの左側を制作
### 2-3-1. やりたいこと
![サイト_メインレフト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/1e90e5e6-eaa9-3c5f-712e-37e70274bec6.png)


### 2-3-2. コード
<details><summary>HTML</summary>

```markdown:HTML
　　　<!-- メインビューレフトここから -->
      <div class="main-left">
        <div class="main-upper-left">
          <a class="new-item" href="#">
            <img class="new-item-img" src="./imgs/no_image_yoko.jpg">
          </a>
        </div>
        <div class="main-lower-left main-container">
          <a class="safety" href="#">
            <img class="safety-img" src="./imgs/no_image_yoko.jpg">
          </a>
          <a class="stories" href="#">
            <img class="stories-img" src="./imgs/no_image_tate.jpg">          
          </a>
        </div>
      </div>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
.main-left {
  width: 55%;
}

.main-upper-left {
  height: 60%;
  padding-bottom: 7px;
}

.main-lower-left {
  height: 40%;
}

.new-item {
  display: block;
  height: 100%;
  width: 100%;
}

.new-item-img {
  height: 100%;
  width: 100%;
}

.safety {
  width: 60%;
}

.safety-img {
  height: 100%;
  width: 100%;
  padding-right: 7px;
}

.stories {
  width: 40%;
}

.stories-img {
  height: 100%;
  width: 100%;
}
```
</details>

<!-- -------------------2-4------------------- -->
## 2-4. お知らせ一覧を制作
### 2-4-1. やりたいこと
![サイト_リンク一覧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/49302e76-1e2d-1f83-8140-143f1e7ee0d4.png)

### 2-4-2. 得た知識
* リンクの下線をなくす
* 行間を指定
* 自動的に中身の要素の高さに合わせる
* 親のボックスを基点に子要素を配置する
* ボックスの角を丸くする

### 2-4-3. 参考文献

https://qiita.com/Rice_Cooker/items/81293a61c0376985584b


<!-- -------------------2-5------------------- -->
## 2-5. 記事一覧を制作
### 2-5-1. やりたいこと
![サイト_記事一覧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/1a37b47c-10bf-ce0f-c33d-14f06470ad29.png)

### 2-5-2. 得た知識
* 水平方向に中央揃えにする3つの方法。
* フレックスボックスとグリッドレイアウトの使い分け
* 暗黙のトラック
* スクロールバー
* floatとflexboxの使い分け
* calc()関数
* ブロックレベルのリンクを制作する

### 2-5-3. 参考文献

https://qiita.com/Rice_Cooker/items/1c7870f5d0e4838d35a0


<!-- -------------------2-6------------------- -->
## 2-6. メインのナビを制作
### 2-6-1. やりたいこと

[2-1. ヘッダーの制作](#2-1-ヘッダーの制作)と同じ要領でナビを作成していく
（ロゴと最後の要素を消して、リストで並べる）

![サイト_メインナビ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/936997fe-d0de-3e94-f4b5-5f95ef80979d.png)

### 2-6-2. 参考文献
* [2-1. ヘッダーの制作](#2-1-ヘッダーの制作)

<!-- -------------------2-7------------------- -->
## 2-7. フッターを制作
### 2-7-1. やりたいこと

![サイト‗完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/6c2e8233-1ba5-afbd-97ab-4df4fc44c1b8.png)


### 2-7-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <!-- footerここから -->
  <footer class="footer-wrapper-position">
    <div class="footer-wrapper">
      <div class="footer-item">
        <ul class="footer-nav-list footer-container">
          <a class="footer-nav-link" href="#">
            <li>公式ブログ</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>Twitter</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>Facebook</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>Instagram</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>Pinterest</li>
          </a>
        </ul>
      </div>
      <div class="footer-item">
        <ul class="footer-nav-list footer-container">
          <a class="footer-nav-link" href="#">
            <li>会員登録</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>よくあるご質問・お問い合わせ</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>使用条件</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>ポリシー・約款・規約一覧</li>
          </a>
          <a class="footer-nav-link" href="#">
            <li>サイトマップ</li>
          </a>
        </ul>
      </div>
      <div class="footer-item">
        <ul class="footer-nav-list footer-container">
          <a class="footer-nav-link" href="#">
            <li>アレルゲン・栄養成分・原料原産地情報</li>
          </a>
        </ul>
      </div>
      <div class="footer-copy-write">
        <p><samp>©2022</samp></p>
      </div>
    </div>
  </footer>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .footer-wrapper-position {
  display: flex;
  justify-content: flex-end;
}

.footer-wrapper {
  height: auto;
  width: calc(100% - 120px);
  padding: 20px 0 20px 30px;
}

.footer-container {
  display: flex;
  flex-direction: row;
}

.footer-nav-list {
  list-style: none;
}

.footer-nav-link {
  color: black;
  font-size: 5px;
  text-decoration: none;
  border-left: 1px solid black;
  margin-bottom: 10px;
  padding: 0 10px;
}

.footer-nav-link:first-child {
  border-left: none;
  padding-left: 0;
}

.footer-copy-write {
  font-size: 5px;
}
```
</details>

### 2-7-3. ポイント

:::note
**最初の要素だけにスタイルを適用**
:first-child
:::

### 2-7-4. 参考文献
[【CSS】最初の要素、最後の要素だけにスタイルを適用したい！](https://site-manage.net/archives/2912#last-child)

# 3. まとめ
スターバックスのHPを模写してきた。

最初からサイトを作成していくのではなく、
部分模写からはじめて、最後に全部の部品をつなぎ合わせた。


最初なんで細かいところは気にせずに、
**どんな技術を使いたいか**に焦点を当てて取り組んできた。



## 3-1. 未着手
* 外部メディアを利用する
* レスポンシブ化
* リンクに触れたときに色を変える
* 記事一覧に触れたときに矢印を浮かび上がらせる
* 記事一覧に時刻を表示させる
* 上に戻るボタンの作成

## 3-2. なんでスターバックスのHPなのか
* フルスクリーンのサイトを制作したかった
* テキストの回り込みで「Float」が使えると思った
* ヘッダーが固定されており、「position」が使えると思った
* 横並びで「フレックスボックス」が使えると思った
* 記事一覧で「グリッドレイアウト」が使えると思った

## 3-3. 得た知識
* [ブロック要素の上下左右の中央寄せ](#2-1-ヘッダーを制作)
* [border-radiusで正円を作る](#2-1-ヘッダーを制作)
* [リストの「・」を消す方法](#2-1-ヘッダーを制作)
* [最後の要素だけにスタイルを適用](#2-1-ヘッダーを制作)
* [ヘッダーを固定する方法](#2-1-ヘッダーを制作)
* [絶対配置する際の親要素は「position:fixed;」でも可能](#2-1-ヘッダーを制作)
* [リンクの下線をなくす](#2-4-お知らせ一覧を制作)
* [行間を指定](#2-4-お知らせ一覧を制作)
* [自動的に中身の要素の高さに合わせる](#2-4-お知らせ一覧を制作)
* [親のボックスを基点に子要素を配置する](#2-4-お知らせ一覧を制作)
* [ボックスの角を丸くする](#2-4-お知らせ一覧を制作)
* [水平方向に中央揃えにする3つの方法。](#2-5-記事一覧を制作)
* [フレックスボックスとグリッドレイアウトの使い分け](#2-5-記事一覧を制作)
* [暗黙のトラック](#2-5-記事一覧を制作)
* [スクロールバー](#2-5-記事一覧を制作)
* [floatとflexboxの使い分け](#2-5-記事一覧を制作)
* [calc()関数](#2-5-記事一覧を制作)
* [ブロックレベルのリンクを制作する](#2-5-記事一覧を制作)
* [最後の要素だけにスタイルを適用](#2-7-フッターを制作)