デイトラ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から本格的に始まると思うので、しっかり復習しておきたいと思います!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です