Codestepで学ぶHTML、CSSの模写コーディングの（入門編メモ)

リファレンスサイト
・作って学ぶコーディング学習サイト 

https://code-step.com/html-practice/

- [中級編:前半](https://qiita.com/kennsukea/items/5b166035a70a2c994c15
)
- [上級編](https://qiita.com/kennsukea/items/0ce4995a9c58bd473eb5
)
- [番外編](https://qiita.com/kennsukea/private/95e78d96a2afa3a83959)
- [javascript編](https://qiita.com/kennsukea/items/33f436eb96e5bcea7f82)
- [勝手にリファクタリングJS 1](https://qiita.com/kennsukea/private/5a548808f283593e8e10)

# &#x2b50;プロフィールサイト

https://code-step.com/profile-menu/

:::note info
sectionタグについて
--------------------
<font color="red">section</font>は一般的なセクションを定義するタグ、 
要素内容を記事として配信する意味合いが強い場合は、
<font color="red">article</font>を使用することが推奨されています。 
また、 補足情報の場合には<font color="red">aside</font>、 
ナビゲーションの場合には<font color="red">nav</font>を使用します。
ヘッダに該当する場合には<font color="red">header</font>
フッタの場合には<font color="red">footer</font>,などのタグを使用するほうが、
ウェブページの文書構造がより明確になるでしょう。
:::

完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/d3e70e22-874d-9e99-fcc8-0d503f9e6463.png)


全体のレイアウト

- header
  - ナビバー 
- main
  - メインビジュアル
  - aboutセクション
  - bicycleセクション 
- footer
  - コピーライト表記 

```css:全体のCSS
    {{-- 全体のスタイル --}}
    <style>
        html {
            font-size: 100%;
        }

        body {
            color: #383e45;
            font-size: 0.9rem;
        }

        a {
            text-decoration: none;
        }
       img {
            max-width: 100%;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        .wrapper {
            max-width: 960px;
/* 左右中央揃え */
            margin: 0 auto 100px auto;
            padding: 0 4%;
            text-align: center;
        }
    </style>
```
css適用前と後の画像　適用後、画面外へのはみ出しがなくなり、中央揃えになった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/2eb6a8ad-a1bd-66ba-aea1-8271612501cc.png)

:::note alert
<font color="red">img要素にmax-width:100%;を適用する理由</font>
・img要素の親要素でサイズを指定しても画像ははみだしてしまう
・例えば下の画像のように親要素にwidth:120px;があっても無視される。
・インライン要素からブロック要素に変更しても はみ出す。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/4313f491-f325-6536-44b4-77b7dd638e88.png)

header(ナビ)
--
イメージ図(完成図)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/697b1a6b-a88e-1ad5-538a-40a80612f451.png)
現状:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/a29c5302-c540-5a20-ccd9-4c69134ee71d.png)


```html:ロゴの横幅を縮小
css
    <style>
        .site-title {
           /*imgの親要素にwidth:120px; img要素にmax-width:100%;*/
            width: 120px;
            line-height: 1px;/*後ろの方で動作確認あり*/
            padding: 10px 0;
        }
    </style>
html
    <header id="header" class="wrapper">
        <h1 class="site-title"><a href="index.html"><img src="{{ asset('storage\profile\logo.svg') }}" alt="Profile"></a></h1>
        <nav>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#bicycle">Bicycle</a></li>
          </ul>
        </nav>
      </header>
```

:::note alert
インライン要素のaタグが親要素から下にずれているのを修正する。
:::
aタグが親要素のh1タグとずれている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b786e042-35e1-dfd8-949d-4e40e380b47f.png)

```html:ロゴのaタグの修正
    <style>
        .site-title {
            width: 120px;
/*line-height にh1タグの高さよりも小さい値「1px」を指定することで、*/
/*h1タグ(h1に限らずdiv等)の上下の余白が消えるため、ロゴ画像の高さと揃う*/
/*「line-height: 0;」を指定してもOKです*/
            line-height: 1px;
            padding: 10px 0;
        }
/* + インライン要素からブロック要素に変更するとこでwidthとheightが効く,marginやpaddingが可能になる*/
        .site-title a {
            display: block;
        }
    </style>

    <header id="header" class="wrapper">
        <h1 class="site-title"><a href="index.html"><img src="{{ asset('storage\profile\logo.svg') }}" alt="Profile"></a></h1>
        <nav>
        </nav>
      </header>
```

収まった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/c7c73872-37ea-df1f-2035-6753fbd51cb2.png)

header要素を横並びに変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b816a560-889c-87cb-dcbf-67ea87702054.png)

1. ロゴとnavを横並び
1. navのulリストを横並び

```html:ロゴとnavを横並び
<style>
/* + */
        #header {
/*横並び*/
            display: flex;
/*軸と平行方向の配置*/
            justify-content: space-between;
/*軸と交差方向の配置*/
            align-items: center;
        }
</style>
    <header class="wrapper">
        <h1 class="site-title">
            <a href="#"><img src="https://code-step.com/demo/html/profile/img/logo.svg" alt="Profile">
            </a>
        </h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#bicycle">Bicycle</a></li>
            </ul>
        </nav>
    </header>
```
ロゴとnavを横並び
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/e0c33619-e91f-9a38-2b6f-99729e772f48.png)
インライン要素であるaタグとliタグがずれているのを修正する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/264af46b-570e-f4c1-284d-41c5232427b4.png)

```css:・aタグとliタグがずれているのを修正・navのlinkの文字色とホバー時のスタイルも変更
 /* + */
        #header li a {
            display: block;
            color: #24292e;
        }
        #header li a:hover {
            opacity: 0.7;
        }
```
きれいにおさまった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/5426549a-66f3-d129-41ca-b5cd479087aa.png)
ulリストも横並びにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/27c389e0-1e7c-4e82-5dea-5d875b51b769.png)

:::note info
ul要素を<font color="red">横並び</font>のリストに変更する
li要素の<font color="red">2番めにmargin-leftを設定</font>する
:::

```css:headerのcssを追加
 /* + */
        header ul {
            display: flex;
        }
 /* + */
        header li:nth-child(n+2) {
            margin-left: 30px;
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/aa9a5509-7a16-8100-77ac-d70f3000abbd.png)
- `nth-child`と`nth-type-of`のざっくりとした使い分け
  - 兄弟要素が全て同じタグ
    - 全て`li`タグ なら `nth-child`
  - 兄弟要素に異なるタグがある
    - `dt`と`dd` なら `nth-type-of`

`#header.warapper`にかかるマージンボトムを上書きにして０にする。

```css:#headerのマージンボトムを０に変更
        #header.wrapper {
            margin-bottom: 0;
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/7f83642d-6679-e1a2-005b-a7ae9c6dd421.png)


次、メインビジュアルの作成
---
```html:
{{-- mainvisualのスタイル --}}
        <style>
            #mainvisual {
                margin-bottom: 60px;
            }
