6ステップでマスターする HTML+CSSデザイン 読んでみた。

[記事公開日]2017/03/09

[最終更新日]2021/11/06

Webサイトを作りたい、Webデザインとか勉強するなら、
誰でも1度は手にしたことあるのある、エビスコム (著)の本。
エビスコムはコンピュータやインターネット関係の書籍を中心に活動しています。

いろいろな本を、エビスコムは出していて、わかりやすくて有名です。

この
6ステップでマスターする 「最新標準」HTML+CSSデザインの書籍。
他の方も言ってますが、出版社がマイナビ出版です。
本を出す出版社によっては、本の内容が、今までのエビスコムとは、ちょっと違う感じ?。
とか、内容がいまいちいとか、わかりにくいとかあります。
良い本なのに、出版社によって発売され、とれも読みづらいなど。
本は、読み手によって理解したとか。理解できないとか。いろいろとあると思いますが。

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)
6ステップでマスターする 「最新標準」HTML CSSデザイン(固定レイアウト版) Kindle版



目次
6ステップでマスターする HTML+CSSデザイン 読んでみた。
CHAPTER1 下準備
CHAPTER2 トップページの作成 – コンテンツ編
CHAPTER3 トップページの作成 – ナビゲーション編
CHAPTER4 コンテンツページの作成
CHAPTER5 記事一覧ページの作成
CHAPTER6 アレンジ

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)

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/

自分は、出版社がソシムの時の
HTML5&CSS3デザインブック
(ステップバイステップ形式でマスターできる)も持ってます。

HTML5&CSS3デザインブックは、
とても、わかりやすい本で、発売日が2014年なのに、今だに売れていて人気のある書籍です。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる) 単行本 – 2014/10/28
エビスコム (著)

Webスクールに通ってた時、生徒は、みんな持っていました。

 


 

プロの「引き出し」を増やす HTML+CSSコーディングの強化書 単行本(ソフトカバー) – 2021/11/29
草野 あけみ (著)
HTML・CSSの基本は覚えたけど、デザインカンプから情報を読み取って、イチからコーディングするのはまだ無理……
本書はそんな方に向けたものです。
制作現場で通用する“コーディング力”を強化するには、豊富なパターンの実践練習を繰り返すのが、遠いようで一番の近道。
そのために、本書では100通り以上のサンプルを使って、HTML+CSSのコーディング練習を積み重ねるスタイルで構成しました。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書 単行本(ソフトカバー) – 2021/11/29
草野 あけみ (著)

 


 

Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集 単行本(ソフトカバー) – 2021/12/22
久保田 涼子 (著)
35000部突破した大ベストセラーが
最新のWebデザインの見本集を盛り込んで4年ぶりの大改訂!

Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集 単行本(ソフトカバー) – 2021/12/22
久保田 涼子 (著)

 


 

【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 単行本(ソフトカバー) – 2020/6/1
エビスコム (著)

 


 
【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 竹内 直人 (著), 竹内 瑠美 (著)

 


 

今では、オンラインで学べるサービスもいろいろあります。
無料(有料)
ドットインストールなどは、昔は、無料で多く学べましたが、現在では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

 


 
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

 


 
1週間でGoogleアナリティクス4の基礎が学べる本 (1週間で基礎が学べるシリーズ) 単行本(ソフトカバー) – 2021/9/22
窪田 望 (著), 江尻 俊章 (著), 木田 和廣 (著),
大幅に改訂されたWebマーケティングツール
「Googleアナリティクス4」の基礎と活用法を
最前線のWebマーケッターたちがやさしく解説!

1週間でGoogleアナリティクス4の基礎が学べる本 (1週間で基礎が学べるシリーズ) 単行本(ソフトカバー) – 2021/9/22
窪田 望 (著), 江尻 俊章 (著), 木田 和廣 (著),

 


 

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

 


 

WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

WebデザインのためのPhotoshop+Illustratorテクニック[2020/2019対応] 単行本(ソフトカバー) – 2020/8/1
瀧上 園枝 (著)

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版) 単行本(ソフトカバー) – 2017/3/30
瀧上 園枝 (著)

 


 

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

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

 


 

動くWebデザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
本書はWebサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。

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

 


 

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

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

 


 

