HTML5+CSS3の新しい教科書 改訂新版 読んでみた。

[記事公開日]2019/02/07

[最終更新日]2021/10/24

Webデザインの新しい教科書シリーズ改訂3版

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サイトを制作する

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
こもりまさあき (著), 赤間 公太郎 (著)

 


 

【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デザイン アイディア帳 実践編 単行本(ソフトカバー) – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)
本書は、好評の「動くWebデザイン アイディア帳」の姉妹本です。

動くWebデザイン アイディア帳 実践編 単行本(ソフトカバー) – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)

 


 
【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 単行本(ソフトカバー) – 2021/8/27
田村 章吾 (著)
本書では、業務でWebサイトをコーディングしていく人を対象として、必要なCSSの知識、CSS設計の基本、CSSを効率的に書くためのSassの基本を解説しました。後半はサンプルサイトのコーディングプロセスを通して、実践的な制作ノウハウを学びます。

【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 単行本(ソフトカバー) – 2021/8/27
田村 章吾 (著)

 


 
初心者からちゃんとしたプロになる Adobe XD基礎入門〈Webデザイン、ワイヤーフレーム、プロトタイピング〉 単行本(ソフトカバー) – 2021/9/22
相原 典佳 (著), 沖 良矢 (著), 濱野 将 (著)
制作フェーズに応じたプロの使い方がわかる!
Webサイトやモバイルアプリの分野で広く使われてるデザイン・プロトタイピングツールであるAdobe XDの入門書。

初心者からちゃんとしたプロになる Adobe XD基礎入門〈Webデザイン、ワイヤーフレーム、プロトタイピング〉 単行本(ソフトカバー) – 2021/9/22
相原 典佳 (著), 沖 良矢 (著), 濱野 将 (著)

個人サイトを作ろう! テンプレートですぐできる! すぐに身につく! HTML&CSS 単行本(ソフトカバー) – 2021/8/24
ガタガタ (著)
はじめてでもHTMLとCSSの基本をしっかり学べる
ウェブサイトを自分で作ってみたい人
昔、個人サイトを作っていた人

個人サイトを作ろう! テンプレートですぐできる! すぐに身につく! HTML&CSS 単行本(ソフトカバー) – 2021/8/24
ガタガタ (著)

 


 

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

 


 

また、Bootstrapなど使用しての作り方など。

Bootstrap 4 フロントエンド開発の教科書 単行本(ソフトカバー) – 2018/8/25

 


 

Webデザインの基本きちんと入門[第2版] 単行本(ソフトカバー) – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!

Webデザインの基本きちんと入門[第2版] 単行本(ソフトカバー) – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),

教科書では教えてくれないHTML&CSS 単行本(ソフトカバー) – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。

教科書では教えてくれないHTML&CSS 単行本(ソフトカバー) – 2021/7/17
狩野 祐東 (著)

 


 

Webデザイン必携。 プロにまなぶ現場の制作ルール84 Kindle版
北村 崇 (著), 浅野 桜 (著) 形式: Kindle版

【Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた新しいルールブック】

Webデザイン必携。 プロにまなぶ現場の制作ルール84 単行本 – 2016/3/23
北村 崇 (著), 浅野 桜 (著)

 


 

コンバージョンを上げるWebデザイン改善集 単行本(ソフトカバー) – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。

コンバージョンを上げるWebデザイン改善集 単行本(ソフトカバー) – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),

 


 

Webサイト制作の「正しい基礎」を伝える入門書の改訂3版。

Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。 単行本(ソフトカバー) – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)

 


 

豊富な作例で学ぶ 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 (著)

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16
Mana (著)

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) (日本語) 単行本 – 2019/3/16

この本ではカフェのサイト(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など、他

 


 

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の基礎を少し学んだが、デザインを工夫したサイトを作成したい方向けへの教材となっています。

 


 

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歩を踏み出すための「動きの逆引き事典」です。

動くWebデザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)

 


 

Webディレクションの新・標準ルール 改訂第2版 現場の効率をアップする最新ワークフローとマネジメント (日本語) 単行本(ソフトカバー) – 2020/3/17

 


 

初心者からちゃんとしたプロになる HTML+CSS実践講座 (日本語) 単行本(ソフトカバー) – 2020/8/28

Webサイトを制作するノウハウの学習を「1日30分からはじめる」をテーマに、やさしく・しっかりと伝える本。

ゼロから学ぶHTML&CSSの基本 (日本語) 単行本 – 2020/9/1

Webを制作して公開したいときに一番最初に読む本です!

 


 

初心者からちゃんとしたプロになる 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サイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本(ソフトカバー) – 2020/4/27

Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き (日本語) 単行本(ソフトカバー) – 2020/4/27

 


 

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ [プリント・レプリカ] Kindle版

HTML&CSS コーディング・プラクティスブック 2 実践シリーズ [プリント・レプリカ] Kindle版

HTML&CSS コーディング・プラクティスブック 3 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著)
2020年7月23日 初版発行

 


 