/* + すでにimg要素にはmax-width:100%;*/
            #mainvisual img {
                max-width: 1920px;
/* +max-widthを修正したため、width:100%;がいる.基本画像には貼っとけ。親要素の幅になる*/
                width: 100%;
                height: 600px;
/* 画像の縦横比を維持して指定した幅、高さで表示してくれる。w,h,oは画像の３点セット */
                object-fit: cover;
            }
        </style>

        <div id="mainvisual">
            <img src="{{ asset('storage\profile\mainvisual.jpg') }}" alt="テキストテキストテキスト">
        </div>
```

メモ：画像のトリミング

```css:
            #mainvisual img {
                max-width: 1920px;
                height: 600px;
  /* 画像の縦横比はそのまま。維持したい場合はcover */
                object-fit: none;
 /* 画像の位置を調整。iosでは機能しないみたい・・ */
                object-position: 80% 40%;
                width: 100%;
            }
```
画像の位置が変更された
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/4422442b-0216-57ef-1cc7-adc995bd25a4.png)

セクションの全体のスタイル
---
セクションタイトル css適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/7f053977-670e-e69e-287a-abf01c0610c0.png)
コンテンツタイトル

```html:
        {{-- section共通スタイル --}}
        <style>
            .section-title {
                margin-bottom: 60px;
                border-bottom: 1px solid #000;
/*ボーダーの幅を文字幅にするための、d-inline-block*/
                display: inline-block;
                font-size: 2rem;
                font-weight: bold;
            }
            .content-title {
                font-size: 1.25rem;
                padding: 30px 0 30px 0;
                font-weight: bold;
                text-align: center;

            }
        </style>

            <h2 class="section-title">About</h2>
            <h3 class="content-title">KAKERU MIYAICHI</h3>
```
セクションタイトル css適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/3068ea75-bf49-bd23-b46f-7de8b2ad0af7.png)

セクションaboutの作成
---
css適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/18b1df40-fb44-01db-20a7-fe6fec210611.png)

:::note info
・画像要素を縮小
・テキストの書字方向を左書きにする。
:::

```html:
        {{-- aboutセクションのスタイル --}}
        <style>
            #about img {
                width: 300px;
                height: 300px;
                border-radius: 50%;
            }
            #about .text {
                text-align: left;
            }
        </style>

        <section id="about" class="wrapper">
            <h2 class="section-title">About</h2>
            <div class="content">
                <img src="{{ asset('storage\profile\about.jpg') }}" alt="テキストテキストテキスト">
                <div class="text">
                    <h3 class="content-title">KAKERU MIYAICHI</h3>
                    <p>
                        テキストテキストテキストテキストテキストテキストテキスト<br>
                        テキストテキストテキストテキストテキストテキストテキスト<br>
                        テキストテキストテキストテキストテキストテキストテキスト
                    </p>
                </div>
            </div>
        </section>
```
css適用後 コンテンツタイトルとテキストが左によりすぎているのを修正する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/c685afcd-1a72-fd03-ac7f-ed120b16a919.png)

```html:
        {{-- section共通スタイル --}}
        <style>
        .content-title {
            font-size: 1.5rem;
            font-weight: bold;
            padding: 10px 0 10px 0;
/* + */
            text-align: center;
        }
        </style>
        {{-- aboutセクションのスタイル --}}
        <style>

            #about img {
                width: 300px;
                height: 300px;
                border-radius: 50%;
/* +2 */
/* block要素にして幅が拡張されて改行されるわけではない */
/* 幅は300pxと指定した分だけ、block要素にすることで改行される */
/*+1で .textをinline-blockに変更したため、横並びになったのでblock要素にすることで改行させている。*/
                display: block;
                margin: 0 auto 30px auto;
            }
            #about .text {
                text-align: left;
/* +1 インライン要素にすることで幅がコンテンツの幅になる*/
/*wrapperのtext-centerが効いて中央揃えになる*/
                display: inline-block;
            }
        </style>
```
+1後の画像 横並びになったので+2で修正した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/153c1416-5132-1652-6460-8c95c96e00c7.png)
+2後の画像 imgをblock要素にしたことで改行されたが、.wrapperのtext-centerが効かなくなったが、
幅は300pxしかないのでmx-autoで中央揃えにした。(block要素+幅指定+余白=mx-autoが可能)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/bd3d834d-44c6-3ea9-c010-fc66610d9b8c.png)

セクションbisycleの作成
---
css適用前の画像 .wrapperのtext-centerで画像は中央揃えになっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/f370e7d3-658f-ee58-db57-d9793debd2a5.png)

:::note info
テキストのいちが下の画像にくっついているため、誤解されてしまうのを修正
:::

```html:
        {{-- bicycleセクション --}}
        <style>
            #bicycle p {
                margin-bottom: 50px;
            }
        </style>

        <section id="bicycle" class="wrapper">
            <h2 class="section-title">Bicycle</h2>
            <ul>
                <li>
                    <img src="{{ asset('storage\profile\bicycle1.jpg') }}" alt="テキストテキストテキスト">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
                <li>
                    <img src="{{ asset('storage\profile\bicycle2.jpg') }}" alt="テキストテキストテキスト">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
                <li>
                    <img src="{{ asset('storage\profile\bicycle3.jpg') }}" alt="テキストテキストテキスト">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
            </ul>
        </section>
```
css適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/6d945f39-c2ab-5bf5-d83c-49bdd757703c.png)

footerを作成する
---
css適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/7c7516f6-7edd-5049-c100-888d46c6aec1.png)

:::note info
・フォントサイズを縮小
・中央に配置
:::

```html:
    {{-- footerスタイル --}}
    <style>
        #footer {
            text-align: center;
            padding: 10px 0 10px 0;
            font-size: 0.625rem;
        }
    </style>
    <footer id="footer">
        <p>&copy; 2020 Profile</p>
    </footer>
```
css適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/64382203-0831-94bd-9e62-1ba6aaba5eae.png)


レスポンシブデザインに変更する
aboutセクションを横並びに変更する
画像は　css適用前と適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/1ab70203-d3bb-1265-eec7-63fa02f832b3.png)

```html:
        <style>
            #about img {
                width: 300px;
                height: 300px;
                border-radius: 50%;
                display: block;
                margin: 0 auto 30px auto;
            }
            #about .text {
                display: inline-block;
                text-align: left;
            }
/* + */
            @media screen and (min-width: 600px) {
                #about .content {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                #about img {
                    width: 150px;
                    height: 150px;
                    margin: 0 30px 0 0;
                }
            }
        </style>

        <section id="about" class="wrapper">
            <h2 class="section-title">About</h2>
            <div class="content">
                <img src="{{ asset('storage\profile\about.jpg') }}" alt="テキストテキストテキスト">
                <div class="text">
                    <h3 class="content-title">KAKERU MIYAICHI</h3>
                    <p>
                        テキストテキストテキストテキストテキストテキストテキスト<br>
                        テキストテキストテキストテキストテキストテキストテキスト<br>
                        テキストテキストテキ
                    </p>
                </div>
            </div>
        </section>
