11日目
前回はほんとに雑魚雑魚HTMLかいただけだったので、スタイルを少し当てていきたいと思います！！
【技術テーマ】
ホームページ制作
言語
- HTML
- CSS
目標成果物
前回のHTMLにdivとかで構成を作って簡単なレイアウトだけ寄せる
コードと資料
今回も前回に引き続きだいぶ基礎的な部分の記述になります。
- 各要素をDIV等で囲う
前回のHTMLはほんとに並べただけなので、ひとまず文章部分とyoutubeの埋め込み部分を分離します。
index.html
<body>
<h1>僕のすすめる料理動画3選</h1>
<div class="container">
<div class="recommend">
<div class="label">
<span>【至高シリーズ】</span>
<h2>ペペロンチーノ</h2>
<span>料理研究家が辿り着いた最高の一皿</span>
</div>
<iframe width="560" 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">
<div class="label">
<span>【悪魔シリーズ】</span>
<h2>万能ネギ</h2>
<span>もう、醤油には戻れない</span>
</div>
<iframe 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>
<div class="recommend">
<div class="label">
<span>【レンチンシリーズ】</span>
<h2>サラダチキン</h2>
<span>もう市販のサラダチキンはいらない</span>
</div>
<iframe 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>
命名はかなり雑ですがこんな感じにして分離します。
- スタイルをあてる
Appleのページでは左右で要素が分かれているので、上記のclassとかをもとに分けていきます。
index.html
<style>
.container{
width:980px;
margin:0 auto;
}
.recommend {
margin-bottom: 10px;
width: 100%;
display: block;
height: 315px;
position: relative;
}
.recommend .label{
position: absolute;
top: 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);;
content: 'BOX';
width:40%;
}
.recommend iframe{
width:60%;
float: right;
}
</style>
左右に分けるのはfloatでやり方を知っていたのですが、文字の部分を真ん中に寄せる方法がわからず他のサイトのをコピって実装しました。
上記の結果がこちら
↓
おぉ....！！少し近づきましたね。
次回で左/右の出し分けをして、できればフォントの調整をしていきたいです...!!!