米国シリコンバレー発祥、世界最大級のオンライン学習プラットフォーム!
Udemy

 


 

無料
Udemy
Udemy / 【駆け出し歓迎】HTML&CSS 初級編 【初心者向け】HTMLファイルを作成と編集をして、CSSファイルでスタイリングしよう

Udemy
Udemy / 【駆け出し歓迎】CSS | 手を動かしてマスターするwebデザイン | Firebaseでサイトの公開 プログラミング初心者向けにコーポレートサイトを作りながら、CSSの学習 + Firebaseでサイトを公開

Udemy
Udemy / AWS:はじめてのAmazon Web Services AWSが初めての人を対象に、AWSの概要を理解した上で基礎的な構築ができるようになるコースです。ハンズオンでAWS上にサービスを構築することで、未経験から、AWSでWordPressサイトを構築できるようになります。

Udemy
Udemy / ざっくり理解するHTML5・CSS3 | HTML5とCSS3を使って、お店のホームページ(HP)を作ってみよう!

 


 

はじめてのWebデザインの教科書 まずは押さえておきたいWebの原則 Kindle版

 


 

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉 単行本(ソフトカバー) – 2019/9/25

 


 

パソコンが超苦手でもプロ級のキレイなホームページが簡単に作れる
とりあえずHP

パソコンが苦手な方のために、徹底研究して開発したホームページ作成ツールです。
写真や文章を入力していくだけで、ホームページがあっという間に完成します。
誰でも使いやすい、画期的なホームページ作成ツール

 


 

徹底解説Visual Studio Code 単行本 – 2019/9/27
本間咲来 (著)

 


 

Kindle版は、現在セール中です。¥1,069

いちばんやさしい HTML&CSS 入門教室 Kindle版

いちばんやさしい HTML&CSS 入門教室 単行本 – 2018/10/20

 


 

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 単行本(ソフトカバー) – 2019/3/22

 


 

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 単行本(ソフトカバー) – 2018/6/22

 


 

いちばんやさしい JavaScript 入門教室 単行本 – 2018/6/21

 


 

いちばんやさしい Python入門教室 単行本 – 2017/4/8

 


 

いちばんやさしい Linuxコマンド入門教室 単行本 – 2018/2/10

 


 

いちばんやさしい SEO 入門教室 単行本 – 2017/12/21

 


 

いちばんやさしい ディープラーニング 入門教室 単行本 – 2018/2/22

 


 

いちばんやさしい Git 入門教室 単行本 – 2019/8/23
大澤 文孝 (著)

 


 

いちばんやさしい Vue.js 入門教室 単行本 – 2019/4/4
大津 真 (著)

 


 

いちばんやさしい Googleアナリティクス 入門教室 単行本 – 2019/4/20

 


 

いちばんやさしい SQL 入門教室 単行本 – 2019/5/23
矢沢 久雄 (著)

 


 

いちばんやさしい Java 入門教室 単行本 – 2018/12/21
廣瀬 豪 (著)

 


 

これから学ぶHTML/CSS 単行本(ソフトカバー) – 2019/6/21

 


 

子どものためのウェブデザイン入門 (プログラミング はじめのいっぽ絵本) 単行本 – 2019/4/6

 


 

Webデザイン知識 入門編: Webサイト制作の学習を始めるときに一番はじめに読んでほしい本 (MyISBN – デザインエッグ社) オンデマンド (ペーパーバック) – 2019/4/22

 


 

Q&Aで考えるセキュリティ入門 「木曜日のフルット」と学ぼう!〈漫画キャラで学ぶ大人のビジネス教養シリーズ〉 単行本(ソフトカバー) – 2019/2/1

本書の章構成
第1章 情報セキュリティの基本
第2章 PCとネットワークのセキュリティ
第3章 スマートフォンとSNSのセキュリティ
第4章 企業の情報セキュリティ対策

 


 

デザイン・クリエイティブ業界を目指す人のための ポートフォリオ見本帳 単行本(ソフトカバー) – 2019/2/1

内容紹介
内定を勝ち取ったポートフォリオの実例32点掲載。

 


 

STORES.jp
驚くほど簡単にオンラインストアが作れる!
最短2分で、オンラインストアがつくれる!

だれもがデザイン・カスタマイズし自由にネットショップをつくることができます。
専門的な知識は不要です。

 


 

Amazon
画像素材の売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。

Amazon 画像素材の売れ筋ランキング

 


 

HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本(ソフトカバー) – 2018/7/20

 


 

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のきほん 第2版 単行本 – 2018/4/14
狩野 祐東 (著)

 


 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA) 単行本 – 2016/10/27

 


 

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時間ごとに更新されます。

Amazon 画像素材の売れ筋ランキング

 


 

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

HTML5+CSS3の新しい教科書 改訂新版 読んでみた。

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月、現在に書かれてたものです。と記載されます。

 


 

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 単行本 – 2019/3/16

この本、おすすめです。1冊、持っておくと便利な書籍です。

Manaさん、「Webクリエイターボックス」のブログを運営。
Webに関する記事などを紹介しています。