```
bicycleセクションのul画像リストを横並びにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/964605c0-4f63-a572-d466-d212c6e51431.png)

```html:
        <style>
            #bicycle p {
                margin-bottom: 50px;
            }
 /* + */
            @media screen and (min-width: 600px) {
                #bicycle ul {
                    display: flex;
                    justify-content: space-between;
                }

                #bicycle li {
                    width: calc(100%/3 - 30px);
                }
            }
        </style>
        <section id="bicycle" class="wrapper">
            <h2 class="section-title">Bicycle</h2>
            <ul>
                <li>
                    <img src="{{ asset('storage\profile\bicycle2.jpg') }}" alt="テキストテキストテキスト">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
                  {{-- 省略 --}}
            </ul>
        </section>
```
メモ：

```html:
<-- bootstrapのカードみたい-->
    <li>
        <img src="{{ asset('storage\profile\bicycle1.jpg') }}" alt="テキストテキストテキスト">
        <h3 class="content-title">タイトルタイトル</h3>
        <p>テキストテキストテキスト</p>
    </li>
```

# &#x2b50;PHOTO BOOK

https://code-step.com/photo-menu/

完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/97231e50-c3e0-7b2d-cb71-7c20adc0cd02.png)

```css:リセットCSSのCDN:
  <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
```
全体のレイアウト

- header
  - logo
- メインビジュアル
- メイン
  - INDEXセクション
  - DETAILセクション
- footer    

```html:全体のCSS
    {{-- 全体のCSS --}}
    <style>
            html {
                font-size: 100%;
            }
            body {
                background-color: #f4f9ff;
                color: #333;
                font-size: 0.875rem;
            }
            img {
                max-width: 100%;
            }
 /* サイト全体のコンテンツ幅を設定 */
            .wrapper {
                max-width: 1000px;
                margin: 0 auto;
            }
/* 中のコンテンツ部分の最大幅を設定 */
            .inner {
                max-width: 600px;
                margin: 0 auto;
                padding: 0 40px;
            }
    </style>
```
css適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/bffd72ea-4984-3d40-1df9-b5e11471f39f.png)
headerを作成する

- ロゴの横幅を設定する
 - hタグの上下の余白を消去
 - aタグの高さ幅を揃える。  
- 上下に余白を設定する

```html:ヘッダーのスタイル
{{-- headerのCSS --}}
        <style>
            #header {
                padding: 0 10px;
                margin-top: 60px;
                margin-bottom: 15px;
            }
/*h1タグ
line-height にh1タグの高さよりも小さい値「1px」を指定することで、
h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
「line-height: 0;」を指定してもOKです*/
            #header .site-title {
                width: 160px;
                line-height: 1px;
            }
/* aタグのリンク範囲を親要素のサイズに広げる */
            #header .site-title a {
                display: block;
            }
        </style>
        <header id="header">
            <h1 class="site-title">
                <a href="index.html"><img src="{{ asset('storage\PHOTO BOOK\logo.svg') }}" alt="PHOTO BOOK"></a>
            </h1>
        </header>
```

h1の上下に余白がある（リセットCSSによってはなくなる)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/18560436-5d54-7678-1513-52b76968da61.png)

```css:
            #header .site-title {
                width: 160px;
/*+*/
                line-height: 1px;
                margin-bottom: 15px;
            }
```
余計な余白がなくなった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/eece1a23-f304-cd22-1e1f-dd9f0215c1c9.png)

セクション全体のスタイルを作成する

```html:
{{-- section全体のCSS --}}
        <style>
            .section-title {
                font-size: 1.125rem;
                font-weight: bold;
                margin-bottom: 10px;
            }
        </style>

   <h2 class="section-title">INDEX</h2>
   <h2 class="section-title">DETAIL</h2>
```

メインビジュアルを作成する

```html:
{{-- mainvisualのスタイル --}}
            <style>
                #mainvisual {
                    margin-bottom: 60px;
                    padding: 0 10px;
                }
            </style>

            <div id="mainvisual">
                <img src="{{ asset('storage\PHOTO BOOK\mainvisual.jpg') }}" alt="テキストテキストテキスト">
            </div>
```
css適用前と後 画像の左右に少し余白もできた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/141c14bf-94d1-0c9c-f84f-2e3f4e5630f1.png)

セクションindexを作成する
css適用前とサイトの完成図 リセットCSSでolの番号は消えている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/5f116d99-6644-4017-6379-8314f6b3dfea.png)

```html:
            <style>
                #index {
                    background-color: #fff;
                    padding: 30px 0;
                    margin-bottom: 60px;
                }             
 /*olタグはリストの先頭に番号がつくので、その分だけ左に移動
※番号を消したい場合は、「list-style-type: none;」を設定*/
                #index .index-list {
                    margin-left: 20px;
                    list-style-type: decimal;
                }
                #index .index-list li {
                    margin-bottom: 20px;
                }
/* リストの最後は下にマージンをつけない */
                #index .index-list li:last-child {
                    margin-bottom: 0;
                }
            </style>
            <section id="index">
                <div class="inner">
                    <h2 class="section-title">INDEX</h2>
                    <ol class="index-list">
                        <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
                         x 5
                    </ol>
                </div>
            </section>
```
css適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/5817b9ad-7a03-8776-49e6-6ec7e1dc358c.png)


セクションdetail
---
css適用前とサイトの完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/070e6925-a13c-bf8b-7de3-edb443a2a6d3.png)



```html:セクションdetail
            <style>
                #detail {
                    margin-bottom: 100px;
                }
                #detail .content .title {
                    font-size: 1.125rem;
                    font-weight: bold;
                }
                #detail .content .img {
                    margin: 0 0 25px 0;
                }
                #detail .content .text p {
                    margin-bottom: 20px;
                }
                #detail .content dl {
/* dt、ddを横並びにする */
                    display: flex;
/* dtとddが100%になったら、横並びを折り返す */                   
                    flex-wrap: wrap;                  
                    padding: 16px 0;
                    margin-bottom: 25px;
