Appleに似たページを作る【完成編】 ~1日10行コーディング~

## 13日目

前回はある程度枠組み的には寄せることができたので、マージンの調整や色の調整などして完成させたいと思います！


### 【技術テーマ】
ホームページ制作

### 言語
* HTML
* CSS

### 目標成果物

* AppleのMac紹介ページに近いもの


### コードと資料

前回のものをベースに要素の追加などをして完成を目指します。

1. 各要素の定義修正

前回の要素に追加してランキング、動画へのボタンを追加します。

```index.html
<body>
  <div class="container">
    <h1>僕のすすめる料理動画3選</h1>
    <div class="recommend">
          <div class="label left">
            <div class="ranking">第一位</div>
            <span class="series">【至高シリーズ】</span>
            <h2 class="title">ペペロンチーノ</h2>
            <div class="sub_title">料理研究家が辿り着いた最高の一皿</div>
            <a href="https://www.youtube.com/watch?v=Jx-tqntWPCM" class="movie_link">動画</a>
          </div>
          <iframe class="right"  height="315" src="https://www.youtube.com/embed/Jx-tqntWPCM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
      </div>
      <div class="recommend">
          <iframe class="left" width="560" height="315" src="https://www.youtube.com/embed/MQFEBR4Eo1Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          <div class="label right">
            <div class="ranking">第二位</div>
            <span class="series">【悪魔シリーズ】</span>
            <h2 class="title">万能ネギ</h2>
            <div class="sub_title">もう、醤油には戻れない</div>
            <a href="https://www.youtube.com/watch?v=7il2sEYzMYA" class="movie_link">動画</a>
        </div>
    </div>
      <div class="recommend">
          <div class="label left">
              <div class="ranking">第三位</div>
              <span class="series">【レンチンシリーズ】</span>
              <h2 class="title">サラダチキン</h2>
              <div class="sub_title">もう市販のサラダチキンはいらない</div>
              <a href="https://www.youtube.com/watch?v=7il2sEYzMYA" class="movie_link">動画</a>
          </div>
          <iframe class="right" width="560" height="315" src="https://www.youtube.com/embed/7il2sEYzMYA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
      </div>
</body>
```


2. スタイルの修正

前回のままでは少し味気なかったので文字の装飾と、細かなマージン調整を行います。

```css
    html {
      font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:106.25%;quotes:"“" "”"
    }
    .container{
        width:980px;
        margin:0 auto;
    }
    .recommend {
        margin-bottom: 10px;
        width: 100%;
        display: block;
        height: 315px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 110px;
    }
    .recommend .label{
        width:40%;
        font-weight:600;
    }
    .recommend iframe{
        width:60%;
    }
    .recommend .right{
      margin-left: 30px;
      float: right;
    }
    .recommend .left{
      float: left;
    }

    .series{
     font-size: 21px; 
    }
    .title{
      margin-top: 0px;
      margin-bottom: 0px;
     font-size: 46px; 
    }
    .sub_title{
     font-size: 23px; 
     margin-bottom: 28px;
    }
    .ranking {
      color: #f56300;
      font-size: 21px; 
      margin-bottom:0.2em;
    }
    .movie_link{
      border-radius: 18px;
      background-color: #ff0100;
      padding: 10px 18px;
      color: white;
      font-weight: 400;
      font-size: 18px;
    }
```

上記の結果がこちら
↓
![](https://i.imgur.com/Mofy9Xt.jpg)

Macのアップルのページがこんな感じなのでだいぶ寄せられたかと..!!!
![](https://i.imgur.com/wTWAJqy.jpg)


よし！！！！
完成！！！

例のごとく一応githubにはコードを載せておきます....笑
https://github.com/itayayuichiro/cook_youtuber_hp