デイトラ WEB制作コース初級編 7日目

2022年9月29日 10:57

「画像の上に文字を表示する」いつも分からなくなる…
・HTMLではテキストのみ記述
・CSSのbackground-image: url(　);
・表示領域にピッタリ合わせて表示するときは background-size: cover;
で完成！！

・HTMLではテキストのみ記述
・CSSのbackground-image: url(　);
・表示領域にピッタリ合わせて表示するときは background-size: cover;
で完成！！

はい！3回繰り返したので覚える！

初回は苦戦したし、うまく作れなかったのに、今回は倍速の再生でも再現可能！ライブコーディングでも繰り返しは大事！

個人的なポイント！！
・CSSは絶対に手打ちしない！HTMLから必ずコピーする！
　これをするだけで格段にエラーが減る
　これは本当に大事！！絶対手打ちしない！！

はい、私にとって鬼門のレスポンシブ対応です…。いつもここでレイアウトがぐちゃぐちゃになる…
が、さすがに今回はライブコーディング通り上手くいきました！
CSSの手打ちをしない！の効果は絶大！必ずコピペ！！
marginやpaddingもボックスモデルが明確になってきたこともありコーディングしていてかなりイメージできるようになってきた

ただし、

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

  }

の`only`と`and`の記述の意味が分からず、自分なりにググって調べてみた

正直今の私では理解できない部分があったが`only`の記述は必要ない？
`and`の記述は`,`で代用可能？という認識
せっかくなので「デイトラ」にて質問中

返答があったら追記する

追記1

自分で試してみればいいじゃん！という事で試す

今回のコーディングでは`only`はあっても無くても変わらない

`and`は必要であった。が`,`で代用可能であった

追記2

メンターさんより回答あり

・@media
これはメディアクエリの記述ですという宣言
・only screen
onlyは参考サイトにあるように、省略可能。次のメディアタイプの指定で、メディアクエリに対応していないブラウザは無視しますという指定になる
screenは、これからするメディアクエリの記述がどのメディアタイプに適用するかを指定している
今回はプリンター以外のデバイスの指定
・and
andを接続することで、適用させる画面サイズを指定できる
andは『〇〇かつ〇〇』を意味し、
,は『〇〇または〇〇』を意味する
前者は二つの条件を満たさないと適用されない、後者はどちらの条件でも適用されるこの微妙な違いがある
基本はandで書く

とりあえずは

「こういう記述だ」という認識で呪文的に使用いただくのが一番悩んだりしないで済む
@media only screen and (max-width: )

とのことでした

さらに追記

カンマを使うことはほぼ無いとのこと

やはり「呪文的」に覚えて使用する

デイトラ WEB制作コース初級編 7日目

いいなと思ったら応援しよう！