/* ulの上下に線 */
                    border-top: solid 1px #dedede;
                    border-bottom: solid 1px #dedede;
                }
                #detail .content dt {
                    width: 25%;
                }
               #detail .content dd {
                    width: 75%;
                   /*ddの下にはdefautでmbがあるこういうのをresetCssが消してくる*/
                   /*今回使用しているのは残っていたので消去する必要がある*/
                    margin-bottom: 0;
                }
                #detail .content .link {
                    color: #333;
                }
                #detail .content .link:hover {
                    opacity: 0.8;
                }
            </style>
            <section id="detail">
                <div class="inner">
                    <h2 class="section-title">DETAIL</h2>
                    <div class="content">
                        <img class="img" src="{{ asset('storage\PHOTO BOOK\detail.jpg') }}" alt="">
                        <div class="text">
                            <p class="title">タイトルタイトルタイトル</p>
                            <dl>
                                <dt>著者</dt>
                                <dd>タイトルタイトルタイトル</dd>
                                <dt>出版社</dt>
                                <dd>タイトルタイトルタイトル</dd>
                                <dt>発行年</dt>
                                <dd>タイトルタイトルタイトル</dd>
                            </dl>
                            <p>
                                テキストテキストテキストテキストテキストテキスト
                                テキストテキストテキストテキストテキストテキスト
                            </p>
                            <a class="link" href="#" target="_blank" rel="noopener noreferrer">オンラインストアで見る</a>
                        </div>
                    </div>
                </div>
            </section>
```
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/8f48ee63-a6ca-2a3b-6aa5-fbd0f4a3c5bb.png)

ddにmargine-bottome:0;がない場合とある場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/95189268-00a3-6abc-0242-10d78441375e.png)


フッター

```html:
        <style>
            #footer {
                font-size: 0.625rem;
                padding: 15px 0;
            }
        </style>
        
        <footer id="footer">
            <p class="inner">&copy; 2020 PHOTO BOOK</p>
        </footer>
```
前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b1c1c1ef-92ea-d539-2a1b-902715181fa3.png)
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/cc4e9cbc-46b8-716f-9fd3-c235f0048b2b.png)

レスポンシブ対応に変更
css適用前とサイトの完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/0c917714-f8a2-a370-79b4-516928097033.png)
detailセクションを横並びに変更

```css:
    {{-- 全体のCSS --}}
    <style>
        /* 中のコンテンツ部分の最大幅を設定 */
        .inner {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 40px;
        }

        @media screen and (min-width: 1024px) {
            .inner {
                padding: 0 0;
            }
        }
    </style>
        {{-- headerのCSS --}}
        <style>
            #header {
                padding: 0 10px;
                margin-top: 60px;
                margin-bottom: 15px;
            }
            @media screen and (min-width: 1024px) {
                    #header {
                        padding: 0 0;
                    }
                }
        </style>
            {{-- mainvisualのCSS --}}
            <style>
                #mainvisual {
                    margin-bottom: 60px;
                    padding: 0 10px;
                }
                @media screen and (min-width: 1024px) {
                    #mainvisual {
                        padding: 0 0;
                    }
                }
            </style>
```
css適用後、もともとあるかないかの余白を消しただけほぼ変わらない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/87fe0014-bb2e-0abf-2b5e-e51e638979e6.png)

detailセクションを画像とテキストの横並びに変更

```css:
/* detailセクション */
            <style>
                #detail .content .img {
/* この部分を上書き */
                    margin: 0 0 25px 0;
                }
  /* + */
                @media screen and (min-width: 1024px) {
  /* + */
                    #detail .content {
                        display: flex;
  /* 縦方向は上揃え */
                        align-items: flex-start;
                    }

                    #detail .content img {
                        width: 270px;
                        margin-right: 60px;
                    }
                }
            </style>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/54ce9541-4d53-0686-798e-2516b0548a3e.png)

```css:align-items_flex-startをコメントアウトしたら
                    #detail .content {
                        display: flex;
  /* 縦方向は上揃え */
  /*align-items: flex-start;*/
                   }
```
画像がデフォルトのストレッチがかかって伸びてしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/dda9aa88-1fc4-2613-267d-6f78a34251c2.png)

PHOTO BOOK 2
---
https://code-step.com/photo2-menu/

全体図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/1386828c-9d97-da80-5586-61bcabf3a1f9.png)

css適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/f9aabaf2-b13f-9248-6e66-12b715bee77c.png)

```css:全体のcss
        {{-- 全体のCSS --}}
        <style>
            html {
                font-size: 100%;
            }

            body {
                color: #333;
                font-size: 0.875rem;
            }

            img {
                max-width: 100%;
            }

            ul {
                list-style: none;
                padding: 0;
            }

            /* サイト全体のコンテンツ幅を設定 */
            .wrapper {
                max-width: 1000px;
                margin: 0 auto;
            }

            /* 中のコンテンツ部分の最大幅を設定 */
            .inner {
                max-width: 800px;
                margin: 0 auto;
                padding: 0 20px;
            }
        </style>
```
css適用後　画像が収まってサイドに余白ができた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/87cb69cd-2547-d600-64b2-cef65864bcb4.png)

ヘッダーのスタイルを作成する
---

```html:header
        <style>
            #header {
                margin-top: 60px;
                margin-bottom: 15px;
                padding: 0 10px;
            }
/*h1タグ
line-height にh1タグの高さよりも小さい値「1px」を指定することで、
h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
「line-height: 0;」を指定してもOKです*/
            #header .site-title {
                width: 180px;
                line-height: 1px;
            }
/* aタグのリンク範囲を親要素のサイズに広げる */
            #header .site-title a {
                display: block;
            }
        </style>
        <header id="header">
            <h1 class="site-title">
                <a href="index.html"><img src="{{ asset('storage\photobook\logo.svg') }}" alt="PHOTO BOOK 2"></a>
            </h1>
        </header>
```
前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/9ec148d0-6bab-cff8-1f95-8362ba4f4b68.png)
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/acfe0a3a-fc1b-9418-8e89-5b03d1d51414.png)
メインビジュアルのスタイルを作成
---

```css:mainvisual
            <style>
                #mainvisual {
                    margin-bottom: 60px;
                }
            </style>
            <div id="mainvisual">
                <img src="{{ asset('storage\photobook\mainvisual.jpg') }}" alt="テキストテキストテキスト">
            </div>
```
後　余白ができた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/a453e47f-3b2b-6aeb-4daa-fe751a2134c3.png)

indexセクションのスタイルを作成
---

```html:indexセクション
  {{-- indexセクションのスタイル --}}
                <style>
          /* indexセクション全体 */
                    #index {
                        background-color: #f5f5f5;
                        padding: 40px 20px;
                        margin-bottom: 60px;
                    }

        /* olタグの親要素 */
                    #index .index-inner {
                        border: solid 1px #333;
                        padding: 30px;
                    }

        /* olタグ「display: table;」と「margin: 0 auto;」で自要素を中央に配置。
            ※この方法を使うとテキストの長さに応じて可変で中央配置できる
               buttonやaタグなどのインライン要素も中央揃えできる。滅茶苦茶便利*/
                    #index .index-inner .index-list {
                        display: table;
                        margin: 0 auto;
                    }

                    #index .index-inner .index-list li {
                        margin-bottom: 20px;
                    }

        /*最後のliタグには margin-bottom を設定しない*/
                    #index .index-inner .index-list li:last-child {
                        margin-bottom: 0;
                    }

                </style>
                <section id="index">
                    <h2 class="section-title">INDEX</h2>
                    <div class="index-inner">
                        <ol class="index-list">
                            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
                            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
                            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
                            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
                            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
                        </ol>
                    </div>
                </section>
```
css適用前と適用後 画像リストはトリミングのし忘れ。２つに分けて貼るつもりだった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/4c700184-f456-a978-1881-20981471e743.png)

