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

3295 ワード
HTML 学習記録 デイトラ 備忘録 CSS HTML テキストリンク

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

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

　【学習時間】

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以下（スマホ）からはレスポンシブに対応させるから