Webクリエイターボックス
https://www.webcreatorbox.com/

Webサイト制作インストラクターもしてます。
テキストエディタはATOMなどで解説
カフェのサイトを作成しながら学んでいけます。
デザインカンプなどもあり
Web制作に必要な知識が、この1冊で身につく!

 


 

現場で使える最低限の知識がしっかりと身につく HTML/CSS デザイン TextBook 単行本 – 2019/3/1

 


 

ヘルプサイトの作り方 単行本(ソフトカバー) – 2019/2/16

 


 

攻めるWeb担当者の教科書1

ホームページ改善の解決メソッド37〈アクセスアップ・コンバージョンアップ・コンテンツ・ブランディング・新技術対応〉 単行本(ソフトカバー) – 2019/2/26

 


 

Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法 単行本(ソフトカバー) – 2018/12/26

いま知っておくべき、現場のWebデザイン。

Introduction|Webサイトができるまで
Chapter1|レイアウト
Chapter2|配色
Chapter3|UXデザイン
Chapter4|UI・グラフィックデザイン
Chapter5|モーションデザイン

 


 

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のテクニックを豊富なサンプルコードで数多く解説しています。それぞれのテクニックのポイントも丁寧に解説しています。

 


 

jQuery標準デザイン講座 大型本 – 2015/12/16

内容紹介
作って身につく・仕組みがわかる 30レッスン!
本書は、HTMLとCSSの知識はあってもJavaScriptやjQueryには触れたことがない初心者を対象にした、Web制作向けのjQuery学習書です。

 


 

作りながら学ぶjQueryデザインの教科書 単行本 – 2014/5/21

 


 

「あのサイトみたいに! 」を実現できる! 職業デザイナーでなくてもWebの表現を豊かにできる本 単行本 – 2017/9/16
10分でわかるアニメーションの基本

 


 

ペライチ
簡単にホームページ作れる
無料ホームページ作成

たったの3ステップで ホームページを公開できます!
誰にでも使いやすいかんたんな操作であっという間にホームページを全世界に公開できます!

1.テンプレートを選ぶ
2.内容を作る
3.あとは公開ボタンを押すだけ!

 


 
「グーペ」
低コストで簡単、プロのようなホームページ作成
ブログ感覚で手軽にお店のホームページを作成

飲食店、美容院、ネイルサロンなどのお店だけではなく
塾、事務所、個人事業主、クリエイター、アイドルまで、
様々な業種のホームページが簡単にお作りいただけます。

 


 
PhotoshopやIllustratorなどのソフトは、毎月の利用の料金が高いです。
無料で使えるCanva

Canva
無料ですばらしいグラフィックデザインを共同作業で作成 – Canva

https://www.canva.com/ja_jp/

 


 

小さな会社&お店の 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「超」入門 第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の使い方が身につく「いちばんやさしい」入門書です。

 


 

いちばんやさしい HTML&CSS 入門教室 単行本 – 2018/10/20

 


 

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 単行本(ソフトカバー) – 2019/3/22

 


 

Adobe XD プロトタイピング実践ガイド ~ユーザーの要求に応えるUI/UXデザイン 単行本(ソフトカバー) – 2018/12/18

 


 

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 単行本(ソフトカバー) – 2018/10/5

 


 

価格:¥ 64,557(価格変動あり)
Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

 


 

いちばんやさしい PHP の教本 第2版 人気講師が教える実践 Web プログラミング (「いちばんやさしい教本」) 単行本(ソフトカバー) – 2017/5/25

 


 

TECHNICAL MASTER はじめてのPHPプロフェッショナル開発 PHP7対応 単行本 – 2019/2/26

 


 

スラスラ読める Rubyふりがなプログラミング (ふりがなプログラミングシリーズ) 単行本(ソフトカバー) – 2019/3/15

 


 

3ステップでしっかり学ぶ Ruby入門 大型本 – 2018/1/26

 


 

いきなりはじめるPHP~ワクワク・ドキドキの入門教室~ 大型本 – 2011/12/9

 


 

気づけばプロ並みPHP 改訂版–ゼロから作れる人になる! 単行本(ソフトカバー) – 2017/2/18

 


 

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉 単行本(ソフトカバー) – 2019/8/27
水野 史土 (著)

 


 

PHPフレームワーク Laravel実践開発 単行本 – 2019/7/26

 


 

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践 単行本 – 2018/6/21

 


 

PHPしっかり入門教室 使える力が身につく、仕組みからわかる。 単行本(ソフトカバー) – 2018/3/7

 


 

PHPの絵本 第2版 Webアプリ作りが楽しくなる新しい9つの扉 単行本(ソフトカバー) – 2017/4/14

 


 

PHP7+MariaDB/MySQLマスターブック 単行本(ソフトカバー) – 2018/1/30

 


 

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ) 大型本 – 2017/11/25

 


 

ゼロからわかる Ruby 超入門 (かんたんIT基礎講座) 単行本(ソフトカバー) – 2018/11/22

LINEで送る
Pocket

おすすめ