今日の教材：各ブラウザ検証.pdf

ブラウザとは、Webサイトを見るためのソフトのこと。Google chrome、Edge、firefoxなど

大事「使用しようとしているHTMLやCSSが主要
なブラウザに対応しているか？」
→検証して、ポートフォリオに「Google chrome想定で作成、Edgeやfirefoxで検証しています」などと書くとよい◎

対応しているか調べるには

それぞれのブラウザで確認して、おかしいところあればcaniuseで検証。

調べられる検証サイト…https://caniuse.com/
HTMLタグやCSSプロパティを入れると各ブラウザで使えるか表示。
もしくはmdnでも、簡易的なものあり。

背景色がベージュに変わっている横一列のところが現在！なので基本はここを見ればよい。
それより上は過去、下は未来。
赤→緑が1年の差とかだと、気を付けないとダメ。かなり経っているようなら、気にしなくてOK。

□の色
緑＝対応している
黄＝注意、条件あり
赤＝対応していない

※数字は使用者の数的なもの。あまり気にしなくてOK。

対応していない、非推奨なものは使用しないのが無難！

黄の□のよくある条件

ベンダープレフィックスor with prefix
https://www.htmq.com/csskihon/603.shtml
：CSSの先頭に、あるワードを入れれば対応可になる。

主要ブラウザのベンダープレフィックス

-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-ms-　　　…… Internet Explorer

デベロッパーツールで表示される、ユーザーエージェントスタイルuser agent stylesheetをチェックする

：Google Chromeが決めているスタイル。（ブラウザによって決まっていて、違う）リセットCSSでリセットすればOKだが、リセットしていない項目は、ブラウザによって変えないといけない。

パソコンとスマホ、どちらのブラウザでもちゃんと表示されるか確認する！＝クロスブラウザ、ブラウザチェック。
案件なら、どれをチェックするのか、契約時に確認する

サイト作成時の注意点

サイト作ったら、必ず毎日のバックアップを取る。

①毎日フォルダ分けする！コピーした方を、昨日の分として、もともとの方はいじらない。じゃないとDreamweaverと紐付けができなくなる！
or
②HTML、CSSファイルだけ追加していく。

①の方が良い！

完成したら、毎日FTPサーバーにUPする。
念のため1日前のバックアップも一緒にアップロードする。（古いものの名前を変更する。index_20230418.htmlとか。これをurlの末尾に入力すれば古いのも見れる）

スーパーリロード

サイトアップして更新しても、うまくブラウザ表示が更新されないときあり。→Shift+F5でスーパーリロードする！
→それでもダメなときは、検証ツール出した状態で左上↻更新ボタン長押し→キャッシュの再考とハード再読み込み

CSSについて

レイアウトシフトを回避するには

：画像の読み込み待ちのところに文章が表示されて、読み込まれると文章がガコッと下に行くこと。

HTMLのimgタグに直接幅・高さを入れる！画像の幅確保して文章はその下にしてね、の意
img width=”1920″ 　height=”1080″とか。単位は不要。正確な数字じゃなくてもよい。