display: table;margin: 0 auto;がない場合とある場合
コンテンツの要素の幅に応じて中央に配置できる。text-centerだとコンテンツが膨れた場合、めちゃくちゃ崩れるし。
d-table　＋ mx-auto で自要素のテキスト中央揃えはめちゃくちゃいいかもしれん。                       
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/a8e054ce-4229-4ee0-1ebb-f46c312cdf77.png)


画像リストのスタイルを作成する

```html:
                {{-- 画像リスト --}}
                <style>
                    /* ulタグ */
                    .list {
                        margin: 30px 0 45px 0;
                    }

                    .list li {
                        margin-bottom: 15px;
                        text-align: center;
                    }

                    /*画像の下にできる隙間を消す*/
                    .list li img {
                        vertical-align: bottom;
                    }
                </style>

                <ul class="list">
                    <li><img src="{{ asset('storage/photobook/photo1.jpg') }}" alt=""></li>
                    <li><img src="{{ asset('storage/photobook/photo2.jpg') }}" alt=""></li>
                    <li><img src="{{ asset('storage/photobook/photo3.jpg') }}" alt=""></li>
                    <li><img src="{{ asset('storage/photobook/photo4.jpg') }}" alt=""></li>
                </ul>
```
css適用前と適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/3264b1cd-135d-2c1b-3c64-449f66b891a5.png)

忘れてた
section全体のスタイルを作成する

```html:
{{-- section全体のスタイル --}}
<style>
 /* セクションのタイトル<h2>のスタイル */
            .section-title {
            font-size: 1.125rem;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }
</style>

<h2 class="section-title">INDEX</h2>
<h2 class="section-title">DETAIL</h2>
```

detailセクション
---

css適用前と適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/abbc30fc-2026-cddf-2e6c-f8e701d3690e.png)

```html:
                <style>
/* detailセクション全体  */
                    #detail {
                        background-color: #f5f5f5;
                        margin-bottom: 60px;
                        padding: 40px 20px;
                    }
                    #detail dl {
                        border-bottom: solid 1px #333;
                        padding: 0 0 40px 0;
                    }
                    #detail dt {
                        font-weight: bold;
                    }
                    #detail dd {
                        margin-bottom: 10px;
                    }
                    #detail dd:last-child {
                        margin-bottom: 0;
                    }
                    #detail .text {
                        padding: 40px 0 0 0;
                    }
                    #detail .text p {
                        margin-bottom: 20px;
                    }
                    #detail .text .link {
                        color: #333;
                    }
                    #detail .text .link:hover {
                        opacity: 0.8;
                    }
                </style>
                <section id="detail">
                    <h2 class="section-title">DETAIL</h2>
                    <div class="flex">
                        <dl>
                            <dt>著者：</dt>
                            <dd>タイトルタイトルタイトル</dd>
                            <dt>出版社：</dt>
                            <dd>タイトルタイトルタイトル</dd>
                            <dt>発行年：</dt>
                            <dd>2021年1月1日</dd>
                        </dl>
                        <div class="text">
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <a class="link" href="#">オンラインストアで見る</a>
                        </div>
                    </div>
                </section>
```

フッター

```html:
        <style>
            #footer {
                font-size: 0.625rem;
                padding: 15px 0;
                text-align: center;
            }
        </style>
        
        <footer id="footer">
            <p class="inner">&copy; 2021 PHOTO BOOK 2</p>
        </footer>
```
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/ad523aef-e4d5-004e-d2e7-2aadf23d7c37.png)

レスポンシブ対応にする
---
css適用前とサイト完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/4a3db2bf-b247-1f28-5a3c-e1df14f61124.png)

```css:全体のcss
        /* 中のコンテンツ部分の最大幅を設定 */
        .inner {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* + */
        @media screen and (min-width: 1024px) {
            .inner {
                padding: 0;
            }
        }
```
```css:header
           #header {
                margin-top: 60px;
                padding: 0 10px;
            }
/* + */
            @media screen and (min-width: 1024px) {
                #header {
                    padding: 0;
                }
            }
```
```css:indexセクション
                    #index {
                        background-color: #f5f5f5;
                        padding: 40px 20px;
                        margin-bottom: 60px;
                    }

/* + */
                    @media screen and (min-width: 1024px) {
                        #index {
                            padding: 60px;
                        }
                    }
```
```html:画像のulリスト
<style>
                    .list {
                        margin: 30px 0 45px 0;
                    }

                    .list li {
                        text-align: center;
                        margin-bottom: 15px;
                    }
/* + */
                    @media screen and (min-width: 1024px) {
                        .list {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                            margin: 30px 0 45px 0;
                        }
                        .list li {
                            width: 49%;
                            margin-bottom: 15px;
                        }
                    }
</style>
                <ul class="list">
                    <li><img src="{{ asset('storage/photobook/photo1.jpg') }}" alt=""></li>
                    <li><img src="{{ asset('storage/photobook/photo2.jpg') }}" alt=""></li>
                    <li><img src="{{ asset('storage/photobook/photo3.jpg') }}" alt=""></li>
                    <li><img src="{{ asset('storage/photobook/photo4.jpg') }}" alt=""></li>
                </ul>
```
```html:detailセクション
<style>
                    /* detailセクション全体  */
                    #detail {
                        background-color: #f5f5f5;
                        margin-bottom: 60px;
                        padding: 40px 20px;
                    }
                    #detail dl {
                        border-bottom: solid 1px #333;
                        padding: 0 0 40px 0;
                    }
                    #detail .text {
                        padding: 40px 0 0 0;
                    }
/* + */
                    @media screen and (min-width: 1024px) {
                        #detail {
                            padding: 60px;
                        }
                        #detail .flex {
                        /*dlリストと.textを横並びにする。*/
                            display: flex;
                        }
                        #detail dl {
                            width: 35%;
                            border-right: solid 1px #333;
                            padding-right: 40px;
                            border-bottom: none;
                        }
                        #detail .text {
                            width: 65%;
                            padding: 0 0 0 40px;
                        }
                    }
</style>
                <section id="detail">
                    <h2 class="section-title">DETAIL</h2>
                    <div class="flex">
                        <dl>
                            <dt>著者：</dt>
                            <dd>タイトルタイトルタイトル</dd>
                            <dt>出版社：</dt>
                            <dd>タイトルタイトルタイトル</dd>
                            <dt>発行年：</dt>
                            <dd>2021年1月1日</dd>
                        </dl>
                        <div class="text">
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                            <a class="link" href="#">オンラインストアで見る</a>
                        </div>
                    </div>
                </section>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/9b7ee61b-026d-0f8d-8e44-f93e241262fa.png)
# &#x2b50;レシピサイト／トップページ
https://code-step.com/demo/html/recipe/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/5134f1f9-1e84-806a-a1bd-5bda11632095.png)

全体のレイアウト

- メイン
  - メインビジュアル
  - テキスト
  - 画像リスト
  - ボタン

- フッター
  - snsリスト
  - コピーライト表記

```css:全体のCSS
        html {
            font-size: 100%;
        }

        body {
            color: #2b2a27;
            font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
        }

        img {
            max-width: 100%;
        }

        ul {
            list-style: none;
        }

        a {
            color: #2b2a27;
        }
