Apple과 비슷한 페이지를 만드는 【구성/폰트 수정】 ~1일 10행 코딩~

9227 단어 CSSHTML5홈페이지

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

    위의 결과는 여기
    ↓


    많이 왔습니다! !
    다음 번에 문자 장식을하고 완성하고 싶다! ! !
    div의 크기 조정 이벤트를 선택하는 방법(참고)
    qiita 등에 구현되어 있는 스마트폰용 검색 박스를 html과 css만으로 만든다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage