More than 3 years have passed since last update.

Appleに似たページを作る【構成/フォント修正】 ~1日10行コーディング~

Posted at 2020-06-15

12日目

前回は横並びにするところだけ作ったのでより寄せるために左右への振り分けとフォントの調節をしようと思います！！！

【技術テーマ】

ホームページ制作

言語

HTML
CSS

目標成果物

左右への振り分け
フォントの調整

をしたものの作成

コードと資料

今回から少しいじったレイアウトをしていきたいと思います。

各要素の定義修正

前回のでは左右の出し分けができないので、クラスを追加します。

index.html

<body>
  <h1>僕のすすめる料理動画3選</h1>
  <div class="container">
      <div class="recommend">
          <div class="label left">
              <span class="series">【至高シリーズ】</span>
              <h2 class="title">ペペロンチーノ</h2>
              <span class="sub_title">料理研究家が辿り着いた最高の一皿</span>
          </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">
            <span class="series">【悪魔シリーズ】</span>
            <h2 class="title">万能ネギ</h2>
            <span class="sub_title">もう、醤油には戻れない</span>
        </div>
    </div>
      <div class="recommend">
          <div class="label left">
              <span class="series">【レンチンシリーズ】</span>
              <h2 class="title">サラダチキン</h2>
              <span class="sub_title">もう市販のサラダチキンはいらない</span>
          </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>

後のスタイルとのところとも関係するのですが、文字を右に表示するところはiframeとdivの順番を逆にしています。

スタイルの修正

前回のままで右文字バージョンを作ろうと思ったのですが、そのままやったらバグったので、文字のセンタリングの根本から修正しました。

    .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%;
    }
    .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; 
    }

上記の結果がこちら
↓

だいぶぽくなってきました！！
次回で文字の装飾をして完成させたいな！！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up