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つ、タグを入力していく、本ではないです。

人によっては、とまどう本かも。
(読み手を選ぶかも?。)

このようなサイト

HTML5+CSS3の新しい教科書 改訂新版

また、サンプルには、本内には書かれてるけど、
ファイルに、無いのもあるので、自分でタグをうって、実際に作業をしないと、わからない部分もあるかもです。

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 実践編:レスポンシブサイトをつくる

Lesson 1 Webサイトの構造を理解する

01 Webサイトが表示される仕組み
Webページが表示されるまでの流れ

02 Webページは何でできている?
Webページの仕組み

03 HTMLの役割とバージョン
ハイパーリンクとマークアップの意味
HTMLのバージョン

04 CSSの機能と役割
ページの飾りつけを指定する言語
CSSが登場したのは1996年です。

05 HTMLを作成するための専用アプリケーション
テキストエディタの解説

06 Web制作に利用するアプリケーション
Webサイトで使う素材とアプリケーション

07 Webブラウザの役割と種類
Webブラウザの種類

08 Webページの構造を見てみよう
Webページを構成する要素
基本的なレイアウトのパターン

 


 

Lesson 2 制作に入る前の準備

本ではLesson2~12の解説で使用したサンプルデータをご用意しましたので、ご利用ください。
(Lesson1のサンプルデータははじめから含まれておりません)
サンプルデータ

01 Webページができるまでの流れ
HTMLを書く前に決めておくこと

02 Webサイトのファイルを整理して格納する
ファイル名と拡張子の関係

03 ファイルとフォルダのネーミング
Webサイトで扱うファイルのネーミング

04 Webブラウザが持つデフォルトのスタイル
デフォルトのスタイル情報

05 Webサイト制作で使う単位
相対単位と絶対単位

 


 

Lesson 3 HTMLでページの骨格をつくる

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で変わった要素の分類

 


 

Lesson 4 HTML&CSSの基本ルール

01 HTMLの基本ルール
HTMLの基本のバージョン

02 マークアップとはどんなもの?
テキストに意味を与えるマークアップ

03 マークアップの実例を見てみよう
マークアップの流れ

04 CSSの基本ルール
HTMLにCSSを適用する

05 よく使うセレクタを知る
基本的なセレクタ

06 疑似クラスと疑似要素
疑似クラスの使い方

07 セレクタを使った実例
偶数番目の要素だけスタイルを適用する

 


 

Lesson 5 文字・見出し・段落の設計

01 基本になる文字サイズを決める
文字の大きさは重要な要素

02 文字の単位はどれを選ぶ?
文字の大きさの単位

03 文字の行間を調整する
テキストの読みやすさ

04 書体を決める
書体の選び方

05 文字に色をつける
Webサイトの配色を考える

06 見出しのスタイルとジャンプ率
h要素を使い分ける

07 連続した見出しのマージンを効率よく調整する
見出しの余白

08 読みやすい段落の設定
p要素を設定

09 段落の「字下げ」を表現する
字下げの表現

10 文章の両端揃えと字間の調節
text-alignプロパティ

 


 

Lesson 6 リンクと画像の設定

01 テキストリンクの色を設定する
テキストリンクの色を変える

02 ブロック別にリンクの色を変える
リンクの色

03 Webサイトで使う画像の形式
画像形式を適切に選ぶメリット

04 画像をCSSで装飾する
画像を使ったレイアウト

05 画像にリンクを設定する
画像へのリンク

06 CSSのみでボタンを作成する
CSSでボタンを作成

 


 

Lesson 7 リストとテーブルを組む

01 リストはどんな場所で使う?
リストの使いどころを知る

02 ul 要素とol 要素の使い分け
リスト要素の違い

03 リストマークを変更する
表示される仕組み

04 複雑なリストを表現する
入れ子の表現

05 対になる情報をリストで表現
定義リスト

06 テーブルの基本構造
表組み

07 表組みにキャプションをつける
表組みにタイトルをつける

08 セルを結合する
表組みのセル

 


 

Lesson 8 ナビゲーションをつくる

01 ナビゲーションの役割を考える
ナビゲーションが果たす役割

02 レスポンシブデザインにおけるナビゲーションの基本
ナビゲーションの表示

03 Flexboxを使ったナビゲーション
Flexboxを使ったレイアウト

04 リンクエリアを広げる
デフォルトのリンクの範囲

05 下層ページをメニュー表示するドロップダウンメニュー
ドロップダウンメニュー

06 パンくずナビゲーション
パンくずナビゲーション

 


 

Lesson 9 フォームをつくる

01 フォームの仕組みと構成するパーツ
情報の受け渡しにはプログラムが必要

02 フォームを使いやすく工夫する
クリックできるエリアを広げる

03 フォームをマークアップする要素
要素ごとの見え方の違い

04 HTML5で強化されたtype属性
HTML5で追加されたtype属性

05 フレームワークを利用してフォームを装飾する
CSSでフォームをスタイリング

 


 

Lesson 10 Webページをレイアウトする

01 ボックスモデルを理解する
ボックスモデルとは

02 レイアウトの考え方と設計
ページを構成するブロック

03 要素をグループ化する
レイアウトに使用するタグ

04 コメントアウトを活用する
コメントアウトとは

05 floatプロパティの性質とclearfixを使うポイント
floatプロパティ

06 境界線と余白を調整する
プロパティの範囲

07 positionを使ったレイアウト
positionレイアウトとpositionプロパティ

08 Flexboxを使ったレイアウト
Flexboxとは

 


 

Lesson 11 HTML5+CSS3の新機能

01 HTML5で新しく加わった機能や要素
HTML5の特徴

02 ページのセクショニングに関連する要素
nav要素の使い方

03 CSS3で加わったプロパティ
CSS3で表現できるデザイン

04 CSS3で加わった疑似クラス
疑似クラス

05 複雑なグラデーションを簡単に表現する
グラデーション

06 フレームワークを利用してWeb制作の効率を上げる
フレームワーク

 


 

Lesson 12 実践編:レスポンシブサイトをつくる

実践編で、レスポンシブサイトをつくるとなってますが、
人によっては難しいかも。

ここまで学んでことの総まとめとして、4ページのサイトを作成します。

実際に完成したサイトのソースなどの解説は載ってます。

01 コーディングに入る前の準備
デザインカンプの作成

sketchを使ったデザインカンプの作成の例など載ってますが、
実際の操作などの解説はないです。

サイトの構成などの解説はありますが。

02 共通化できるHTMLを作成する
コンテンツの共通部分

03 レスポンシブWebデザインのCSSを記述する
ブラウザの初期スタイル

04 トップページをつくる

05 「About」ページをつくる
06 「News」ページをつくる
07 「Contact」ページをつくる

 


 

HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉 単行本(ソフトカバー) – 2018/8/27

本書は、2018年7月、現在に書かれてたものです。と記載されます。

おすすめ