デイトラweb制作初級編 DAY7

画像の上に文字を載せる

①<img>タグのみ(変更前)
<section class="top">
<img src="./img/main-vsual.png" alt="">
</section>
②<p>タグ + 「background-image」プロパティ(変更後)
<section class="top">
<div class="container">
<p class="top-title">
1日1題30日で<br>
プロのWebエンジニアになろう!
</p>
<p class="top-subtitle">
毎日設定された課題をこなすだけ!
未経験から30日でプログラミングスキルをつけよう
</p>
</div>
</section>
.top {
background-image: url(../img/main-vsual-nontitle.png);
background-size: cover;
padding: 80px 0;
}
・<br>タグは改行
・<img>の「./」と「../」の違いについて → デイトラweb制作初級編 DAY3
レスポンシブ表示
レスポンシブ表示の準備
@media only screen and (max-width:767px) {
/*===================
この中に書いていく
=====================*/
}
・PC 1200px
・タブレット(iPad)768px
・スマホ 767px以下 → レスポンシブ表示の時は「max-width:767px」
flex-wrap(子要素の折り返し)

スマホ版 ↓↓↓
①「flex-wrap: wrap;」を使用していない場合

②「flex-wrap: wrap;」を使用した場合

親要素である「course-wrapper」クラスに「flex-wrap」プロパティを使用することで、
子要素の「course-item」クラスが折り返される
→ デイトラweb制作初級編 DAY6のチートシートに記載
まとめ
ようやくサイトの制作が終わりました。
今回は動画を見ながら作ったので、そこまで躓くことはなかったのですが、
これを今の自分が1人で作るとなったとき、何時間かかるのでしょう。。。
少し心配ですが、おそらくDAY8から本格的に始まると思うので、しっかり復習しておきたいと思います!