13日目
前回はある程度枠組み的には寄せることができたので、マージンの調整や色の調整などして完成させたいと思います！
【技術テーマ】
ホームページ制作
言語
- HTML
- CSS
目標成果物
- AppleのMac紹介ページに近いもの
コードと資料
前回のものをベースに要素の追加などをして完成を目指します。
- 各要素の定義修正
前回の要素に追加してランキング、動画へのボタンを追加します。
index.html
<body><divclass="container"><h1>僕のすすめる料理動画3選</h1><divclass="recommend"><divclass="label left"><divclass="ranking">第一位</div><spanclass="series">【至高シリーズ】</span><h2class="title">ペペロンチーノ</h2><divclass="sub_title">料理研究家が辿り着いた最高の一皿</div><ahref="https://www.youtube.com/watch?v=Jx-tqntWPCM"class="movie_link">動画</a></div><iframeclass="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><divclass="recommend"><iframeclass="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><divclass="label right"><divclass="ranking">第二位</div><spanclass="series">【悪魔シリーズ】</span><h2class="title">万能ネギ</h2><divclass="sub_title">もう、醤油には戻れない</div><ahref="https://www.youtube.com/watch?v=7il2sEYzMYA"class="movie_link">動画</a></div></div><divclass="recommend"><divclass="label left"><divclass="ranking">第三位</div><spanclass="series">【レンチンシリーズ】</span><h2class="title">サラダチキン</h2><divclass="sub_title">もう市販のサラダチキンはいらない</div><ahref="https://www.youtube.com/watch?v=7il2sEYzMYA"class="movie_link">動画</a></div><iframeclass="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>- スタイルの修正
前回のままでは少し味気なかったので文字の装飾と、細かなマージン調整を行います。
html{font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:106.25%;quotes:"“""”"}.container{width:980px;margin:0auto;}.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;}.recommendiframe{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:10px18px;color:white;font-weight:400;font-size:18px;}上記の結果がこちら
↓
Macのアップルのページがこんな感じなのでだいぶ寄せられたかと..!!!
よし！！！！
完成！！！
例のごとく一応githubにはコードを載せておきます....笑
https://github.com/itayayuichiro/cook_youtuber_hp