/*resetCSSでリセットされたため*/
        h1{
            font-size: 48px;
        }
```
適用後と適用前は画像が画面(bodY要素)からはみ出る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/f9f7b97b-6b1a-fc3c-7051-1333a18e2672.png)

セクション全体のスタイル

ない。

メインビジュアルのスタイルを作成

```css:メインビジュアルのスタイル
        <style>
            #mainvisual img {
/* 画像要素を親要素のbodyの幅に合わせる =  画面幅 */
                width: 100%;
/*要素の高さを windoww画面の高さに合わせる。 */
                height: 100vh;
/*画像の縦横比を維持 */
                object-fit: cover;
/*引き伸ばされた画像のい位置をトリミングできる  */

                object-position: center top;

                margin-bottom: 80px;
            }
        </style>
        <div id="mainvisual">
            <img src="{{ asset('storage\Recipe\mainvisual.jpg') }}" alt="">
        </div>
```
css適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/5e7cdbd7-58be-14ae-628c-038ebf02b43a.png)
css適用後　画像の高さがwindowの高さになった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/71c22e62-2a7c-e2b4-9f3a-d12cfc21072f.png)

object-fitやobject-positionrについての解説サイト サイト下の画像をタイル状にするとか本当にわかりやすい。

https://zenn.dev/catnose99/articles/754425d5686b7f593a34

Text部分のスタイル
css適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/632f57bc-ed54-a3c4-543b-2ceee22c0356.png)
css適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/86364d63-9949-14c5-5169-7b4b1f1d47a0.png)

```html:Text部分のスタイル
 <style>
            .text {
                text-align: center;
                padding: 0 20px;
                margin-bottom: 80px;
            }
            .text .site-title {
                margin-bottom: 20px;
            }
/*「display: inline-block;」でaタグに幅と高さを持たせる。
paddingでボタンのサイズを調整できるようになる。*/
            .text .btn {
                display: inline-block;
                border: solid 1px #2b2a27;
                font-size: 0.875rem;
                padding: 18px 60px;
                text-decoration: none;
            }
  </style>

        <div class="text">
            <h1 class="site-title">Recipe Diary</h1>
            <p>
                日々の料理レシピをまとめています。<br>
                和食や洋食、中華、お菓子までいろいろな料理レシピをアップしていますので、<br>
                みなさんの献立にお役立てくださいね！
            </p>
        </div>
---------------------------------
        <div class="text">
            <a class="btn" href="#">レシピ一覧を見る</a>
        </div>
```


ul.flexの画像リストに高さを設定する

:::note info
・高さは500px
・画像の縦横比を維持させる
:::

```html:画像のリスト部分のスタイル
        <style>
            .flex {
                margin-bottom: 60px;
            }
            .flex li img {
                width: 100%;
                height: 500px;
                object-fit: cover;
                vertical-align: bottom;
            }
        </style>
        <ul class="flex">
            <li><img src="{{ asset('storage/Recipe/recipe1.jpg') }}" alt=""></li>
            <li><img src="{{ asset('storage/Recipe/recipe2.jpg') }}" alt=""></li>
            <li><img src="{{ asset('storage/Recipe/recipe3.jpg') }}" alt=""></li>
        </ul>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/824e3827-909f-d317-ce97-34b929a00134.png)

フッターのスタイル

```html:フッターのスタイル
    <style>
        #footer {
            font-size: 0.75rem;
            padding: 20px;
            text-align: center;
        }

        #footer .sns {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        #footer .sns li {
/* 左右に10pxの余白 */
            margin: 0 10px;
        }
    </style>
    <footer id="footer">
        <ul class="sns">
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
        </ul>
        <p>&copy; 2021 Recipe Diary</p>
    </footer>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/efb5bc88-51eb-52cc-4484-d8c843652110.png)

レスポンシブ対応にする

:::note info
・画像のリストを横並びに変更
:::

```html:レスポンシブ対応にする
/* 画像リスト部分のスタイル */
        <style>
            .flex {
                margin-bottom: 60px;
            }

            .flex li img {
                width: 100%;
                height: 500px;
                object-fit: cover;
                vertical-align: bottom;
            }
/* + */
            @media screen and (min-width: 834px) {
                .flex {
                    display: flex;
                }
                .flex li {
                    width: calc(100%/3);
                }
            }
        </style>

   <ul class="flex">
        <li><img src="{{ asset('storage/Recipe/recipe1.jpg') }}" alt=""></li>
        <li><img src="{{ asset('storage/Recipe/recipe2.jpg') }}" alt=""></li>
        <li><img src="{{ asset('storage/Recipe/recipe3.jpg') }}" alt=""></li>
    </ul>