入門GUI (技術の泉シリーズ(NextPublishing)) (日本語) オンデマンド (ペーパーバック) – 2020/9/11

入門GUI (技術の泉シリーズ(NextPublishing)) (日本語) オンデマンド (ペーパーバック) – 2020/9/11

HTML5&CSS3デザイン 現場の新標準ガイド【第2版】 (Compass Booksシリーズ) (日本語) 単行本(ソフトカバー) – 2020/10/23
エビスコム (著)

フロントエンドエンジニアはじめ、Web制作に関わっている人のためのHTML5/CSS3ガイドブックです

 


 

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

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

 


 

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

 


 

初心者からちゃんとしたプロになる 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

 


 

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2010/4/8

 


 

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

 


 

HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本 – 2017/7/21

 


 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 大型本 – 2015/11/3

 


 

たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA) 単行本 – 2016/3/16

日本一楽しい、わかりやすい、HTML/CSS入門

最新のウェブサイトづくりが、はじめてでもよくわかる!
レッスンごとに課題が分かれているから、反復学習にも最適
パソコン/スマートフォン/タブレット表示に完全対応

 


 

内容は古いけど、昔は、これをみんな読んでた感じ?

作りながら学ぶ HTML/CSSデザインの教科書 単行本 – 2013/12/14

基礎の基礎から、サイトの制作・公開まで。
美しいサイトを作り、魅せるための、不朽の力が身につく。

 


 

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

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

「Webデザイン」という言葉が指す仕事の領域は、かつてないほど広がっています。従来はパソコンで見るWebサイトのビジュアルを、画像ベースで制作すれば事足りました。しかし近年は、スマートフォンの小さい画面で、「外出先」や「通勤電車の中」といった様々な使用場面が存在することを想定しながらデザインを考える必要があります。そこでは、画像では表現しきれない細かなUIとインタラクションの設計も重要になりますし、ユーザー心理を把握するUXデザインの視点も理解しておかなくてはなりません。

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

 


 

ロゴをデザインするということ。成功と失敗から伝える、君へのアドバイス-ロゴデザイン・ラブ! [改訂第2版] 単行本(ソフトカバー) – 2016/11/17

 


 

たった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 画像素材の売れ筋ランキング

 


 

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/

 


 

100倍クリックされる 超Webライティング バズる単語300 単行本 – 2018/12/10

 


 

100倍クリックされる 超Webライティング実践テク60 単行本 – 2017/3/2

 


 

知識ゼロからはじめる ゆっくり・ていねいJavaScript ES6対応 単行本 – 2019/1/22

 


 

今すぐ使えるCSSレシピブック 単行本(ソフトカバー) – 2019/1/29

本書ではCSSのテクニックを豊富なサンプルコードで数多く解説しています。それぞれのテクニックのポイントも丁寧に解説しています。

 


 

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

 


 

本当によくわかるHTML&CSSの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる 単行本 – 2018/9/21
鈴木 介翔 (著)

 


 

2万回のA/Bテストからわかった 支持されるWebデザイン事例集 単行本(ソフトカバー) – 2018/7/25

 


 

最新ブラウザ対応で気持ちよく書くCSSデザイン Chrome、Safari、Firefox、Edge、Internet Explorer 11対応! (技術書典シリーズ(NextPublishing)) オンデマンド (ペーパーバック) – 2018/7/20

 


 

CSSグリッドレイアウト デザインブック 単行本(ソフトカバー) – 2018/6/15
エビスコム (著)

内容紹介
HTML&CSSで実現する、柔軟でレスポンシブなWebデザイン

本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。
これまでのHTMLとCSSを使ったWeb制作では、思ったようなデザインを実現するために「コンテンツをどういう順に記述するか」「どうマークアップするか」「どのCSSのレイアウトテクニックを利用するか」をパズルのように取捨選択し、形にしていくスキルが必要でした。
それを解決する方法として注目を浴びているのが、CSSグリッドを使ったレイアウトです。

 


 

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門 単行本(ソフトカバー) – 2018/5/29

 


 

HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 大型本 – 2018/7/11

挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。

 


 
本当によくわかるJavaScriptの教科書 単行本 – 2018/6/8

内容紹介
JavaScriptの入門者向け解説書

