デイトラweb制作初級編 DAY7
nakano
画像の上に文字を載せる
①<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から本格的に始まると思うので、しっかり復習しておきたいと思います！
