HTML5＋CSS3の新しい教科書 改訂新版 読んでみた。
［記事公開日］2019/02/07
［最終更新日］2024/09/23
Amazon：HTML+CSSデザイン
https://amzn.to/4a0Z85A
Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本（ソフトカバー） – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)
Web制作入門書のロングセラーが、最新仕様にアップデート!
https://amzn.to/47xqNv7
本書の章構成
Lesson1 Webデザインの世界を知る
Lesson2 Webサイトを設計する
Lesson3 HTMLの役割とできること
Lesson4 CSSの役割とできることLesson5 Webサイトを構成する素材
Lesson6 Webサイトを表現する色
Lesson7 Webサイトを公開する
Lesson8 Webサイトを運用する
Lesson9 Webサイトを制作する
作って学ぶ HTML+CSSグリッドレイアウト 単行本（ソフトカバー） – 2024/2/26
エビスコム (著)
「難しい」と敬遠していたCSSグリッドがきちんと身につく。
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デザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本（ソフトカバー） – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)
Webサイト管理のきほん 業務と技術の知識が身につく 単行本（ソフトカバー） – 2022/7/21
谷口 元紀 (著)
Webサイト管理にまつわる「業務」と「技術」の基本知識がこれ1冊でわかる!
スラスラわかるHTML&CSSのきほん 第3版 単行本（ソフトカバー） – 2022/7/9
狩野 祐東 (著)
1つのストーリーに沿ってWebサイト作りとHTML&CSSの基本がスラスラ学べる、入門書の決定版!
第3版では現代のトレンドにあわせて制作するサイトを一新。PC・モバイル端末に対応したサイト作りの全手順を、図入りでとことん丁寧に解説しています。
増補改訂版
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版] 単行本（ソフトカバー） – 2022/1/7
服部 雄樹 (著)
美しいデザインでサイト制作の知識とワザが「1冊で」身につく本格入門
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本(特典:すぐにサイト作成を開始できる! HTMLスターターキット&最新技術バリアブルフォントの解説PDF) 単行本（ソフトカバー） – 2021/10/14
Capybara Design 竹内 直人 (著), 竹内 瑠美 (著)
本書は手を動かしてWebサイトを作りながら
HTML/CSSとWebデザインの基本を楽しく学べる入門書です。
動くWebデザイン アイディア帳 実践編 単行本（ソフトカバー） – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)
本書は、好評の「動くWebデザイン アイディア帳」の姉妹本です。
HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉 単行本（ソフトカバー） – 2018/8/27
本書は、2018年7月、現在に書かれてたものです。と記載されます。
この本、
ダウンロードのサンプルデータが、
人によっては、わかりにくいかもです。
本内に、サンプルのURLなど記載とかないです。
実際にサンプルのファイルを開いて見れば、なんとなくわかる部分もあると思います。
Web制作の現場は、この数年で新たな転換期を迎えています。
この本は、始めて
HTMLやCSSなどでWebサイトを作りたい人は、戸惑う箇所など多いかも。
内容は良い本だと思います。
Lesson 3からWebページの作成に入りますが、
いきなり仮完成されたサイト（コーディングされてる）なので、
1つ1つ、タグを入力していく、本ではないです。
人によっては、とまどう本かも。
（読み手を選ぶかも？。）
このようなサイト
また、サンプルには、本内には書かれてるけど、
ファイルに、無いのもあるので、自分でタグをうって、実際に作業をしないと、わからない部分もあるかもです。
4-7などは、HTMLのソースは載ってなく、完成品しかないので、人によっては、とても読みにくい箇所もあります。
目次
HTML5＋CSS3の新しい教科書 改訂新版 読んでみた。
Lesson 1 Webサイトの構造を理解する
Lesson 2 制作に入る前の準備
Lesson 3 HTMLでページの骨格をつくる
Lesson 4 HTML&CSSの基本ルール
Lesson 5 文字・見出し・段落の設計
Lesson 6 リンクと画像の設定
Lesson 7 リストとテーブルを組む
Lesson 8 ナビゲーションをつくる
Lesson 9 フォームをつくる
Lesson 10 Webページをレイアウトする
Lesson 11 HTML5+CSS3の新機能
Lesson 12 実践編:レスポンシブサイトをつくる
Webデザインの基本きちんと入門[第2版] 単行本（ソフトカバー） – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!
教科書では教えてくれないHTML&CSS 単行本（ソフトカバー） – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。
コンバージョンを上げるWebデザイン改善集 単行本（ソフトカバー） – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。
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デザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
本書はWebサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。
CSS設計完全ガイド ~詳細解説+実践的モジュール集 (日本語) 単行本（ソフトカバー） – 2020/2/27
HTML5＋CSS3の新しい教科書 改訂新版 読んでみた。
HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉 単行本（ソフトカバー） – 2018/8/27
目次
Lesson 1 Webサイトの構造を理解する
Lesson 2 制作に入る前の準備
Lesson 3 HTMLでページの骨格をつくる
Lesson 4 HTML&CSSの基本ルール
Lesson 5 文字・見出し・段落の設計
Lesson 6 リンクと画像の設定
Lesson 7 リストとテーブルを組む
Lesson 8 ナビゲーションをつくる
Lesson 9 フォームをつくる
Lesson 10 Webページをレイアウトする
Lesson 11 HTML5+CSS3の新機能
Lesson 12 実践編:レスポンシブサイトをつくる
01 Webサイトが表示される仕組み
Webページが表示されるまでの流れ
02 Webページは何でできている？
Webページの仕組み
03 HTMLの役割とバージョン
ハイパーリンクとマークアップの意味
HTMLのバージョン
04 CSSの機能と役割
ページの飾りつけを指定する言語
CSSが登場したのは1996年です。
05 HTMLを作成するための専用アプリケーション
テキストエディタの解説
06 Web制作に利用するアプリケーション
Webサイトで使う素材とアプリケーション
07 Webブラウザの役割と種類
Webブラウザの種類
08 Webページの構造を見てみよう
Webページを構成する要素
基本的なレイアウトのパターン
本ではLesson2～12の解説で使用したサンプルデータをご用意しましたので、ご利用ください。
（Lesson1のサンプルデータははじめから含まれておりません）
サンプルデータ
01 Webページができるまでの流れ
HTMLを書く前に決めておくこと
02 Webサイトのファイルを整理して格納する
ファイル名と拡張子の関係
03 ファイルとフォルダのネーミング
Webサイトで扱うファイルのネーミング
04 Webブラウザが持つデフォルトのスタイル
デフォルトのスタイル情報
05 Webサイト制作で使う単位
相対単位と絶対単位
Lesson 3からWebページの作成に入ります。
ただ、いきなり仮完成されたサイトなので、
1つ1つ、HTMLで作成していく本ではないので
初めての方は、とまどう本かも。
01 head要素とbody要素
head要素とbody要素の違い
02 head要素の書き方
head要素で必ず使う要素
03 body要素内に配置される要素の構造と性質
HTML5の要素の分類
04 HTMLにCSSを組み込む
CSSを組み込む3つの方法
05 ページの情報を伝えるmeta要素
文字コードを記述する
HTML5で変わった要素の分類
01 HTMLの基本ルール
HTMLの基本のバージョン
02 マークアップとはどんなもの？
テキストに意味を与えるマークアップ
03 マークアップの実例を見てみよう
マークアップの流れ
04 CSSの基本ルール
HTMLにCSSを適用する
05 よく使うセレクタを知る
基本的なセレクタ
06 疑似クラスと疑似要素
疑似クラスの使い方
07 セレクタを使った実例
偶数番目の要素だけスタイルを適用する
01 基本になる文字サイズを決める
文字の大きさは重要な要素
02 文字の単位はどれを選ぶ？
文字の大きさの単位
03 文字の行間を調整する
テキストの読みやすさ
04 書体を決める
書体の選び方
05 文字に色をつける
Webサイトの配色を考える
06 見出しのスタイルとジャンプ率
h要素を使い分ける
07 連続した見出しのマージンを効率よく調整する
見出しの余白
08 読みやすい段落の設定
p要素を設定
09 段落の「字下げ」を表現する
字下げの表現
10 文章の両端揃えと字間の調節
text-alignプロパティ
01 テキストリンクの色を設定する
テキストリンクの色を変える
02 ブロック別にリンクの色を変える
リンクの色
03 Webサイトで使う画像の形式
画像形式を適切に選ぶメリット
04 画像をCSSで装飾する
画像を使ったレイアウト
05 画像にリンクを設定する
画像へのリンク
06 CSSのみでボタンを作成する
CSSでボタンを作成
01 リストはどんな場所で使う？
リストの使いどころを知る
02 ul 要素とol 要素の使い分け
リスト要素の違い
03 リストマークを変更する
表示される仕組み
04 複雑なリストを表現する
入れ子の表現
05 対になる情報をリストで表現
定義リスト
06 テーブルの基本構造
表組み
07 表組みにキャプションをつける
表組みにタイトルをつける
08 セルを結合する
表組みのセル
01 ナビゲーションの役割を考える
ナビゲーションが果たす役割
02 レスポンシブデザインにおけるナビゲーションの基本
ナビゲーションの表示
03 Flexboxを使ったナビゲーション
Flexboxを使ったレイアウト
04 リンクエリアを広げる
デフォルトのリンクの範囲
05 下層ページをメニュー表示するドロップダウンメニュー
ドロップダウンメニュー
06 パンくずナビゲーション
パンくずナビゲーション
01 フォームの仕組みと構成するパーツ
情報の受け渡しにはプログラムが必要
02 フォームを使いやすく工夫する
クリックできるエリアを広げる
03 フォームをマークアップする要素
要素ごとの見え方の違い
04 HTML5で強化されたtype属性
HTML5で追加されたtype属性
05 フレームワークを利用してフォームを装飾する
CSSでフォームをスタイリング
01 ボックスモデルを理解する
ボックスモデルとは
02 レイアウトの考え方と設計
ページを構成するブロック
03 要素をグループ化する
レイアウトに使用するタグ
04 コメントアウトを活用する
コメントアウトとは
05 floatプロパティの性質とclearfixを使うポイント
floatプロパティ
06 境界線と余白を調整する
プロパティの範囲
07 positionを使ったレイアウト
positionレイアウトとpositionプロパティ
08 Flexboxを使ったレイアウト
Flexboxとは
01 HTML5で新しく加わった機能や要素
HTML5の特徴
02 ページのセクショニングに関連する要素
nav要素の使い方
03 CSS3で加わったプロパティ
CSS3で表現できるデザイン
04 CSS3で加わった疑似クラス
疑似クラス
05 複雑なグラデーションを簡単に表現する
グラデーション
06 フレームワークを利用してWeb制作の効率を上げる
フレームワーク
実践編で、レスポンシブサイトをつくるとなってますが、
人によっては難しいかも。
ここまで学んでことの総まとめとして、4ページのサイトを作成します。
実際に完成したサイトのソースなどの解説は載ってます。
01 コーディングに入る前の準備
デザインカンプの作成
sketchを使ったデザインカンプの作成の例など載ってますが、
実際の操作などの解説はないです。
サイトの構成などの解説はありますが。
02 共通化できるHTMLを作成する
コンテンツの共通部分
03 レスポンシブWebデザインのCSSを記述する
ブラウザの初期スタイル
04 トップページをつくる
05 「About」ページをつくる
06 「News」ページをつくる
07 「Contact」ページをつくる
HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉 単行本（ソフトカバー） – 2018/8/27
本書は、2018年7月、現在に書かれてたものです。と記載されます。