入門者を対象に手を動かしながら、学べる形式をとります。冗長な解説は避け、なるべく簡潔にして読者に飽きさせない切り口で解説していきます。

 


 

HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き) 単行本(ソフトカバー) – 2017/8/28
エビスコム (著)

HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き) 単行本(ソフトカバー) – 2017/8/28
エビスコム (著)

 


 

HTML5 & CSS3 デザインレシピ集 単行本(ソフトカバー) – 2017/2/22

 


 

HTML5&CSS3ステップアップブック 単行本 – 2018/1/24
エビスコム (著)

 


 

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ) 単行本(ソフトカバー) – 2016/3/18

実践的なWebサイトを作りながら学べる!

 


 

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) 単行本 – 2017/2/25

一生使えるWebデザインの本気の入門書!

 


 

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 単行本 – 2017/6/16

目的別にデザインが探せて、すぐに使える!

 


 

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

 


 

エンジニアのための理論でわかるデザイン入門 (Think IT Books) 単行本(ソフトカバー) – 2017/9/15

本書は、インプレスの“オープンソース技術の実践活用メディア”Think ITの連載記事「ITエンジニアのためのデザイン入門」の内容をまとめ、加筆して書籍化したものです。

 


 

HTML5 & CSS3 デザインレシピ集 単行本(ソフトカバー) – 2017/2/22
狩野 祐東 (著)

 


 

Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来 単行本(ソフトカバー) – 2018/1/17

「最新のWebデザイン」と「これからのWebデザイン」がわかる

 


 

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像 単行本(ソフトカバー) – 2017/9/20

古くなった「知識」や「情報」を短時間でアップデート!

 


 

図書館業務に役立つHTML・PHP入門:Webサイト構築のための基礎を学ぶ 単行本 – 2018/2/16

 


 

HTML&CSSとWebデザインが 1冊できちんと身につく本 大型本 – 2017/7/21

 


 

ノンデザイナーでもわかる UX+理論で作るWebデザイン 単行本(ソフトカバー) – 2017/9/26

本書は「UX」と「理論」という2つの側面から、Webサイトを制作・デザインするときに必要な考え方や法則をまとめました。

 


 

UX(ユーザー・エクスペリエンス)虎の巻-ユーザー満足度を向上する設計開発テクニック- 単行本 – 2017/9/26

最近、ものづくり界隈でUX(ユーザーエクスペリエンス)が、にわかに脚光を浴びている。UXとはユーザーが製品やサービスを使用した結果、得られる体験(快適や満足、不快や不満足)のことを言い、いかにこれを向上させるかが、製品開発においてテーマの一つになっている。実際にUXに関わってきた著者が、その概要やどうすればUXを向上させた製品開発・設計をできるかを説く。

 


 

UIデザインの教科書 マルチデバイス時代のサイト設計-アーキテクチャからUXまで 大型本 – 2013/11/19

「しっくりくる」には理由がある。

 


 

UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計 単行本(ソフトカバー) – 2019/1/21

 


 

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

 


 

Googleオプティマイズによるウェブテストの教科書 ~A/Bテスト、リダイレクトテスト、多変量テストの実際~ 単行本(ソフトカバー) – 2018/11/27

 


 

いちばんやさしいGoogleアナリティクスの教本 人気講師が教えるWeb解析と広告計測の基本 (「いちばんやさしい教本」) 単行本(ソフトカバー) – 2018/5/25

 


 

「やりたいこと」からパッと引ける Google アナリティクス 分析・改善のすべてがわかる本 単行本 – 2017/8/10

 


 

できる逆引き Googleアナリティクス 増補改訂2版 Web解析の現場で使える実践ワザ 260 Googleタグマネージャ/オプティマイズ/データスタジオ対応 (できる逆引きシリーズ) 単行本(ソフトカバー) – 2017/11/17

 


 

わかばちゃんと学ぶ Googleアナリティクス 単行本(ソフトカバー) – 2018/3/22
湊川 あい (著)

本書は、マンガと実践で学ぶGoogleアナリティクスの入門書です。
Googleアナリティクスを使ったアクセス解析の基本や理解が難しい概念はもちろん、マーケティングについてもマンガと実践でわかりやすく解説しています。

 


 

