HTML5&CSS3しっかり入門教室 読んでみた。
［記事公開日］2018/12/20
［最終更新日］2024/03/11
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/
本では、このような、シングルページのレイアウトのサイトを作成していきます。
自分は、旅行サイトを作ってみました。
作って学ぶ HTML+CSSグリッドレイアウト 単行本（ソフトカバー） – 2024/2/26
エビスコム (著)
「難しい」と敬遠していたCSSグリッドがきちんと身につく。
やさしくわかるHTML&CSSの教室 単行本（ソフトカバー） – 2022/8/27
リブロワークス (著), 鹿野 壮 (監修)
会話形式でやさしくわかりやすいHTML/CSSの入門書です。
やさしくわかるHTML&CSSの教室 単行本（ソフトカバー） – 2022/8/27
リブロワークス (著), 鹿野 壮 (監修)
HTML&CSS Webデザインがすべて一冊で身につく集中講座 単行本（ソフトカバー） – 2022/7/22
飛岡 辰哉
HTML&CSS Webデザインがすべて一冊で身につく集中講座 単行本（ソフトカバー） – 2022/7/22
飛岡 辰哉
Webサイト管理のきほん 業務と技術の知識が身につく 単行本（ソフトカバー） – 2022/7/21
谷口 元紀 (著)
Webサイト管理にまつわる「業務」と「技術」の基本知識がこれ1冊でわかる!
Webサイト管理のきほん 業務と技術の知識が身につく 単行本（ソフトカバー） – 2022/7/21
谷口 元紀 (著)
いちばんやさしいWeb3の教本 人気講師が教えるNFT、DAO、DeFiが織りなす新世界 (いちばんやさしい教本) 単行本（ソフトカバー） – 2022/7/20
田上 智裕 (著)
原点回帰から未来へ
ウェブの進化がすべてを変える
デザインのネタ帳 コピペで使える動くWebデザインパーツ 単行本（ソフトカバー） – 2022/3/18
矢野 みち子 (著), 五十嵐 小由利 (著), 伊藤 麻奈美 (著), 棧敷 友香子 (著), & 1 その他
コードをイチから書かなくてOK! 超カンタンにWebサイトを動かす!
デザインのネタ帳 コピペで使える動くWebデザインパーツ 単行本（ソフトカバー） – 2022/3/18
矢野 みち子 (著), 五十嵐 小由利 (著), 伊藤 麻奈美 (著), 棧敷 友香子 (著), & 1 その他
世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書[改訂2版] (世界一わかりやすい教科書) 単行本（ソフトカバー） – 2022/1/22
赤間 公太郎 (著), 狩野 咲 (著), 鈴木 清敬 (著)
世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書[改訂2版] (世界一わかりやすい教科書) 単行本（ソフトカバー） – 2022/1/22
赤間 公太郎 (著), 狩野 咲 (著), 鈴木 清敬 (著)
増補改訂版
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版] 単行本（ソフトカバー） – 2022/1/7
服部 雄樹 (著)
美しいデザインでサイト制作の知識とワザが「1冊で」身につく本格入門
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版] 単行本（ソフトカバー） – 2022/1/7
服部 雄樹 (著)
現場で使える Webデザインアイデアレシピ 単行本（ソフトカバー） – 2022/1/28
小林 マサユキ (著)
ざっくりつかむ CSS設計 単行本（ソフトカバー） – 2021/12/23
高津戸 壮 (著)
Web制作の現場でこれだけは知っておきたい、CSSの扱い方、管理、運用の基本!
ざっくりつかむ CSS設計 単行本（ソフトカバー） – 2021/12/23
高津戸 壮 (著)
プロの「引き出し」を増やす HTML+CSSコーディングの強化書 単行本（ソフトカバー） – 2021/11/29
草野 あけみ (著)
HTML・CSSの基本は覚えたけど、デザインカンプから情報を読み取って、イチからコーディングするのはまだ無理……
本書はそんな方に向けたものです。
制作現場で通用する“コーディング力”を強化するには、豊富なパターンの実践練習を繰り返すのが、遠いようで一番の近道。
そのために、本書では100通り以上のサンプルを使って、HTML+CSSのコーディング練習を積み重ねるスタイルで構成しました。
プロの「引き出し」を増やす HTML+CSSコーディングの強化書 単行本（ソフトカバー） – 2021/11/29
草野 あけみ (著)
【Amazon.co.jp 限定】これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本(特典:すぐにサイト作成を開始できる! HTMLスターターキット&最新技術バリアブルフォントの解説PDF) 単行本（ソフトカバー） – 2021/10/14
Capybara Design 竹内 直人 (著), 竹内 瑠美 (著)
本書は手を動かしてWebサイトを作りながら
HTML/CSSとWebデザインの基本を楽しく学べる入門書です。
【Amazon.co.jp 限定】これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本(特典:すぐにサイト作成を開始できる! HTMLスターターキット&最新技術バリアブルフォントの解説PDF) 単行本（ソフトカバー） – 2021/10/14
Capybara Design 竹内 直人 (著), 竹内 瑠美 (著)
Webデザインの基本きちんと入門[第2版] 単行本（ソフトカバー） – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!
Webデザインの基本きちんと入門[第2版] 単行本（ソフトカバー） – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),
【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 単行本（ソフトカバー） – 2021/8/27
田村 章吾 (著)
本書では、業務でWebサイトをコーディングしていく人を対象として、必要なCSSの知識、CSS設計の基本、CSSを効率的に書くためのSassの基本を解説しました。後半はサンプルサイトのコーディングプロセスを通して、実践的な制作ノウハウを学びます。
【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 単行本（ソフトカバー） – 2021/8/27
田村 章吾 (著)
個人サイトを作ろう! テンプレートですぐできる! すぐに身につく! HTML&CSS 単行本（ソフトカバー） – 2021/8/24
ガタガタ (著)
はじめてでもHTMLとCSSの基本をしっかり学べる
ウェブサイトを自分で作ってみたい人
昔、個人サイトを作っていた人
個人サイトを作ろう! テンプレートですぐできる! すぐに身につく! HTML&CSS 単行本（ソフトカバー） – 2021/8/24
ガタガタ (著)
教科書では教えてくれないHTML&CSS 単行本（ソフトカバー） – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。
教科書では教えてくれないHTML&CSS 単行本（ソフトカバー） – 2021/7/17
狩野 祐東 (著)
動くWebデザイン アイディア帳 実践編 単行本（ソフトカバー） – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)
本書は、好評の「動くWebデザイン アイディア帳」の姉妹本です。
動くWebデザイン アイディア帳 実践編 単行本（ソフトカバー） – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)
Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本（ソフトカバー） – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)
Web制作入門書のロングセラーが、最新仕様にアップデート!
本書の章構成
Lesson1 Webデザインの世界を知る
Lesson2 Webサイトを設計する
Lesson3 HTMLの役割とできること
Lesson4 CSSの役割とできることLesson5 Webサイトを構成する素材
Lesson6 Webサイトを表現する色
Lesson7 Webサイトを公開する
Lesson8 Webサイトを運用する
Lesson9 Webサイトを制作する
Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本（ソフトカバー） – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)
今では、オンラインで学べるサービスもいろいろあります。
無料（有料）
ドットインストールなどは、昔は、無料で多く学べましたが、現在では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デザイン必携。 プロにまなぶ現場の制作ルール84 Kindle版
北村 崇 (著), 浅野 桜 (著) 形式: Kindle版
【Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた新しいルールブック】
Webデザイン必携。 プロにまなぶ現場の制作ルール84 単行本 – 2016/3/23
北村 崇 (著), 浅野 桜 (著)
コンバージョンを上げるWebデザイン改善集 単行本（ソフトカバー） – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。
コンバージョンを上げるWebデザイン改善集 単行本（ソフトカバー） – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
HTML&CSS コーディング・プラクティスブック 7 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
デザインカンプ（Adobe XDデータ）と指示書をもとに、Webページをコーディングしてみる実践シリーズ。本書では、メインコンテンツがレスポンシブテーブルなページをFlexboxを中心に新旧さまざまなテクニックを使って構築します。
HTML&CSS コーディング・プラクティスブック 6 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
本書では、12分割グリッドでデザインされたショッピング系サイトをCSS Gridによる12分割グリッドで構築していきます。
HTML&CSS コーディング・プラクティスブック 5 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
HTML&CSS コーディング・プラクティスブック 4 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
HTML&CSS コーディング・プラクティスブック 3 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
HTML&CSS コーディング・プラクティスブック 2 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
HTML&CSS コーディング・プラクティスブック 1 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
【HTML/CSS】Spotify風簡易音楽サイトを作ろう！| 作りながら学ぶシリーズ Techpit publishing Kindle版
Techpit編集部 (著) 形式: Kindle版
本教材では、HTML・CSSの基礎を少し学んだが、デザインを工夫したサイトを作成したい方向けへの教材となっています。
豊富な作例で学ぶ Adobe XD Webデザイン入門 (Compass Booksシリーズ) 単行本（ソフトカバー） – 2021/3/22
池原健治 (著), 井斉花織 (著), 佐々木雄平 (著), 佐藤修 (著), & 4 その他
この1冊で初心者からプロまで、すぐに使える知識が身につく!
豊富な作例で学ぶ Adobe XD Webデザイン入門 (Compass Booksシリーズ) 単行本（ソフトカバー） – 2021/3/22
池原健治 (著), 井斉花織 (著), 佐々木雄平 (著), 佐藤修 (著), & 4 その他
Manaさん「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の続編が出版されるみたいです。CSSやJavaScriptを使っての動きやレイアウト組み、またSassを使った、より実践向けの解説本
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 (日本語) 単行本（ソフトカバー） – 2021/2/20
Mana (著)
Chapter 1 最初に知っておこう! Webサイトの基本と必携ツール
Chapter2 ランディングページで学ぶ「レスポンシブWebデザインとフォント」
Chapter3 ブログサイトで学ぶ「装飾とカラムレイアウト」
Chapter4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
Chapter5 イベントサイトで学ぶ「特定ページ作り方とアニメーション」
Chapter6 ギャラリーサイトで学ぶ「動画と画像の使い方」
Chapter7 HTMLやCSSをより早く、より上手に管理できる方法
Chapter8 サイトの投稿と問題解決
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)
【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) (日本語) 単行本 – 2019/3/16
Mana (著)
この本ではカフェのサイト（4ページ）を作成します。
①1ページ目、フルスクリーンWebサイト作成
②2ページ目、2カラムWebサイト作成
③3ページ目、タイル型Webサイト（グリッド レイアウト）作成
④4ページ目、お問い合わせのサイト、フォーム（外部メディアを利用する）
などの4ページを、いろいろなテクニックで作るので、かなりオススメな本です。
デザインカンプの作成（作成してある）からしてあるので本格的です。
デザインカンプは、Adobe XD（無料で利用可能）で作成ですが、Adobe XDの使い方などは載ってないです。
また、Adobe XDはMacの場合、OSのバージョンが古い利用が出来ないです。
Mac10.12だと使用が出来ないので不便かも。
サイトの作成は、index.htmlを作ったら（1ページ目作成）
基本的にコピーして複製して、複製したら、いらない部分を削除して、それを次に2ページ目を作っていく感じです。
テキストエディタはATOMを使用
カスタマイズの仕方も載ってます。
2カラムから3カラムなども載ってます。（バナーなど表示する場合）
レスポンシブの仕方
Webフォント（Google Web Font）使用
CSSリセットはress.cssなど解説
Google Mapの仕方
OGP設定、SNSとかシェアした際の設定
Flexboxなど、他
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)
動くWebデザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
本書はWebサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。
動くWebデザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)
Webディレクションの新・標準ルール 改訂第2版 現場の効率をアップする最新ワークフローとマネジメント (日本語) 単行本（ソフトカバー） – 2020/3/17
Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本（ソフトカバー） – 2020/4/27
Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本（ソフトカバー） – 2020/4/27
初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉 (日本語) 単行本（ソフトカバー） – 2020/2/26
Webサイトを制作するノウハウの学習を「1日30分からはじめる」をテーマに、やさしく・しっかりと伝える本。
タイプや難易度の異なる5つのサンプルサイトを題材に、作り方のノウハウを解説しています。
HTML+CSSの基本から、FlexboxやCSSグリッドといった“流行り”の手法の使い方・使いどころがわかります!
初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉 (日本語) 単行本（ソフトカバー） – 2020/2/26
CSS設計完全ガイド ~詳細解説+実践的モジュール集 (日本語) 単行本（ソフトカバー） – 2020/2/27
CSS設計完全ガイド ~詳細解説+実践的モジュール集 (日本語) 単行本（ソフトカバー） – 2020/2/27
はじめてのWebデザインの教科書 まずは押さえておきたいWebの原則 Kindle版
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉 単行本（ソフトカバー） – 2019/9/25
ネットオウル
ネットオウルのスターサーバー
StarServer
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) 単行本（ソフトカバー） – 2010/4/8
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書 単行本（ソフトカバー） – 2019/3/1
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 大型本 – 2015/11/3
HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本 – 2017/7/21
HTML5 & CSS3 デザインレシピ集 単行本（ソフトカバー） – 2017/2/22
フレキシブルボックスで作る HTML5&CSS3レッスンブック 単行本（ソフトカバー） – 2019/3/18
デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
図書館業務に役立つHTML・PHP入門:Webサイト構築のための基礎を学ぶ 単行本 – 2018/2/16
HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き) 単行本（ソフトカバー） – 2017/8/28
エビスコム (著)
HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門 単行本（ソフトカバー） – 2019/5/1
HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
いちばんやさしい HTML&CSS 入門教室 単行本 – 2018/10/20
たった1日で基本が身に付く! HTML&CSS 超入門 大型本 – 2017/6/15
本書では、Mr.M COFFEEという
カフェのWebサイトを作成します。
サンプルファイルもダウンロードできるので、
素材などを、自分で用意しなくてもいいので、すぐ勉強ができます。
HTML5に対応です。
また、BootstrapのCSSフレームワークでの本も出ています。
同じ
Bootstrap 4 フロントエンド開発の教科書 単行本（ソフトカバー） – 2018/8/25
Dreamweaverレッスンブック CC2019対応 単行本 – 2019/3/18
世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 単行本（ソフトカバー） – 2018/9/26
Amazon
画像素材の売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。
STORES.jp
驚くほど簡単にオンラインストアが作れる！
最短2分で、オンラインストアがつくれる！
だれもがデザイン・カスタマイズし自由にネットショップをつくることができます。
専門的な知識は不要です。
Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法 単行本（ソフトカバー） – 2018/12/26
いま知っておくべき、現場のWebデザイン。
Introduction|Webサイトができるまで
Chapter1|レイアウト
Chapter2|配色
Chapter3|UXデザイン
Chapter4|UI・グラフィックデザイン
Chapter5|モーションデザイン
HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉 単行本（ソフトカバー） – 2018/8/27
内容紹介
技術の進化に左右されないWebサイトの作り方がわかる!
Web制作のプロを目指す方に向けて、
HTML5+CSS3を使ったWebサイトの作り方を解説した入門書の改訂版。
CSSグリッドで作る HTML5&CSS3 レッスンブック 単行本 – 2018/12/25
エビスコム (著)
本書はステップ・バイ・ステップでWebページを作成しながら、HTML と CSS の基本から、グリッドによる自由なレイアウト、モバイルファーストな制作手順、本格的なレスポンシブの設定までを習得していただけるように構成した入門書です。
もくじ
Chapter 1 HTMLでマークアップする
Chapter 2 CSSでレイアウトをはじめる
Chapter 3 パーツの見栄えを整える – 基本
Chapter 4 パーツの見栄えを整える – ボックス
Chapter 5 パーツの見栄えを整える – 応用
Chapter 6 レスポンシブにする
Chapter 7 ページを増やす
Chapter 8 テーブルとフォームを作成する
この本では無料のサーバーはnetlifyなど紹介
https://www.netlify.com
Illustratorの変わりは無料のVectrなど紹介
Vectr
https://vectr.com
Photoshopの変わりは無料の画像編集ツールPhotopeaなど紹介
https://www.photopea.com
文法のチェックの仕方も解説してます。
構文チェック
W3C 「W3C Markup Validation Service」
https://validator.w3.org
フリー画像は、無料のPixabayなど紹介
使用無料の画像やビデオがみつかる最良の場所。
魅力的なフリー画像Pixabay
https://pixabay.com/ja/
今すぐ使えるCSSレシピブック 単行本（ソフトカバー） – 2019/1/29
本書ではCSSのテクニックを豊富なサンプルコードで数多く解説しています。それぞれのテクニックのポイントも丁寧に解説しています。
ペライチ
簡単にホームページ作れる
無料ホームページ作成
たったの３ステップで ホームページを公開できます！
誰にでも使いやすいかんたんな操作であっという間にホームページを全世界に公開できます！
1.テンプレートを選ぶ
2.内容を作る
3.あとは公開ボタンを押すだけ！
「グーペ」
低コストで簡単、プロのようなホームページ作成
ブログ感覚で手軽にお店のホームページを作成
飲食店、美容院、ネイルサロンなどのお店だけではなく
塾、事務所、個人事業主、クリエイター、アイドルまで、
様々な業種のホームページが簡単にお作りいただけます。
PhotoshopやIllustratorなどのソフトは、毎月の利用の料金が高いです。
無料で使えるCanva
Canva
無料ですばらしいグラフィックデザインを共同作業で作成 – Canva
小さな会社&お店の Canva超入門 ~お洒落で目を引くチラシ・ポスター・名刺・ポストカードを無料で作る本 単行本（ソフトカバー） – 2018/5/19
内容紹介
会社やお店の販促ツールを、無料であっという間に作れます!
会社や店舗などを運営していると、必ず必要になるのが、販促ツール。
名刺やショップカード、チラシといった紙媒体や、広告用バナー画像、SNS告知用画像といったWeb媒体も。
Canvaは、これらのデザインを外注しないで自分で作りたい! という方のための、無料サービスです。
本書では、Canvaを使って販促ツールを作る方法をわかりやすく解説。
デザインのポイントや便利なテクニックも紹介します。
Canvaを使って、プロ級のデザインが完成する1冊です!
100倍クリックされる 超Webライティング バズる単語300 単行本 – 2018/12/10
100倍クリックされる 超Webライティング実践テク60 単行本 – 2017/3/2
知識ゼロからはじめる ゆっくり・ていねいJavaScript ES6対応 単行本 – 2019/1/22
商品の説明
ゆっくり・ていねい。そして「楽しく」
JavaScriptはブラウザーを操作し、表示されているWebページのHTMLをリアルタイムで書き換えられるプログラミング言語です。環境設定をほとんどせずに始められる手軽さだけでなく、「ブラウザーを操作する」という特性上、なにをやっているのかがイメージしやすく、またプログラミングをした結果が理解しやすいこともあって、初学者にも取り組みやすい言語として人気があります。
本書はJavaScriptの新しい仕様「ES6」に準拠した書き方をもとに、プログラミングがまったく初めての人でも理解しながら楽しく進められる構成になっています。
確かな力が身につくJavaScript「超」入門 第2版 単行本 – 2019/9/21
PHPしっかり入門教室 使える力が身につく、仕組みからわかる。 単行本（ソフトカバー） – 2018/3/7
内容紹介
Web業界の即戦力になる!
本書はPHPによるWebアプリケーション開発をゼロから学べる教科書です。
初心者の方でも読み進められるように、サンプルデータを使いながら丁寧に解説していきます。HTMLやCSSの知識がなくても、すぐに学習が開始できます。さらに、現場で使える技術を厳選して学んでいけるので、効率よく実務スキルが身につきます。
誰もがあきらめずにすむPHP超入門 単行本 – 2018/12/21
内容紹介
まずは体験、理屈はあとから!
PHPはWebページを作るためのプログラミング言語です。
PHPで書かれたプログラムファイルは、世界のどこかにあるWebサーバーにデータベースとともに置いてあります。
本書では「どうやればいいんだろう?」、「どうなっているんだろう?」は、「やって、見て、理解する」構成にしています。
また初心者がつまづきそうな箇所では豊富なイラストと図解を使って丁寧に解説しているため、途中で挫折するようなことはまずありません。本書を読み終えれば、きっと本格的なPHPの入門書も簡単に読めるようになるはずです。何よりも「PHPは楽しい」と感じていただくことが重要だと考え、本書を執筆しました。
いちばんやさしいGit&GitHubの教本 人気講師が教えるバージョン管理&共有入門 (「いちばんやさしい教本」シリーズ) 単行本（ソフトカバー） – 2018/12/14
内容紹介
実際のワークフローをイメージしながら
実践的なGit/GitHubの使い方が身につく「いちばんやさしい」入門書です。
HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。
HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
HTML5&CSS3しっかり入門教室 読んでみた。
目次
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でモックアップをしてるなども載ってます。
Adobe XD プロトタイピング実践ガイド ~ユーザーの要求に応えるUI/UXデザイン 単行本（ソフトカバー） – 2018/12/18
世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 単行本（ソフトカバー） – 2018/10/5
価格：￥ 64,557（価格変動あり）
Adobe Creative Cloud コンプリート|12か月版|オンラインコード版
03Webページの開発環境
Webページの制作ツール
メモ帳でも、コーディングはできますが、
コーディングに適したテキストエディタを使うと便利です。
など載ってます。
Mac用
CotEditor
軽量プレーンテキストエディタ
すべてはMacのために
このアプリケーションはmacOSのために作られました。CotEditorはMacのアプリケーションがあるべきように振る舞い、Macに調和した優雅なデザインを身にまとっています。それはつまり、このエディタを初めて立ち上げたその日から、多くの機能を直感ですぐに使い始めることができるということです。マニアックな知識を必要とする複雑な設定ファイルはありません。テーマやシンタックス定義も含め、設定はすべて標準的な環境設定ウインドウから行えます。
CotEditorは日本生まれ。エンコーディング判定や和欧混ざった文書の描画、縦書き表示など、日本語特有の問題もきちんと対応します。
Windows用
サクラエディタ
https://sakura-editor.github.io
他に、テキストエディタ
Sublime Text
Dreamweaver
なども載ってます。
自分で使いやすいエディタを使うといいと思います。
徹底解説Visual Studio Code 単行本 – 2019/9/27
本間咲来 (著)
さまざまなブラウザ
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
jQuery標準デザイン講座 大型本 – 2015/12/16
内容紹介
作って身につく・仕組みがわかる 30レッスン!
本書は、HTMLとCSSの知識はあってもJavaScriptやjQueryには触れたことがない初心者を対象にした、Web制作向けのjQuery学習書です。
作りながら学ぶjQueryデザインの教科書 単行本 – 2014/5/21
「あのサイトみたいに! 」を実現できる! 職業デザイナーでなくてもWebの表現を豊かにできる本 単行本 – 2017/9/16
10分でわかるアニメーションの基本
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
山崎 響 (著)
挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。
HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
