HTML5&CSS3しっかり入門教室 読んでみた。
［記事公開日］2018/12/20
［最終更新日］2024/09/22
Amazon：HTML+CSSデザイン
https://amzn.to/4a0Z85A
HTMLとCSSを使って、Webサイトを制作する本。
Webデザイン系の本、次々と発売されてます。
人によっては、どれを買っていいかわからない。
でも、どの本も、だいたい同じ内容だと思います。
作るサイトが、シングルページや、1カラム、2カラム、3カラムなどの違い。
レスポンシブデザインなどで、サイズが可変するかしないか、
動きのあるスライドショーなど、あり、無し。動きのあるサイトなのか。
問い合わせなどのメールフォームの設置のあり無し、Googleマップなどの地図の設置
フォントの設定、SNSなどのリンクボタンあり、なし、など他。
作り方の順番や要素やタグの解説、
コーディングの順番や仕方などは、本によって、いろいろ違う感じで、
どの本も、ある程度は、同じ気がします。
HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。
目次
HTML5&CSS3しっかり入門教室 読んでみた。
1章 Webページに関する基礎知識
2章 HTMLの基礎
3章 Webページを構築する
4章 CSSの基礎
5章 HTMLにCSS を適用する
6章 jQueryでWebページを動かす
7章 Webページをマルチデバイスに対応させる
8章 Webページをサーバーにアップロードする
この
HTML5&CSS3しっかり入門教室、本は、
HTMLとCSSによるWebデザインの基本をゼロから学べる教科書です。
章の最後では、作成したサイトのコードの確認と説明などがあるので、丁寧な解説本だと思います。
Part1 準備編では、Webそのものの基礎知識を学びます。
Part2 実践編では、HTMLとCSSの基礎と実際にWebページを制作しながらマークアップしていきます。
Part3 発展編では、Web制作の現場で必須のjQueryやレスポンシブWebデザインなど開発。
またファビコンなどは本に載ってますが
ファビコンを設置する作業とかはないです。
他に、Googleアナリティクスなどの設置などの仕方なども載ってないです。
自分の場合、WebブラウザをSafari12で、jQueryを使ってメニュー表示の部分は表示されなく、Chromeを使ったら普通に表示されました。
本では、Safari 11では動作確認済みと記載されてます。
この本では
Webブラウザは、Google Chromeを使っての作業で解説してます。
2021年
HTML5って最新なんでしょって思ってる人もいます。
現在ではHTML5は廃止で、「HTML Living Standard」だそうです。
HTML5（エイチティーエムエル・ファイブ）は、World Wide Web Consortium（W3C）が策定していたHyperText Markup Languageの5回目に当たる大幅な改定版、現在では、「HTML Living Standard」
https://ja.wikipedia.org/wiki/HTML5
HTML Standard 日本語訳
https://momdo.github.io/html/
初心者からちゃんとしたプロになる Webデザイン基礎入門 改訂2版 単行本（ソフトカバー） – 2023/9/22
栗谷幸助 (著), 相原典佳 (著), 藤本勝己 (著), 村上 圭 (著), 吉本孝一 (著)
本では、このような、シングルページのレイアウトのサイトを作成していきます。
自分は、旅行サイトを作ってみました。
作って学ぶ HTML+CSSグリッドレイアウト 単行本（ソフトカバー） – 2024/2/26
エビスコム (著)
「難しい」と敬遠していたCSSグリッドがきちんと身につく。
Webサイト管理のきほん 業務と技術の知識が身につく 単行本（ソフトカバー） – 2022/7/21
谷口 元紀 (著)
Webサイト管理にまつわる「業務」と「技術」の基本知識がこれ1冊でわかる!
いちばんやさしいWeb3の教本 人気講師が教えるNFT、DAO、DeFiが織りなす新世界 (いちばんやさしい教本) 単行本（ソフトカバー） – 2022/7/20
田上 智裕 (著)
原点回帰から未来へ
ウェブの進化がすべてを変える
デザインのネタ帳 コピペで使える動くWebデザインパーツ 単行本（ソフトカバー） – 2022/3/18
矢野 みち子 (著), 五十嵐 小由利 (著), 伊藤 麻奈美 (著), 棧敷 友香子 (著), & 1 その他
コードをイチから書かなくてOK! 超カンタンにWebサイトを動かす!
増補改訂版
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版] 単行本（ソフトカバー） – 2022/1/7
服部 雄樹 (著)
美しいデザインでサイト制作の知識とワザが「1冊で」身につく本格入門
ざっくりつかむ CSS設計 単行本（ソフトカバー） – 2021/12/23
高津戸 壮 (著)
Web制作の現場でこれだけは知っておきたい、CSSの扱い方、管理、運用の基本!
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本(特典:すぐにサイト作成を開始できる! HTMLスターターキット&最新技術バリアブルフォントの解説PDF) 単行本（ソフトカバー） – 2021/10/14
Capybara Design 竹内 直人 (著), 竹内 瑠美 (著)
本書は手を動かしてWebサイトを作りながら
HTML/CSSとWebデザインの基本を楽しく学べる入門書です。
教科書では教えてくれないHTML&CSS 単行本（ソフトカバー） – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。
動くWebデザイン アイディア帳 実践編 単行本（ソフトカバー） – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)
本書は、好評の「動くWebデザイン アイディア帳」の姉妹本です。
今では、オンラインで学べるサービスもいろいろあります。
無料（有料）
ドットインストールなどは、昔は、無料で多く学べましたが、現在ではpremiumが多い気がします。
Progate(プロゲート)
Progateはオンラインプログラミング学習サービスです。
https://prog-8.com
CODEPREP
CODEPREPはプログラミングを書いて動かしながら 学ぶ実践型のプログラミング学習サービスです。
https://codeprep.jp
ドットインストール
プログラミング学習サービス「ドットインストール」
3分動画でマスターできるプログラミング学習サービス
https://dotinstall.com
シラバス(Cyllabus) – キュレーション型 eラーニングシステム
シラバスは、WEBデザインやWEBアプリケーションの 開発方法を学ぶことができる WEB サービスです。ステップバイステップで、マネをしながら学習することができます。
https://cyllabus.jp
Schoo – 大人たちがずっと学び続ける生放送コミュニティ
https://schoo.jp/
富士通パソコン
FMVキッズ
FMVがお届けする、こども向け情報サイトです。パソコンやインターネットの知識、 プログラミング、タイピングなどを楽しく学べます。
https://azby.fmworld.net/kids/
FMVキッズ：インターネット知識の泉
URLって何を表しているの？
https://azby.fmworld.net/kids/izumi/58/
CodeMonkey ( コードモンキー ) 日本公式サイト
ゲーム感覚で、コーディングの基礎を学習します。
https://codemonkey.jp
Webデザイン（サイトのコーディング）など
クリスタやCodestep（コードステップ）は無料で学べます。
クリスタ
Webデザイナーを目指せる！
クリエイターのスタートライン！をコンセプトにWebデザインやコーディング初学者の方へ向けてどこよりもわかりやすく解説をしていきます！
https://crestadesign.org
Codestep（コードステップ）
Codestepは、HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。
https://code-step.com
chot.designなどは、昔は、無料でしたが、現在では有料に変わってます。
chot.design – 毎日ちょっとずつデザインを学ぼう
chot.designはWebデザインやUI/UXデザイン、その他デザイン制作について学べるサイトです。
https://chot.design
Web制作の便利なサイト
仮の画像配置に
Placehold.jp｜ダミー画像生成 モック用画像作成
https://placehold.jp
Placeholder.com: Placeholder.com
https://placeholder.com
lorempixel – placeholder images for every case
http://lorempixel.com
Web制作小物ツール – dounokouno.com
https://webtools.dounokouno.com
ダミーテキストジェネレータ – dounokouno.com
https://webtools.dounokouno.com/dummytext/
バナー制作に参考に
レトロバナー: バナーデザイン専門ギャラリーサイト
https://retrobanner.net
バナーデザインアーカイブ
バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック！バナー作成の参考にご活用ください！
http://banner.keizine.net
バナーデザインまとめ。｜Banner Matome｜HOME
http://bannermatome.com
コンバージョンを上げるWebデザイン改善集 単行本（ソフトカバー） – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。
動くWebデザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
本書はWebサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。
CSS設計完全ガイド ~詳細解説+実践的モジュール集 (日本語) 単行本（ソフトカバー） – 2020/2/27
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) 単行本（ソフトカバー） – 2010/4/8
100倍クリックされる 超Webライティング バズる単語300 単行本 – 2018/12/10
100倍クリックされる 超Webライティング実践テク60 単行本 – 2017/3/2
HTML5&CSS3しっかり入門教室 読んでみた。
HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。
目次
Chapter1から8まであります。
Chapter5まですれば、一般的なWebサイトは完成します。
その後は、jQueryのプラグインを使いスライドショーを追加、
また、レスポンシブにしていくなど解説。
Part1 準備編
1章 Webページに関する基礎知識
Part2 実践編
2章 HTMLの基礎
3章 Webページを構築する
4章 CSSの基礎
5章 HTMLにCSS を適用する
Part3 発展編
6章 jQueryでWebページを動かす
7章 Webページをマルチデバイスに対応させる
8章 Webページをサーバーにアップロードする
Part1 準備編
Chapter1
1章 Webページに関する基礎知識
本書は、HTMLとCSSによるWebデザインの基本をゼロから学べる教科書です。
01Webページが動く仕組み
Webページを構成している言語のファイル
Webページを見るための仕組み
サーバーとWebページの関係
サーバーの種類
サーバーの役割
IPアドレスとドメイン
DNSサーバーの役割
02Webページの制作フロー
Webページができるまでの流れ
①Webページの企画
②原稿執筆
③ワイヤーフレーム設計
④ビジュアルデザイン制作
⑤コーディング
⑥テスト、クロスブラウザのチェックなど
⑦完成
ワイヤーフレームは手書きでも問題ありません、
Webの制作現場だと、Photoshopなどは多く使われているみたいだけど。
AdobeのPhotoshopなども少し載ってます。
また、モックアップの制作は、
Adobe XDでモックアップをしてるなども載ってます。
03Webページの開発環境
Webページの制作ツール
メモ帳でも、コーディングはできますが、
コーディングに適したテキストエディタを使うと便利です。
など載ってます。
Mac用
CotEditor
軽量プレーンテキストエディタ
すべてはMacのために
このアプリケーションはmacOSのために作られました。CotEditorはMacのアプリケーションがあるべきように振る舞い、Macに調和した優雅なデザインを身にまとっています。それはつまり、このエディタを初めて立ち上げたその日から、多くの機能を直感ですぐに使い始めることができるということです。マニアックな知識を必要とする複雑な設定ファイルはありません。テーマやシンタックス定義も含め、設定はすべて標準的な環境設定ウインドウから行えます。
CotEditorは日本生まれ。エンコーディング判定や和欧混ざった文書の描画、縦書き表示など、日本語特有の問題もきちんと対応します。
Windows用
サクラエディタ
https://sakura-editor.github.io
他に、テキストエディタ
Sublime Text
Dreamweaver
なども載ってます。
自分で使いやすいエディタを使うといいと思います。
さまざまなブラウザ
Safari
https://www.apple.com/jp/safari/
Google Chrome
https://www.google.com/chrome/
Microsoft Edge
https://www.microsoft.com/ja-jp/windows/microsoft-edge
Firefox
https://www.mozilla.org/ja/firefox/
Internet Explorerなど
この他にも、いろいろあると思います。
ブラウザのバージョンについて解説してます。
Part2 実践編
Chapter2
2章 HTMLの基礎
まずは、1番、シンプルなHTML文書を書いてみましょう。
ブラウザGoogle Chromeのインストール
（Mac OSとWindowsで解説）
この本では、テキストエディタは、Sublime Text2を使って解説。
テキストエディタをインストール
htmlのファイルの保存
ディレクトリの保存
文字コードの確認
GoogleのChromeのデベロッパーツールの使い方についての解説
次に、HTMLファイル
新規ファイルの作成
02HTMLのマークアップ
HTMLの基本用語
①タグ、HTMLを定義する記号
②要素、開始タグと終了タグでくくられた1つの固まりのことです。
③マークアップ、テキストなどの見た目を変えるための定義を行うこと
④属性、要素の中に、付加的な情報を埋め込む
id属性、class属性、title属性、lang属性、style属性など
⑤属性値、属性として指定する値です。
など解説
HTMLの基本構成について
HTML5のDOCTYPE宣言について
03Webページの基本構造
HTMLの文書構造
Webページの基本構造と構造化タグ
①ヘッダー
②ナビゲーション
③広告
④フッター
⑤メインコンテンツ
04代表的な要素のマークアップ
body要素の中で使う代表的な要素
①見出しの（h1からh6）要素
②p要素は、文章の中の段落を表す要素、改行はbr要素
③img要素は、画像を表示
④a要素は、リンクを貼るための要素
⑤リスト（ul要素、ol要素、dl要素）は、箇条書きを表示
⑥div要素とspan要素は、マークアップ上、意味を持たない持たない
⑦figure要素とfigcaption要素は、写真や図表など示す要素
⑧small要素は、前は要素を小さく表示するためでしたが、HTML5以降は、警告、著作権など表す要素に変わってます。
コメントアウトなど解説
ディレクトリの作り方など解説
Part2 実践編
Chapter3
3章 Webページを構築する
01ページの基盤を作成する
ワークフローと文書の構造化
シングルページ形式でサイト制作する
1ページの長いページ
この本では、1ページの
架空の旅行情報サイト「FAVORITRIP」のサイトを作ります。
練習用のWebページFAVORITRIP」の構成
HTMLパート完成までの手順
基盤部分を記述する
テキストファイルに、文字を打ち出して原稿を作ります。
サンプルをダウンロードして解凍、
ダウンロードのフォルダの中に、
作成する素材などあるので、それをコピーして利用します。
Webページで使う原稿が用意できたら、基盤部分を作ります。
基本部分の構築
HTMLファイル（index.html）を作成し、先程の原稿を流しこみます。
メタ要素の記述する
次に
構造化タグでマークアップ
body要素の中に、
header要素
nav要素
section要素
footer要素など書いて
body要素の中に
原稿を流しこみます。
画像を插入する
構造化タグでマークアップしたら、次は画像を插入する
①ロゴの画像
②旅行の画像
③スライドショーに使う画像
④フッターロゴの画像など
imgタグを書きます。
装飾目的の画像には、alt属性は不要です。など解説
02ヘッダーとグローバルナビゲーション
画像が入るとWebページらしくなります。
ヘッダーの部分をマークアップする。
ロゴ画像とキャッチフレーズの文字をマークアップする
ロゴは、通常は、見出しタグのh1を企業サイトなども多いですが、
必ずロゴがh1でマークアップするとは限りません。など解説。
グローバルナビゲーションをマークアップする
メニューや目次になります。
ul要素でリスト表示します。
a要素を使って、ページ内リンクを実装する
各、セクション部分に、id要素を追加する
要素にid名を指定する属性。
03 ABOUTSUコンテンツ
見出し要素とp要素でマークアップする
04 TOPICSコンテンツ
画像とキャプション
figure要素でマークアップ
05 NEWSコンテンツ
定義リストを使ったマークアップ
dt要素が、説明される言葉
dd要素が、説明や定義
06 GALLERYコンテンツ
jQueryを使ったスライドショーについて
jQueryスライドショーで役立つプラグイン
Flickity
https://flickity.metafizzy.co
ItemSlide.js
https://itemslide.github.io
07 ACCESSコンテンツ
Googleマップの埋め込み
Googleマップのカスタマイズについて解説
この本は、2018年7月発売ですが、
Google MAP APIが現在では登録の仕方など変わってます。
（使うアクセス数によって、無料から有料になってるみたいです。）
また、現在では、「Google Maps Platform」と
名前が変わっているので、人によっては少し戸惑うかも。
本で記載の
Google MAP API、URLは、これです。
https://developers.google.com/maps/web/
Googleなどは次々とサービスの内容が変わってます。
そのたびに、いろいろ調べて操作は大変です。
Google Maps APIキーを取得する仕方などは
インターネットで検索すればいろいろでてきます。
また、人によっては、Google Maps APIキーの取得、え？有料なのと思います。
APIの割り当の上限を設定すれば、無料で使えます。
ただ、登録の画面でクレジットカードなど登録などあります。
設定とかは、人によっては面倒くさいと感じるかもです。
Google、YouTubeなども、広告が無い、有料プランなども登場してきました。
次々とサービスの内容が変わると、正直、それ対応してくのは面倒かもです。
操作もですが。
08 フッターとフッターナビゲーション
フッターをマークアップする
Part2 実践編
Chapter4
4章 CSSの基礎
01 CSSの書き方
Webページの見た目をCSSで整える
HTMLの違い
02 デフォルトCSS
GoogleのDeveloperツールで制作中のサイトを開き
デフォルトのCSSが確認できます。など解説
Webブラウザには、デフォルトのCSSが設定されます。など解説
リセットCSSとノーマライズCSSについて解説
リセットCSSは、デフォルトCSSをリセットすることです。
ノーマライズCSSは、デフォルトCSSの有用な部分は残してなど、
ノーマライズCSSの使い方
normalize.cssについて
https://necolas.github.io/normalize.css/
03 ボックスの概念
ボックスとは
marginとpaddingの設定
widthとheightについて
ブロック要素とインライン要素
04 class属性とid属性
05 疑似要素と疑似クラス
コーディングの方法は、人それぞれです。
自分に合った方法を見つけていけばいいです。と解説されてます。
Part2 実践編
Chapter5
5章 HTMLにCSSを適用する
01 CSSコーディングの前に導入と基本設定
要素などの順番について、上から順に進める
コンテンツの共通する幅を把握しておく
CSSコーディング
新規CSSを作成する
HTML側にCSSを読み込み設定を追記する
ノーマライズCSSをカスタマイズ
02 ヘッダーコンテンツ
最初は、ヘッダーコンテンツ
ヘッダーにCSSを適用するポイント
ヘッダー要素に背景画像を設定する
文字スタイルを調整して横並びにする
positionを使って要素を配置する
ロゴの調整
コンテンツを中央に寄せる
03 ABOUTSUコンテンツ
要素にスタイルを適用する
ページ全体の文字色を設定する
04 TOPICSコンテンツ
フレックスボックスについて
HTML構造を整理する
sectionに背景をつける
コンテンツを横並びにする
05 NEWSコンテンツ
floatレイアウトについて
floatの使い方と注意点
06 GALLERY＆ ACCESSコンテンツ
非共通パーツのレイアウト
07 フッターコンテンツ
仕上げと最終の確認
フッターに、2種類の背景色を設定するなど
Part3 発展編
Chapter6
6章 jQueryでWebページを動かす
HTMLとCSSで作ったWebサイトにjQueryで動きをつけます。
01 jQuery導入のメリット
jQueryの解説
02 jQueryの使い方
jQueryのバージョン
03 プラグインを使ったスライドショーの実装
jQueryプラグインの使い方
本では、jQueryの基本構文の説明は書いてます。
Part3 発展編
Chapter7
7章 Webページをマルチデバイスに対応させる
WebページをPCで閲覧したとき、スマートフォンで閲覧したとき
マルチデバイスする。
マルチデバイスの方法は、いろいろありますが、
この章では、レスポンシブでします。
01 導入と基本設定
02 レスポンシブコーディングの仕組み
レスポンシブコーディング
レスポンシブコーディングを実装するために、2つの基本テクニック
1つ目は、HTML側に、viewportの設定
2つ目は、CSS側に、メディアクエリを設定
この本での
viewportの設定
<meta name="viewport" content="width=device-width,initial-scale=1">
nameで”viewport”は、viewpointの設定
widthでdevice-widthは、デバイスの幅に合わせる
initial-scaleで1は、初期値拡大率1倍（100%）
など
ブレイクポイントの設定
スマートフォン向けデザインの確認
03 レスポンシブコーディング
viewportを設定する
メディアクエリを追記する
フルードイメージを設定する
スマートフォン用、メニューの実装
スマートフォンのメニューのナビゲーションを実装する
実装の流れ
HTML実装のポイント
jQueryの実装のポイント
CSS実装のポイント
Part3 発展編
Chapter8
8章 Webページをサーバーにアップロードする
Webページが完成したら、公開します。
サーバーにデータをアップロードして公開します。
レンタルサーバーを利用する
初心者向けのレンタルサーバーサービスなど載ってます。
本では、ロリポップなど載ってますが、登録や契約の仕方などは載ってないです。
「ロリポップ！」レンタルサーバー
Webサイト・ブログ運営を始めるなら、ロリポップ！をご利用ください！
手軽にホームページ作成をスタートできます！
よく、HTMLやCSSの制作の関連の書籍などで、
書籍内で、高いレンタルサーバーなど載せてて、
それを使って解説の本もあります。
初心者とかで、いきなり高い値段のレンタルサーバーなど契約しての解説の本とか、どうなんだろ。
って本もあります。
まあ本とレンタルサーバーが提携してるのかも知れないけど。
ネットオウル
「スターサーバー」
無料で独自SSLが使える！クラウド型高速レンタルサーバー
月額126円の「エコノミー」から
ネットオウルでは、無料で利用ができるレンタルサーバーもあります。
「ヘテムル」レンタルサーバー
ドメインの取得
ドメインの種類など解説
co.jp
jpドメイン
.comなど解説
本では、さくらのレンタルサーバなども載ってます。
ドメインの取得など、
ムームードメインや、さくらのドメインなども載ってます。
さくらのレンタルサーバ
高速・安定・無料SSL付
独自ドメインの取得
国内CMSシェア率80%を超えているWordPress
さくらインターネットでは月額515円からご利用可能！
「ムームードメイン」独自ドメイン
初心者でも簡単にドメイン設定ができる機能、
手軽に取得していただける価格帯
個人の方を中心に多くのお客様にご利用いただいております。
ネットオウル
「スタードメイン」年額1,180円から(税抜)の独自ドメイン
独自ドメインとレンタルサーバーの利用が
月額換算100円程度から可能です。
お得にホームページの開設ができます！
レンタルサーバーを契約したら
作ったWebサイトのファイルデータを、サーバーにアップロードします。
FTPを使ったアップロード
FTPクライアントの種類など解説
本では、無料で利用ができる、File Zillaのソフトを使ってアップロードしてます。
File Zillaをダウンロードする
https://ja.osdn.net/projects/filezilla/
file Zillaの画面で、操作など解説
ファイルをサーバーにアップロードして
Webサイト上に公開した。
Webサイト上にあるサイトは不具合などある場合があります。
アクセス制限をかけてテストをします。
本では、レンタルサーバーの、ロリポップで、アクセス制限をかける仕方など解説
03Webサイト上にあるWebサイトをチェックする
クロスブラウザのテスト
複数のブラウザでWebページを表示させる
実機でテストする場合
MacやWindows、スマートフォンなど使い、サイトを表示させます。
ツールでテストする場合
Web上では、無料、有料で、クロスブラウザテスト用のツールがいろいろあります。
browserlingは無料で利用ができます。
ただ無料だと、1回あたり閲覧時間が3分以内に制限されています。
Live interactive cross-browser testing
https://www.browserling.com
テスト環境で、動作を終えたら、不要になったBASIC認証を外し、
Webサイトを公開します。
これで、Webページ製作の作業は、完了です。など解説
HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。