わかばちゃんと学ぶ Webサイト制作の基本 単行本(ソフトカバー) – 2016/6/15
湊川 あい (著)

 


 

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉 単行本(ソフトカバー) – 2017/4/21
湊川 あい (著),‎ DQNEO (監修)

 


 

スラスラわかるHTML&CSSのきほん 第2版 単行本 – 2018/4/14

ベストセラーが大改訂!

累計4万部突破の前作が、5年ぶりの大改訂!

小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版!
第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。
ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。

これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

最新HTML5.2準拠。Windows/Mac対応

 


 

たった1日で基本が身に付く! HTML&CSS 超入門 大型本 – 2017/6/15
WINGSプロジェクト (著),‎ 宮本 麻矢 (著),‎ 山田 祥寛 (監修)

 


 

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

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

 


 

DELL

フレームレスパソコン
ビジネスに適したWindows 10 Pro
XPS 13


デル株式会社


デル株式会社

 


 

WebCampPRO
無料体験会実施中
転職を本気で考えている方向けのプログラミングスクール!
転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです。
受講完了後、3ヶ月以内に転職・就職できない場合は ”全額返金” しています!

 


 

WebCamp
無料体験会実施中
Webスキルを習得!大人気テックスクール
短期で学びたい方のための講座です。
1ヶ月で集中して一気に学ぶことができます。
プログラミングやデザイン未経験者でも安心のサポート体制をご用意しています。

 


 

Udemy(ユーデミー)
世界最大級のオンライン学習プラットフォームである「Udemy(ユーデミー)」
米国シリコンバレー発祥、世界最大級のオンライン学習
プログラミングからヨガ、写真に至るまで、あらゆるコースがあります。

実績のある講師陣が教える4万以上の種類の講座を、オンデマンドで、
いつでもどのデバイスからでも自分のペースで学ぶことができます。
サンプルで動画も見れます。

ビジネススキル/ITとソフトウェア/IT資格
デザイン/Webデザイン/グラフィックデザイン
デザインツール/UX
音楽/作曲/音楽制作/音楽理論
ボイストレーニング/演奏テクニック/音楽ソフトの使い方
マーケティングなど、

 


 

無料

ざっくり理解するHTML5・CSS3 | HTML5とCSS3を使って、お店のホームページ(HP)を作ってみよう!
このコースではHTML5の成り立ちからマークアップ、CSS3を含め実際にホームページを作りながら超実践的に学んでいきます!イラストなども交え初心者でもイメージしやすく挫折せずに学びきれる内容になっています!

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

 


 

Udemy(ユーデミー)
Udemy / 実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

Udemy(ユーデミー)
Udemy / 未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

Udemy(ユーデミー)
Udemy / レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!

Udemy(ユーデミー)
Udemy / CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター

 


 

HTML+CSSワークショップ 手を動かして学ぶWebデザイン 単行本(ソフトカバー) – 2017/4/28

 


 

HTML&CSS レクチャー【float、display編】 Kindle版
DESIGNMAP (著)

価格:¥ 540(価格変動あり)

本書はHTML、CSSの入門書です。HTML、CSSの知識を網羅的に解説するのでなく、主にfloatとdisplayに絞ってHTML、CSSの学習のコツや考え方を伝授しています。カフェのトップページをコーディングしていきます。手書きしながら2〜3時間くらいのレクチャーです。

 


 

【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 単行本(ソフトカバー) – 2020/6/1
エビスコム (著)

 


 

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)

6ステップでマスターする 「最新標準」HTML CSSデザイン(固定レイアウト版) Kindle版

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)


smallyoga1


smallyoga2


smallyog13


smallyoga4


smallyogaiphone

 


 

この、6ステップでマスターするHTML+CSSデザインの書籍は、
人によっては読みにくいかも。
なんか、とびとびでの解説というか、わかりにくいかも。

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)

6ステップでマスターする 「最新標準」HTML CSSデザイン(固定レイアウト版) Kindle版

 


 

Webサイトを作るときに、ヘッダー部分から作る人。
フッター部分から作る人、いろいろあると思います。

この本では、最初にヘッダーとかは、作りません。