```
ulの画像リストが横並びになった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/4787578e-03ad-3287-78e0-082e6cbf66ad.png)

# &#x2b50;レシピサイト／レシピページ

https://code-step.com/recipe2-menu/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b5164393-4bf1-6d34-872a-4be303c2c971.png)

全体のレイアウト

- main
 - div（画像とテキスト）
 - div（ボタン）
- footer
 - snsリスト
 - コピーライト表記

```html:css:全体のcss
    {{-- ページ全体のCSS --}}
    <style>
        html {
            font-size: 100%;
        }

        body {
            color: #2b2a27;
            font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
        }

        img {
            max-width: 100%;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        a {
            color: #2b2a27;
        }
        ol {
            padding: 0;
        }
        dd{
            margin: 0;
        }
    </style>
```
css前 画像が親要素(body画面)からはみ出している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/e53e1f0f-49a8-c262-9a9a-198cfe12e09a.png)
css後 画像が画面幅(親のbody要素の幅)に収まる
画像省略


:::note info
・画像に高さと縦横比をあて下の余白を消去
・レシピ部分(画像以外)に内側余白を設定
・dtとddを横並び＋ドット下線(画像:材料部分)
・タイトルのフォントサイズと下線＋余白の調整(h1とh2)
・li要素に下線と余白(画像：作り方のリスト部分)
:::

```html:画像のスタイル
       <style>
            .flex {
                margin-bottom: 60px;
            }

            .flex .image img {
/*親要素の幅、設定してなかった場合、大体画面横幅一杯になる*/
/* 気をつけるべきは % 画像の幅100%ではなく、親要素の幅100%*/
                width: 100%;
                height: auto;
                object-fit: cover;
                vertical-align: bottom;
            }
        </style>
       <div class="flex">
            <div class="image">
                <img src="{{ asset('storage/recipepage/recipe.jpg') }}" alt="">
            </div>
            <div class="recipe">
                  {-- 省略--}
            </div>
        </div>
{{-- recipeのスタイル --}}
        <style>
            .flex .recipe {
                padding: 40px 5% 0 5%;
            }
            .flex .recipe .page-title {
                font-size: 1.75rem;
                margin-bottom: 20px;
            }
            .flex .recipe .content-title {
                border-bottom: solid 1px #ccc;
                font-size: 1.25rem;
                padding-bottom: 5px;
                margin: 40px 0 15px 0;
            }
            /*dt要素とdd要素を横並びにしている*/
            .flex .recipe .ingredient-list {
                display: flex;
                flex-wrap: wrap;
            }
            /*border-bottom に「dotted」を指定して点線にする*/
            .flex .recipe .ingredient-list dt {
                width: 85%;
                border-bottom: dotted 1px #ccc;
                padding: 6px 0;
            }
            .flex .recipe .ingredient-list dd {
                width: 15%;
                border-bottom: dotted 1px #ccc;
                padding: 6px 0;
                text-align: right;
            }
                /*olタグのローマ数字を表記させる場合*/
                .flex .recipe .step-list {
                    list-style:decimal;
                    /*ローマ数字の幅だけ左に余白*/
                    margin-left: 20px;
                }
            .flex .recipe .step-list li {
                border-bottom: dotted 1px #ccc;
                padding: 6px 0;
            }
        </style>
        <div class="flex">
            <div class="image">
                <img src="{{ asset('storage/recipepage/recipe.jpg') }}" alt="">
            </div>

            <div class="recipe">
                <h1 class="page-title">ひよこ豆とアボガドのタコス</h1>
                <p>たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。</p>

                <h2 class="content-title">材料（2人分）</h2>
                <dl class="ingredient-list">
                    <dt>テキストテキスト</dt>
                    <dd>1個</dd>
                    <dt>テキストテキスト</dt>
                    <dd>1個</dd>
                    <dt>テキストテキスト</dt>
                    <dd>1個</dd>
                    <dt>テキストテキスト</dt>
                    <dd>1個</dd>
                    <dt>テキストテキスト</dt>
                    <dd>1個</dd>
                </dl>

                <h2 class="content-title">作り方</h2>
                <ol class="step-list">
                    <li>テキストテキストテキストテキスト</li>
                    <li>テキストテキストテキストテキスト</li>
                    <li>テキストテキストテキストテキスト</li>
                    <li>テキストテキストテキストテキスト</li>
                    <li>テキストテキストテキストテキスト</li>
                </ol>
            </div>
        </div>
```
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/923acc73-b279-4f94-265d-092be2bba883.png)

:::note info
・ボタンを作成
:::

```html:
 {{-- ボタン要素 --}}
 <style>
    .btn {
        text-align: center;
        margin-bottom: 80px;
    }
/*「display: inline-block;」でaタグに幅と高さを持たせる。
paddingでボタンのサイズを調整が可能になる*/
    .btn a {
        display: inline-block;
        border: solid 1px #2b2a27;
        font-size: 0.875rem;
        padding: 18px 60px;
        text-decoration: none;
    }
</style>
        <div class="btn">
            <a href="#">レシピ一覧を見る</a>
        </div>
```
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/50c7795a-3842-3e0d-e7b8-27316c0810a1.png)

フッターのスタイル

```html:
    <style>
        #footer {
            font-size: 0.75rem;
            padding: 20px;
            text-align: center;
        }
 /*リンクはul、liタグで記述
SNSのリンク集という、一つの意味をもったリスト群になるので、ul、liタグでグルーピング
※リストタグを使用しなくても問題ないが、使用した方が検索エンジンに対して
より適切に意味を伝えることができると考えリストタグを選択しています。*/
        #footer .sns {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        #footer .sns li {
/* 左右に余白 */
            margin: 0 10px;
        }
    </style>

    <footer id="footer">
        <ul class="sns">
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
        </ul>
        <p>&copy; 2021 Recipe Diary</p>
    </footer>
```
後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/8da267c2-ef37-e0b2-5cd6-630cbfde7e0a.png)

レスポンシブ対応に変更する

:::note info
・画像とレシピを横並びにする。
:::

```html:
{{-- 画像と全体のスタイル --}}        
        <style>
            .flex {
                margin-bottom: 60px;
            }
            .flex .image img {
                width: 100%;
                height: auto;
                object-fit: cover;
                vertical-align: bottom;
            }
        </style>
{{-- recipeのスタイル --}}
        <style>
            .flex .recipe {
                padding: 40px 5% 0 5%;
            }
        </style>
{{--+--}}
{{-- レスポンシブスタイル --}}
        <style>
            @media screen and (min-width: 834px) {
                .flex {
/* .imageと.recipeを横並びに変更 */
                    display: flex;
                     /*defaultはストレッチ*/
                    /* align-items: center; */
                }
                .flex .image {
                    width: 50%;
                }
                .flex .image img {
                    /* height: 700px; */
                    /*defaultのストレッチの時h:100%;は親要素の高さと一致する.それ以外は自要素の高さまで*/
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
                .flex .recipe {
                    width: 50%;
                }
            }
        </style>
```
d-flexの子要素は交差方向にはstretchがかかる。のでhight:100%;にすると要素一杯まで拡大される。
<img src="http://drive.google.com/uc?export=view&id=1QoluUEYSllICzYRpK8kgr7LEcLXepK89">
それ以外は、自要素の高さになるので、この場合の100%の高さはheight:auto;と同じ意味。
あくまでも、画像要素の幅高さの％は親要素が基準になる。
<img src="http://drive.google.com/uc?export=view&id=1WjzDgh5qWmjaju-pKtCmGv9Cf53wZEGm">


# &#x2b50;ブランドサイト（ジュエリー）
---
https://code-step.com/brand-menu/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/1c50e46c-7a0c-b2f3-e0a9-fbf471a8f6a5.png)

全体のレイアウト

- メインビジュアル
- header
  - logo
  - navi 
- メイン
  - 画像とテキスト x 2
- フッター
  - ロゴとコピーライト表記

```css:全体のCSS
/*リセットCSS*/
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
/*Crimson Textのfont*/
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap" rel="stylesheet">
    <style>
        html {
            font-size: 100%;
        }

        body{
            font-family: 'Crimson Text', serif;
        }

        img {
            max-width: 100%;
        }
    </style>
```

メインビジュアルを作成する
---
完成形 スマホとPC
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/ca8116f0-d51a-df68-4f02-8200c9c6a12c.png)
css適用前
<img src="http://drive.google.com/uc?export=view&id=1Wu40g81YTsMKRCdNzWCAUnSpvCRIwRHc">

```html:#mainvisualのhtml
    <style>
        #mainvisual img {
            width: 100%;
            height: 50vh;
            object-fit: cover;
        }

        @media screen and (min-width: 760px) {
            .header-wrapper {
                width: 90vw;
                margin: 4% auto 0 auto;
            }
        }
    </style>

    <div class="header-wrapper">
        <div id="mainvisual">
            <img src="https://code-step.com/demo/html/brand/img/mainvisual.jpg" alt="">
        </div>
        <header id="header"></header>
