「ゼロからサイトを作る」「レスポンシブに対応させる」

デイトラWeb制作コース初級編DAY7の学び

【この記事に書いてあること】

プログラミング学習7,8日目⏩

Web制作コース　初級編DAY7💻

学習時間:2時間⏳

学習内容:ゼロからサイトを作る③（レスポンシブ対応）✏

学び📚
・画像の上に文字を載せるには「background-image」を使う
・ レスポンシブ対応コードは、「@media only screen and (max-width:767px)」#デイトラ pic.twitter.com/ZUaovilfBc

— ふりっく💻トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 19, 2021

　【学習時間】

2時間

　【学び】

1 画像の上に文字を載せるには、background-imageを使いその上に<p>`で文字を書く

style.css

background-image: url(../img/main-vsual-nontitle.png);

index.html

　　　 <p class="top-title">
        1日1題30日で<br>
        プロのWebエンジニアになろう！
      </p>
      <p class="top-subtitle">
        毎日設定された課題をこなすだけ！<br>
        未経験から30日でプログラミングスキルをつけよう
      </p>

↓

2 レスポンシブ対応　コード

style.css

@media only screen and (max-width:767px) {

この中にレスポンシブ用のCSSを記述していく！

}

3 なぜ、max-width:767pxなのか
　→　一番出回っているタブレットのipadのサイズが768px
一般的なPCのサイズは1200pxで768~1200pxはPCと同じ表示を出して
　　767px以下（スマホ）からはレスポンシブに対応させるから