目次
CHAPTERは1から6まであります。
CHAPTER1 下準備
CHAPTER2 トップページの作成 – コンテンツ編
CHAPTER3 トップページの作成 – ナビゲーション編
CHAPTER4 コンテンツページの作成
CHAPTER5 記事一覧ページの作成
CHAPTER6 アレンジ

 


 
6ステップでマスターする 「最新標準」HTML+CSSデザインでは
CSSは、変数を使って、見栄えを整えたりします。
変数の説明も少しありますが、人によっては、わかりにくいかもです。
HTML+CSSと言っても、HTML5+CSS3なので。

CHAPTER4まで、すれば、4ページのWebサイトは完成できるので、
CHAPTER5とかは、人によっては、使わないかもです。

また、使用する素材とか、全部が、まとまって画像のフォルダの完成品に入ってるので、
自分は、わかりにくかったです。
完成するのに、最初に、こんな多くの素材で、作るの?と思ってしまったので。

フォーム(メールフォーム)や、検索フォーム、ファビコンなどの配置の仕方などは、この本では解説してないです。

6ステップでマスターする 「最新標準」HTML+CSSデザインは、おすすめ的な書籍ですが
初心者の方とかだと、わかりにくいかもです。
自分は、ためになりましたが、
出版社がソシムの時のHTML5&CSS3デザインブックをこえてはないと思いました。

 


 

CHAPTER1 下準備

6step-masters1

下準備編では、
1-1は、1段組みをベースとしたページを最新のHTML/CSSで作成する。
レスポンシブWebデザインなどの解説、セマンティクスの説明。

1-1-1は、1段組みをベースとしたWebページとは?
WEB業界では、1段組をベースとしたシンプルなWebページが増えています。

1-1-2は、最新のHTML/CSS
古いブラウザのサポートについて
 


 
1-2は、構築するページとサイト

1-2-1は、Webサイトの構造
この本では、このようなシンプルな構成の4ページ。
トップページ
コンテンツページ
アバウトページ
お問い合わせページ

1-2-2は、ページの構造と作成手順

1-2-3はページの配色

Adobe COLOR CCを使っての配色の仕方

https://color.adobe.com/

 


 
1-3は、Webページのベースを用意する
素材の準備です。

1-3-1は、HTMLファイルに記述する設定

1-3-2は、CSSファイルに記述する設定
HTML/CSSの編集に使用するテキストエディタ。

テキストエディタは、AdobeのBracketを紹介
Bracketsは無料です。(Mac、Windows、Linux)

http://brackets.io/

 


 

Webのための次世代エディタ Bracketsの教科書

 


 

ページ(Webサイト)の表示確認に使用するブラウザは、Chromeで解説。

さまざまな画面サイズでの表示を簡単に確認する方法など。

 


 

CHAPTER2 トップページの作成 – コンテンツ編

6step-masters2

CHAPTER2から、マークアップです。

この本では、最初に完成品のソース(コード)の説明があり、
まるまるの-1-1から、コーディングです。
人によっては、見づらいかもです。

自分は、わかりにくかったです。

2-1は、ヒーローイメージ
ページ上部のことを(トップページ)ヒーローイメージと解説。
ブロックのマークアップ。コンテンツはブロックごとに、セクションでマークアップして、まとまりにする。

2-1-1は、画像に重ねるテキストを表示する
キャッチコピー
フォントの種類
フォントサイズ
余白サイズ
行揃えの調整

2-1-2は、Webフォントで表示して字間を調整する
Webフォントは
Google Fontsでの解説です。

Google Fontsでの仕方

https://fonts.google.com/

2-1-3は、ブラウザ画面いっぱいに画像を表示する

2-1-4は、SVGでロゴ画像を表示する
ロゴ画像を追加し、ヒーローイメージに重ねてレイアウトします。
SVGの解説は、少しあります。

2-1-5は、リンクボタンを表示する

 


 
2-2は、概要(アイコン+テキスト)
3つの概要を並べて表示するコンテンツBのブロックを作成

2-2-1は、概要のテキストを表示する
2-2-2は、アイコンを表示する
概要にアイコンを付けてデザインする

アイコンはアイコンフォントのFont Awesomeを利用
Font Awesome
https://fontawesome.com/

2-2-3は、3つの概要を横に並べる

 


 

2-3は、概要(画像+テキスト)
画像とテキストを並べて表示するコンテンツCのブロックを作成