```
css適用後 スマホとPC
<img src="http://drive.google.com/uc?export=view&id=1d9_Hv6iUN9XdyIxC9rv2-UfW8qZanpwl">


headerの作成
---
完成図 スマホとPC
<img src="http://drive.google.com/uc?export=view&id=1b2VrnCAf2azbwAqaGqbW9K2GC1SB4Tdw">


css適用前
<img src="http://drive.google.com/uc?export=view&id=1SqZbxFhOvAL2Skh4U8klSBtjqNwgEnrF">

css適用後
<img src="http://drive.google.com/uc?export=view&id=1K2krdiAHKjq3kfXFNlRSsg1O-FvTMirg">

```html:
            <style>
                #header .site-title {
                    width: 120px;
                    line-height: 1px;
                    margin-right: 50px;
                }

                #header .site-title a {
                    display: block;
                }

                #header {
                    display: flex;
                    align-items: center;
                    padding: 20px 25px;
                }

                #header nav ul {
                    display: flex;
                }

                #header nav ul li:not(:last-child) {
                    margin-right: 10px;
                }

                @media screen and (min-width: 760px) {
                    #header {
                        padding: 30px 0;
                    }
                }
            </style>
    <div class="header-wrapper">
        <div id="mainvisual">{-- 省略 --}</div>
        <header id="header">
            <div class="site-title"><a href="#">
                <img src="../brand/img/logo.svg" alt=""></a>
            </div>
            <nav>
                <ul>
                    <li>Concept</li>
                    <li>Work</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    </div>
```
section#concept#work
---
完成図
<img src="http://drive.google.com/uc?export=view&id=1qA-_6w01CPiys8FYU1K73HQG-x3C7wUy">


```html:section_id="concept"のhtml
    <div class="wrapper">
        <main>
            <section id="concept" class="content">
                <div class="img">
                    <img src="../brand/img/concept.jpg" alt="">

                </div>
                <div class="text">
                    <h2 class="section-title">私たちの考えるジュエリーとは</h2>
                    <span class="section-title-en">Concept</span>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </section>
            <section id="work" class="content">
                <div class="img">
                    <img src="../brand/img/work.jpg" alt="">
                </div>
                <div class="text">
                    <h2 class="section-title">ハンドメイドにこだわる理由</h2>
                    <span class="section-title-en">Work</span>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </section>
        </main>
```


セクション全体のスタイル

```html:セクション全体のスタイルのhtml
    <style>
        .wrapper {
            max-width: 1000px;
            margin: 30px auto 0 auto;
            padding: 0 18px;
        }

        .content {
            margin-bottom: 60px;
        }

    </style>
    <div class="wrapper">
        <main>
            <section id="concept" class="content">{{-- 省略 --}}</section>

            <section id="work" class="content">{{-- 省略 --}}</section>
        </main>
    </div>
```
css適用前
<img src="http://drive.google.com/uc?export=view&id=1uoasb7zD-h4TwsXGavGkbExQZ_O2GOW-">


css適用後 画像はsection:100%;だからsectionを中央にすれば、自然と中央になる
<img src="http://drive.google.com/uc?export=view&id=13_PTexhZuUgT8Y0xyOOhoFx__2arokCe">


セクションのcss span(inline)要素はd-inline-blockにすることで、marginができる。
`.content .img{width:100%; 不要。消し忘れ}`
<img src="http://drive.google.com/uc?export=view&id=1OZaZCstE5cDyBb9d581kvPubP9hALHzh">
flex-direction:row-reverse;で画像とテキストの順番を入れ替えている。

```html:
    <style>
        .wrapper {
            max-width: 1000px;
            margin: 30px auto 0 auto;
            padding: 0 18px;
        }

        .content {
            margin-bottom: 60px;
        }

    </style>
    <div class="wrapper">
        <main>
            <style>
                .section-title {
                    font-weight: bold;
                    font-size: 1.25rem;
                    margin-bottom: 4px;
                }

                .section-title-en {
                    display: inline-block;
                    margin-bottom: 25px;
                }

                .content .img {
                    /*width: 100%; 不要 消し忘れ*/
                    margin-bottom: 10px;
                }

                .content .text p{
                    margin-bottom: 10px;
                }

                @media screen and (min-width: 760px) {
                    .section-title {
                        font-size: 1.5rem;
                    }

                    .content {
                        display: flex;
                        align-items: center;
                    }

                    .content .img {
                        width: 50%;
                        margin-bottom: 0;
                    }

                    .content .text {
                        width: 50%;
                        padding: 0 7%;
                    }

                    #work.content {
                        flex-direction: row-reverse;
                    }
                }
            </style>
            <section id="concept" class="content">
                <div class="img">
                    <img src="../brand/img/concept.jpg" alt="">

                </div>
                <div class="text">
                    <h2 class="section-title">私たちの考えるジュエリーとは</h2>
                    <span class="section-title-en">Concept</span>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </section>
            <section id="work" class="content">
                <div class="img">
                    <img src="../brand/img/work.jpg" alt="">
                </div>
                <div class="text">
                    <h2 class="section-title">ハンドメイドにこだわる理由</h2>
                    <span class="section-title-en">Work</span>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </section>
        </main>
```

footer
---
完成図
<img src="http://drive.google.com/uc?export=view&id=1JgJ_x32VAgZ7kBDYl_W8fjC0VgQKUGr0">


css適用前
<img src="http://drive.google.com/uc?export=view&id=1VxsDhxGm6cIWkdbNXzEoZWQsuuyHTNfI">


```html:footerのhtml
        <style>
            footer ul {
                display: flex;
                justify-content: space-between;
                padding: 10px 0;
                align-items: center;
                font-size: 0.625rem;
            }

            footer ul .logo {
                line-height: 1px;
                width: 120px;
            }

        </style>
        <footer>
            <ul>
                <li class="logo"><img src="https://code-step.com/demo/html/brand/img/logo.svg" alt=""></li>
                <li class="copy-right">&copy; Wooden Jewelry</li>
            </ul>
        </footer>
```