【要参考】
・【STEP4】Webページの制作「各ブラウザ検証.pdf」参考
ブラウザとは？
ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。
【ワンポイントアドバイス】
サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。
【参考サイト】
メモ
◆【各ブラウザの対応状況や、使用しているタグが正しいものかチェックする】
各ブラウザでそれぞれ表示方法などが違う（＝ユーザーエージェントスタイル）ため、デザインが崩れることを防ぐために、サイト制作時には、各ブラウザでの表示やタグの対応状況を確認する（クロスブラウザ対応）が必要になる。
chromeとIEまたはFirefoxが主流で、受注する際には最初の契約時にどのブラウザに対応するようにするか決めて契約するとのこと。
・Can I use
ここでHTMLやCSSで非推奨タグを使用していないかをチェックできる。（mdn web docsもおすすめとのこと）
それぞれのブラウザーがバージョンごとに並んでいて、現行で主流のバージョンは中央段のベージュで囲まれたバージョン。
主流バージョンの1つ前のバージョンまで緑色（OKサイン）なら問題ないが、黄色になっていたら注意。
黄色のコメントで「with prefix」となっていたら、ベンダープレフィックスを付ければOK。
【ベンダープレフィックス】→先頭に付ける-moz-や-webkit-など
新しいCSSなど、採用予定の機能が各ブラウザで先行実装された際、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-（MozillaのFirefox向け）や-webkit-（Chrome、Safariなど向け）などのベンダープレフィックスを付ける必要がある。
ただし、ベンダープレフィックスは、 草案（Working Draft）が勧告候補（Candidate Recommendation）になったときには外すことが推奨されています。 すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。 また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。
ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。
（参照：https://www.htmq.com/csskihon/603.shtmlより）
◆サイト制作時
・必ずバックアップをとる！
フォルダーごとコピーするとimagesフォルダーもコピーされ容量が圧迫されるので、以下の方法がおすすめとのこと
①フォルダー内で、html・cssファイルをコピペ
②コピペデータ名を前日日付「index_0405.html」など付けて別名保存
③「index.html」「style.css」などの名前はずらさないように（リンクされているので）して毎日バックアップ
※「以前のデザインが良かった」などの直しもあるので、日ごとに必ずバックアップをとる
・レイアウトシフトの回避
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうこと
imgタグ使用時は注意し、imgが表示されるまでの枠を確保するように設定する
参考：imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法 | コリス
・【手順】
手書きラフ→ワイヤーフレーム→デザインカンプ作成→PC版作成
PC版の制作がひと通り出来たら、
・レイアウトシフト漏れがないかチェック
・クロスブラウザ対応（+非推奨タグチェック）
・レスポンシブデザイン対応 が必要になる。