2-3-1は、画像とテキストを表示する
2-3-2は、画像とテキストを横に並べてレイアウトする
 


 

2-4は、概要(画像+テキスト:逆配置)
2-4-1は、コンテンツCをベースに新しいブロックを作成する
2-4-2は、画像の横幅を固定して並び順を変更する

 


 

CHAPTER3 トップページの作成 – ナビゲーション編

6step-masters3

ヘッダーとフッターのマークアップ
3-1は、サイト情報

3-1-1は、サイト情報を表示する
サイト名
住所
URLなど

3-1-2は、フッターのデザインを指定する
 


 
3-2は、フッターメニュー
3-2-1は、フッターメニューを作成する
3-2-2は、3つのメニューを横に並べる
 


 
3-3は、コピーライト
3-3-1は、コピーライトを表示する
3-3-2は、フッター内のパーツのレイアウトを調整する

 


 
3-4は、SNSメニュー
3-4-1は、SNSメニューを表示する
3-4-2は、SNSメニューのデザインを指定する
 


 

3-5は、ヘッダーのサイト名

3-6は、ナビゲーションメニュー
3-6-1は、ナビゲーションメニューを作成する
3-6-2は、大きい画面ではナビゲーションメニューを横に並べる
 


 
3-7は、トグルボタン
3-7-1は、トグルボタンを作成する
3-7-2は、トグルボタンでナビゲーションメニューを開閉する
このトグルボタンのアニメーションは、jQueryでしますが、
jQueryの解説は、あんまりないので、人によっては、コピペ的な感じかもです。

jQueryのバージョンも本では最新の3ではなく2を使ってます。

HTML+CSSの本なので、詳しい解説がないのは仕方がないかもですが。

jQuery

https://jquery.com/

jQuery日本語リファレンス

http://semooh.jp/jquery/

 


 

CHAPTER4 コンテンツページの作成

6step-masters4

コンテンツ、アバウト、お問い合わせ

4-1は、コンテンツページ
4-1-1は、コンテンツページを作成する
4-1-2は、記事のデザインを指定する
4-1-3は、パンくずリストを表示する
 


 
4-2は、アバウトページ
4-2-1は、アバウトページを作成する
4-2-2は、画像と沿革を表示する
 


 
4-3は、お問い合わせページ
4-3-1は、お問い合わせページを作成する
4-3-2は、地図を表示する
地図は、Googleマップでします。

 


 

CHAPTER5 記事一覧ページの作成

6step-masters5

CHAPTER5はカード型とサムネイル型の解説。
CHAPTER4まで、すれば、 4ページのWebサイトは完成します。

5-1は、カード型(画像+テキストを上下に配置)
5-1-1は、記事一覧Aのページを作成する
5-1-2は、記事の概要を表示する
5-1-3は、ブラウザ画面の横幅に応じて概要を横に並べて表示する

5-2は、カード型(画像+テキストを左右に配置)
5-3は、サムネイル型(画像+テキストを重ねて配置)

 


 

CHAPTER6 デザインのアレンジ

6step-masters6

このCHAPTER6では、デザインのアレンジの解説です。
6-1は、ヘッダーの色をアレンジする
6-2は、ヘッダーとヒーローイメージを一体化したデザインにする
6-3は、ヘッダーを画面上部に固定する
6-4は、関連記事メニューを追加する
6-5は、メタデータを記述する
6-6は、ページの基本色をアレンジする
 


 
APPENDIX
APPENDIXは、付録で

HTMLリファレンス

HTMLの基本文法/HTMLの基本設定/メタデータ/セクション/コンテンツ

CSSリファレンス

CSSの基本文法/セレクタ/メディアクエリ/

ボックスモデル
ボックスの基本設定/ボックスの種類/フレキシブルボックスレイアウト/ポジションレイアウト
ボックス内のコンテンツのデザイン

単位
色の値
変数
最適化

主要デバイスの画面サイズ

古いブラウザ用の設定など、

 


 

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)

6ステップでマスターする 「最新標準」HTML CSSデザイン(固定レイアウト版) Kindle版

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~ 単行本(ソフトカバー) – 2016/8/24
エビスコム (著)

LINEで送る
Pocket

おすすめ