Amazon：HTML+CSSデザイン
https://amzn.to/4a0Z85A

草野あけみ さんはフリーのコーダー、コーディングセミナー講師などしてます。
自分も昔に、草野先生のセミナーに通って習った時期があります。
授業の内容は、とてもわかりやすかったです。

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
草野 あけみ (著)
ゼロからしっかり学べる、本格Webデザイン。

目次
HTML5&CSS3標準デザイン講座 読んでみました。
目次はChapterでわかれています。
ORIENTATION　レッスンを始める前に
Chapter01　HTMLで文書を作成す
Chapter02　CSSで文書を装飾する
Chapter03　CSSレイアウトの基本
Chapter04　本格的なHTML5によるマークアップを行うための基礎知識
Chapter05　本格的なWeb制作のための設計と準備
Chapter06　実践的なWebサイトのコーディング
Chapter07　CSS3入門
Chapter08　マルチデバイス対応の基礎知識
Chapter09　レスポンシブ・ウェブデザインのコーディング

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グリッドがきちんと身につく。

TechAcademy
未経験からプロを育てるオンラインブートキャンプ

 

---

 
プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック 単行本 – 2023/1/17
千貫 りこ (著)

脱・その場しのぎのコーディング!
現場で迷わない実務レベルのテクニックを身につける

HTML/CSSの知識をひと通り身につけて、デザインカンプ通りの実装ができるようになっても、実際の制作現場では、コーディングの選択肢に迷う場面が多々あります。

 

---

 

Webサイトの脆弱性診断・改ざん監視・マルウェア駆除
SiteLock（サイトロック）

 

---

 

武器になるHTML 単行本（ソフトカバー） – 2022/11/26
柴田 宏仙 (著)
せっかく学ぶのなら、プロ志向のHTMLを

読みやすいコードのガイドライン -持続可能なソフトウェア開発のために 単行本（ソフトカバー） – 2022/10/22
石川 宗寿 (著)

 

---

 

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

CHAPTER 1　基本レイアウト
CHAPTER 2　応用レイアウト
CHAPTER 3　表組み・フォーム
CHAPTER 4　CSS設計
CHAPTER 5　マークアップ
CHAPTER 6　総合演習
章の終わりごとに、練習問題などもあり。

 

---

 

WebCampPRO
無料体験会実施中
転職を本気で考えている方向けのプログラミングスクール！

 

---

 

WebCamp
無料体験会実施中
Webスキルを習得！大人気テックスクール

 

---

 

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

ホームページ作成ツールです。

 

---

 

やさしくわかるHTML&CSSの教室 単行本（ソフトカバー） – 2022/8/27
リブロワークス (著), 鹿野 壮 (監修)

会話形式でやさしくわかりやすいHTML/CSSの入門書です。

Webサイト管理のきほん 業務と技術の知識が身につく 単行本（ソフトカバー） – 2022/7/21
谷口 元紀 (著)
Webサイト管理にまつわる「業務」と「技術」の基本知識がこれ1冊でわかる!

いちばんやさしいWeb3の教本 人気講師が教えるNFT、DAO、DeFiが織りなす新世界 (いちばんやさしい教本) 単行本（ソフトカバー） – 2022/7/20
田上 智裕 (著)

原点回帰から未来へ
ウェブの進化がすべてを変える

 

---

 

スラスラわかるHTML&CSSのきほん 第3版 単行本（ソフトカバー） – 2022/7/9
狩野 祐東 (著)

1つのストーリーに沿ってWebサイト作りとHTML&CSSの基本がスラスラ学べる、入門書の決定版!
第3版では現代のトレンドにあわせて制作するサイトを一新。PC・モバイル端末に対応したサイト作りの全手順を、図入りでとことん丁寧に解説しています。

そろそろ常識?マンガでわかる「HTML&CSS」 単行本（ソフトカバー） – 2022/7/9
赤間公太郎 (著), リブロワークス (編集), morimaiko (イラスト)

Web制作にとどまらず、Webアプリやクラウドでも使われているHTML&CSS。本書は最低限必要な知識に絞って解説しています。これまでHTML&CSSを勉強したことがない方はもちろん、Web制作の概要を大まかに知りたい方、アプリ開発に先立ってHTMLとCSSの要点を短期間で知りたいエンジニアの方にもおすすめです。

 

---

 

HTML解体新書-仕様から紐解く本格入門 単行本 – 2022/4/15
太田 良典 (著), 中村 直樹 (著)

HTMLによる、HTMLのための、HTMLだけの本

 

---

 

いちばんやさしいGit&GitHubの教本 第2版 人気講師が教えるバージョン管理&共有入門 (「いちばんやさしい教本」シリーズ) 単行本（ソフトカバー） – 2022/3/17
横田紋奈 (著), 宇賀神みずき (著)
エンジニアに必須のGit/GitHubをコマンドラインで使いこなそう

 

---

 

デザインのネタ帳 コピペで使える動くWebデザインパーツ 単行本（ソフトカバー） – 2022/3/18
矢野 みち子 (著), 五十嵐 小由利 (著), 伊藤 麻奈美 (著), 棧敷 友香子 (著), & 1 その他
コードをイチから書かなくてOK! 超カンタンにWebサイトを動かす!

 

---

 

増補改訂版
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版] 単行本（ソフトカバー） – 2022/1/7
服部 雄樹 (著)
美しいデザインでサイト制作の知識とワザが「1冊で」身につく本格入門

 

---

 

ざっくりつかむ CSS設計 単行本（ソフトカバー） – 2021/12/23
高津戸 壮 (著)
Web制作の現場でこれだけは知っておきたい、CSSの扱い方、管理、運用の基本!

 

---

 

Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論 単行本 – 2021/11/23
ヘイドン・ピカリング (著), アンディ・ベル (著), 安田 祐平 (監修)
多様な閲覧環境への対応や、多様なビジュアルデザインの実現といった複雑な要件を強いられるCSSは、管理し続けることが非常に困難です。本書では、より発展的で包括的なCSS設計の考え方について、現役のWebデザイナーやフロントエンドエンジニアを対象に解説します。

 

---

 

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

 

---

 

Manaさん「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の続編が出版されるみたいです。CSSやJavaScriptを使っての動きやレイアウト組み、またSassを使った、より実践向けの解説本

ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 (日本語) 単行本（ソフトカバー） – 2021/2/20
Mana (著)

Chapter1 最初に知っておこう! Webサイトの基本と必携ツール
Chapter2 ランディングページで学ぶ「レスポンシブWebデザインとフォント」
Chapter3 ブログサイトで学ぶ「装飾とカラムレイアウト」
Chapter4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
Chapter5 イベントサイトで学ぶ「特定ページ作り方とアニメーション」
Chapter6 ギャラリーサイトで学ぶ「動画と画像の使い方」
Chapter7 HTMLやCSSをより早く、より上手に管理できる方法
Chapter8 サイトの投稿と問題解決

 

---

 

【Amazon.co.jp 限定】これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本(特典:すぐにサイト作成を開始できる! HTMLスターターキット&最新技術バリアブルフォントの解説PDF) 単行本（ソフトカバー） – 2021/10/14
Capybara Design 竹内 直人 (著), 竹内 瑠美 (著)
本書は手を動かしてWebサイトを作りながら
HTML/CSSとWebデザインの基本を楽しく学べる入門書です。

 

---

 

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

 

---

 

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

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

 

---

 

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

 

---

 
今では、オンラインで学べるサービスもいろいろあります。
無料（有料）
ドットインストールなどは、昔は、無料で多く学べましたが、現在では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デザインの新しい教科書 改訂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デザイン改善集 単行本（ソフトカバー） – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。

 

---

 

たった1日で基本が身に付く! HTML&CSS 超入門 大型本 – 2017/6/15
WINGSプロジェクト (著), 宮本 麻矢 (著), 山田 祥寛 (監修)
HTMLとCSSが1日で学べるように、初心者に必要な知識を凝縮しました。

 

---

 

HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。 単行本（ソフトカバー） – 2018/7/20
山崎 響 (著)
挫折せずに学び通せる!
初学者がつまづきやすいポイントをおさえながら、解説していきます。

 

---

 

無料ネットショップ開業
BASE

面倒な手続きや複雑な操作は一切なく、誰でも簡単に30秒でネットショップが作れます。
今までネットショップを作りたくても時間や資金、知識…様々な理由で始められなかった悩みを全て解決。ネットショップをつくるのに、「勉強」や「資金」は必要ありません。

クレジットカード決済、コンビニ決済、キャリア決済もすぐに導入でき、
決済手段の豊富さと手軽さが支持されています。

 

---

 

これ1冊でゼロから学べる Webプログラミング超入門 ーHTML,CSS,JavaScript,PHPをまるごとマスター 単行本（ソフトカバー） – 2016/7/29
掌田 津耶乃 (著)
プログラミング初心者に向けた、Webプログラミングの入門書です。
「HTML+スタイルシート」「JavaScript」「PHPによるサーバ開発」
「Webを使ったスマホアプリ」などを、猛スピードで全部学びましょう!

 

---

 

作りながら学ぶWebプログラミング実践入門 ~一冊で理解するHTML、CSS、JavaScript、Node.js~ 単行本（ソフトカバー） – 2020/1/28
掌田津耶乃 (著)
本書は、そんな、Web制作、Webアプリケーションをこれから始めたい人を対象にした書籍です。

 

---

 

インフラエンジニアの教科書 単行本（ソフトカバー） – 2013/10/26
佐野 裕 (著)

 

---

 

HTML&CSSの基本がゼロから身につく! Webデザイン見るだけノート (日本語) 単行本 – 2020/9/11

知識ゼロでもWebサイトがすぐ作れる！

Webサイトの作り方がこの1冊で身につく
基礎から学んで自分で作れる！
Chapter 01 Webデザインを始める前に
Chapter 02 Webサイトの骨組みとなるHTMLの基本
Chapter 03 Webデザインを決めるCSSの基本
Chapter 04 目的別Webデザインの基本
Chapter 05 Webサイトの公開

こんなWebサイトが作れます
フルスクリーン
グリッドレイアウト
2カラム

 

---

 

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

 

---

 

【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実践講座 (日本語) 単行本（ソフトカバー） – 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グリッドといった“流行り”の手法の使い方・使いどころがわかります!

 

---

 

CSS設計完全ガイド ~詳細解説+実践的モジュール集 (日本語) 単行本（ソフトカバー） – 2020/2/27

 

---

 

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

 

---

 

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

 

---

 

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

 

---

 

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

 

---

 

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

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

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

 

---

 

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

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

 

---

 

たった1日で基本が身に付く! HTML&CSS 超入門 大型本 – 2017/6/15

 

---

 

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

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

 

---

 

CSSグリッドで作る HTML5&CSS3 レッスンブック 単行本 – 2018/12/25
エビスコム (著)

 

---

 

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

 

---

 

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

 

---

 

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

 

---

 

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

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

 

---

 

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

 

---

 

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

 

---

 

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

 

---

 

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

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

 

---

 

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

 

---

 

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

挫折せずに学び通せる!

 

---

 

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

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

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

 

---

 

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

HTML5とCSS3をより深く理解し、使いこなしたい人のためのガイドブック

 

---

 

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

 

---

 

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

 

---

 

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

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

 

---

 

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

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

 

---

 

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

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

 

---

 

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

 

---

 

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

 

---

 

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

「4つのレイアウトパターン」と「レスポンシブデザイン」を
実際に手を動かして作りながらサイト制作のきほんが学べる!

 

---

 

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

 

---

 

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

 

---

 

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アナリティクスを使ったアクセス解析の基本や理解が難しい概念はもちろん、マーケティングについてもマンガと実践でわかりやすく解説しています。

 

---

 

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

 

---

 

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
草野 あけみ (著)
ゼロからしっかり学べる、本格Webデザイン。

HTML5&CSS3標準デザイン講座 読んでみました。

目次
目次はChapterでわかれています。
ORIENTATION　レッスンを始める前に
Chapter01　HTMLで文書を作成す
Chapter02　CSSで文書を装飾する
Chapter03　CSSレイアウトの基本
Chapter04　本格的なHTML5によるマークアップを行うための基礎知識
Chapter05　本格的なWeb制作のための設計と準備
Chapter06　実践的なWebサイトのコーディング
Chapter07　CSS3入門
Chapter08　マルチデバイス対応の基礎知識
Chapter09　レスポンシブ・ウェブデザインのコーディング

第2版が出てます。
本書は「わかりやすさ」と「内容の充実度」で、
大好評だった入門書の全面改訂版です。

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
草野 あけみ (著)
ゼロからしっかり学べる、本格Webデザイン。

HTML5&CSS3標準デザイン講座の、この書籍は、全30レッスン。
Chapterは、1から9まで、あります。

この、HTML5&CSS3標準デザイン講座は、
2013年に出た、HTML&CSS　標準デザイン講座の改訂版で、
2015年の11月に発売された本で今だに、売れてます。

ただ、人によっては、今では良書なども多いです。

どの本にも、言えますが、発売された当時は、その情報が新しく、正しいですが、
年月が立つと、書かれた時には正しかった情報も、
読む時には、正しくなくなかったり、また、本内の紹介のサービスなどが終わってるなどもあります。
状況など変わってしまうこともあるので。

HTML5&CSS3標準デザイン講座
と
HTML&CSS標準デザイン講座の2冊持ってますが

自分が先生のセミナーに通ってた時には、
この本は執筆されてなく
出してなかった（販売）ので、
もし、この本が出ていたら、
セミナーなどに行かなくてもいいかもと思うほどの内容の本です。

前作のHTML&CSS　標準デザイン講座の本は、セミナーに近い内容の感じなので。

セミナーとかに行く、
セミナーに通うなど、人によっては値段が高いと感じます。

また、宿題とかも出されます。人によっては授業いついていけないと、お金を捨てる感じだし。

セミナーに通ったからと言って、技術を学べるわけでもない時があります。
（レベルが高いと授業に、ついていけないなどもあります。）

セミナーとかに通う人って、その職種に就きたいから通う人もいると思うので。
セミナーに通っても、転職や職にいかせないとかもあります。

このHTML5&CSS3標準デザイン講座の本、
人によっては難しく感じるかもです。
かなり本格的なので、最後までできるか、わからないなどあるかもです。

自分は、Weｂスクールなどに通った時に、
PhotoshopやIllustratorでデザインカンプなど作り、
それをPhotoshopでスライス（画像などパーツ別け）して、Webサイトを制作したりしました。

ただWeb系の講師の方も、いろいろいます。
質問した問に、教え方と言うか、解答が、個々の講師で違ったり。
また作り方の手順も、いろいろあると思います。

講師の人も、独学で勉強してた人もいたので。

独学だと、これと言った正解がないかもです。

でもWeb制作が未経験の人とかだと講師（先生）の言った手順で、制作したります。
でも、それが全てではないかもです。

 

---

 

Webの系の求職者支援訓練（訓練校）などに通ってた時に、先生の教え方が
淡々としてて、生徒さんの中には、授業では、理解できない人もいました。

HTML5&CSS3標準デザイン講座の本を別途、買ってた生徒もいて自分なりに勉強してる生徒もいたので。

人によっては、このHTML5&CSS3標準デザイン講座を1冊を持ってれば、
HTMLとCSS、Webサイトを作るのに完璧な人もいます。

学習用のサンプルも、2016年に更新されてるので、とても親切です。
普通は、サンプルとか、あんまり更新されない本が多いので。

HTML5&CSS3標準デザイン講座の本は
サンプルの教材などダウンロードできますが、
本内の説明でデザインカンプなどは、
デザインカンプのダウンロードのデータは無いです。

デザインカンプなどあれば、どんな感じか、
自分でデータを開いて見れるので良かったかもです。

lessonでは、うちのにゃんこ　のサイトをコーディングしていき
他に、サンプルサイトで紅茶のcafeサイト
PCサイト、スマホ、タブレットなどに対応したマルチデバイスサイトを作ります。

 

---

 

Weｂサイトの構成とデザインを決める。
ユーザーの体験を考えながらサイトマップを作成。

ワイヤーフレームを作るには有名なCacoo

Cacoo

https://cacoo.com/ja/

 

---

 
色の指定方法
Adobe　Color　CC
https://color.adobe.com/ja/create/color-wheel/

 

---

 

お問合わせフォーム作成。

Googleフォームで手軽にフォームを設置

Googleフォーム

https://www.google.com/intl/ja_jp/forms/about/

 

---

 

グラデーションのジェネレーター
Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

 

---

 

jQuery
https://jquery.com/

Webページ用の部品を作成できる
jQuery UI
https://jqueryui.com/

 

---

 

jQuery日本語リファレンス

http://semooh.jp/jquery/

 

---

 

jQuery最高の教科書 単行本 – 2013/11/26

 

---

 

jQuery標準デザイン講座 大型本 – 2015/12/16
神田 幸恵 (著)

 

---

 

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) 大型本 – 2015/4/21

 

---

 

Viewport
設定してWebページの表示方法を制御。

デバイスサイズ
Screen Sizes
http://screensiz.es/

 

---

 
Webアイコン
Font Awesome

アイコンフォント
Font Awesome
http://fontawesome.io/

 

---

 
ブックマークやスマートフォン用のアイコン作成。
ファビコン
Webクリップアイコン

マルチアイコン作成
https://ao-system.net/multiicon/

 

---

 

Adobe Museとか契約してる方なら、
IllustratorのようにビジュアルベースでWebページを作成できるアプリです。

Adobe Museランディングページ制作ガイド ~コード知識ゼロで作るWeb広告 大型本 – 2017/12/2

 

---

 

Illustratorの代わりにInkscapeを使っている人も多いです。

今では、他に、無料で使えるGravit Designer（グラビットデザイナー）もあります。

Gravit Designer（グラビットデザイナー）
https://designer.io

Photoshopの代わりにGIMPなど

Adobeの
IllustratorやPhotoshopは、今では高いです。

価格：￥ 15,786（価格変動あり）
Photoshop Elements 2019 日本語版 通常版 Windows/Mac対応
プラットフォーム : Windows, Macintosh

 

---

 

Acorn
PhotoshopやIllustratorは、月々の利用の料金が高いです。
ベクターデータ、とビットマップデータなど両方扱えるグラフィックアプリ

Acorn

 

---

 

Affinity Designer

Illustratorが高いその代用に便利かもです。

 

---

 

Adobe
Illustrator、Photoshopソフトは高いので、ちょっとした画像の編集に

無料
Pixlr Editor

https://pixlr.com/editor/

 

---

 

Adobeソフトは高いので、Sketchを使ってる人もいます。
Mac用
Sketch（有料ソフト）
アプリのUIデザインやWebデザインの作成ツール

https://www.sketchapp.com/

 

---

 

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版 単行本 – 2018/11/16

 

---

 

Kakumaru Punch

Webサイト制作なでど、写真を角丸に加工したい。
iPhoneアプリとかでも、出来ますが、
Kakumaru Punchなら
写真を、ドラッグするだけで、簡単に、角丸の写真にできます。

http://sheepapp.com/app/Kakumaru/

 

---

 

Monosnap – screenshot editor

画面をキャプチャー

 

---

 

Flation
アイコン素材

SVG、PSD、PNG、EPS、Webフォントなど、無料ダウンロード
商用利用可能。

https://www.flaticon.com/

 

---

 

Illustrator しっかり入門 増補改訂 第２版 【CC完全対応】［Mac & Windows 対応］ 単行本 – 2018/9/21

 

---

 

Photoshop しっかり入門 増補改訂版 第２版 【CC完全対応】[Mac & Windows対応] 単行本 – 2018/5/22

 

---

 

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
草野 あけみ (著)
ゼロからしっかり学べる、本格Webデザイン。

目次はChapterでわかれています。
目次は、このように
Chapterでわかれています。

 

---

 

ダウンロードのサンプルですが、
人によっては、サンプルのChapterとかが見づらいかもです。

Chapter01は
にゃんこのサイトを作りながらHTMLを学んでいきます。
lesson2（うちのにゃんこ）
lesson3（うちのにゃんこ）
lesson4（うちのにゃんこ）

Chapter02は
lesson6（うちのにゃんこ）
lesson7（うちのにゃんこ）
lesson8（うちのにゃんこ）
lesson9（うちのにゃんこ）

 

---

 

Chapter03は
レイアウトについて
lesson11（floatレイアウト）
lesson12（positionレイアウト）

 

---

 

Chapter06は
架空のFlex Codingサイトで説明
lesson18（大枠のレイアウト）
lesson19（displayプロパティ　レイアウト）
lesson20（CSSスプライトの仕組み）
lesson21（メインコンテンツ領域の作成）
Flex Codingのサイト（Chapter06全体の完成）

 

---

 

Chapter07は
CSS3の解説
lesson23（CSSセレクタ）
lesson24（CSSプロパティ）
lesson25（変形、アニメーション、メディアクエリなど）

 

---

 

Chapter09は
Cafeサイトで解説
lesson28（レスポンシブの画面設計とベースコーディング）
lesson29（メディアクエリを使ったレイアウト）
lesson30（Retinaディスプレイ対策）

Chapter9の参考は、Cafeサイトでレスポンシブにまつわる
メディアクエリの記述の参考例など解説。

 

---

 

準備するものテキストエディタ

Macなら
CotEditor（無料）
mi（無料）
Jedit（有料）

Windowsなら
サクラエディタ（無料）
TeraPad（無料）
EmEditor（有料）
など紹介されています。
ダウンロードの仕方などはないです。

 

---

 
Web開発専用の高機能テキストエディタ

Macなら
Adobe　Brackets（無料）現在では廃止

Sublime Text（有料、無料）
Coda2（有料）
Windowsなら

Sublime Text（有料、無料）
Crescent Eve（有料）

 

---

 

ブラウザは
確認用のブラウザをインストール
Google Chrome

古いIEの表示をエミュレートしてくれるフリーソフト
IE　Tester

https://www.my-debugbar.com/wiki/IETester/HomePage

MacでのIE（Internet Explorer、インターネットエクスプローラー）の表示確認は

Macに仮想のWindows環境を構築する。
Modern.IEを紹介してます。

拡張子の表示の仕方
MacとWindowsを解説してます。

 

---

 

HTMLとCSSに触れてみる

①新規HTMLファイルを作成
②最低限必要なHTMLの骨組みを書きます。

HTML文書にタイトルをつけます。
ブラウザでタイトル表示の確認。
コンテンツを記述する。
ブラウザでコンテンツ表示を確認。
コンテンツをHTMLタグで意味付けします。
完成したHTML文書をブラウザで確認します。

 

---

 
CSSで装飾してみる。
見出しの文字を赤くするための記述を書きます。
ファイルを上書き保存してブラウザで確認。

 

---

 

WebサーバーとFTPについて

レンタルサーバー
ロリポップ（有料）
さくらインターネット（有料）を紹介。

レンタルサーバーは、他にも、いろいろあります。
自分は、StarServerを使ってます。
どのWeb系の本でも、ロリポップ（有料）、さくらインターネット（有料）の紹介が多いかも。

 

---

 

MixHost
プランも自由に変更可能です。
（プランを変更した場合は、差額も適用できます。）

 

---

 

「スタードメイン」年額1,180円から(税抜)の独自ドメイン

 

---

 

低コストで簡単、プロのようなホームページ作成「グーペ」
誰でも5分で素敵なサイト
月額1000円から
素敵なデザインを選ぶだけ
お店のホームページができます。

 

---

 
ドメインの登録サービス
「ムームードメイン」独自ドメイン
69円/年～の格安ドメイン取得サービス

ドメイン取得なら1円からのお名前.com

 

---

 

ドメイン総合サービスVALUE-DOMAIN（バリュードメイン）
ドメイン名取得＆無料レンタルサーバーサービス【エックスドメイン】

 

---

 

他に、無料で利用できるサーバーは、

FC2（無料）

https://web.fc2.com

など紹介されています。

他にも無料で利用できるレンタルサーバーは、いろいろあると思います。
エックスドメインや
ネットオウルのStarServerなどでも無料で利用できるサーバーなどあります。

 

---

 

ドメイン名取得＆無料レンタルサーバーサービス
エックスドメイン

レンタルサーバーが無料で利用できます。

 

---

 

FTPソフトは

Mac
FileZilla（無料）

FileZillaの日本語情報サイトです。
https://ja.osdn.net/projects/filezilla/

Cyberduck

https://cyberduck.io/

Cyberduck
（無料と有料があります）

 

---

 

Windows
FileZilla（無料）
FFFTP（無料）
WinSCP（無料）

など紹介と解説
 

---

 

LESSON01　HTMLの概要

HTMLという言語の役割と基本ルールを学習

HTMLの役割
HTMLの基本構文
要素（Elements）
属性（Attribute）

HTMLの文書の基本構造
DOCTYPE宣言
html要素
head要素
body要素

ドキュメントツリー

DOCTYPE宣言（文書型宣言）
html要素
head要素
title要素
meta要素

文字コードの指定
など解説。

 

---

 

LESSON02　文書をHTMLでマークアップする

簡単なサンプル文書を例にマークアップの練習

サンプルファイルに原稿テキストがあります。
文書構造をマークアップする
meta要素にキーワードと説明文を設定する

テキストの原稿を流し込む

原稿の文書構造を考える
マークアップ前のHTML文書を確認する
原稿から文書構造を読み取る

見出しを探す
箇条書きリストを探す
文書の固まりを探す
その他の情報構造を探す
 

---

 
文書構造が決まったらHTMLを書いていく。

HTML タグでマークアップする
見出しをマークアップする
段落をマークアップする
箇条書きをマークアップする

記述リスト（定義リスト）をマークアップする

情報のグルーブ化

divをsectionに置き換える

不要な区切り線を削除

覚えておきたいマークアップのルール
要素の入れ子（ネスト）と親子関係
コンテンツモデルと要素の分類
など。
 

---

 

LESSON03　改行や強調・画像やリンクを挿入する

画像などのコンテンツの挿入やテキストレベルの細かい意味付け

コンテンツ部分をマークアップする
読みやすいように段落内で改行する＜br＞

重要な語句を強調する
＜strong＞

画像を挿入する

リンクを設定する

著作権表記であることを明示する

絶対パスと相対パス

ルート相対パス

など。

 

---

 

LESSON04　表とフォームを設置する

補講　文法チェックのすすめ
補講　DOCTYPEをHTML4.01/ XHTML1.0にする場合の注意点

表組みとフォームのコーディング方法について解説

表組みとアンケートフォームをマークアップする

table要素の基本的な構造をマークアップする

見出しのセルの要素を

に変更する
7行分増やし、必要な見出し文言を入力する
表組みの状態を確認してみる

応募フォームをマークアップする
フォームエリアを設定する
テキストボックスを挿入する
テキストエリアを挿入する
プルダウンメニューを挿入する
ラジオボタンを挿入する
チェックボックスを挿入する
ファイルアップロード部品を挿入する
リセットボタン、送信ボタンを挿入する

フォーム部品の種類と用途
フォームの使い勝手を良くするHTML5の新属性

補講　文法チェックのすすめ
マークアップが終わったら、1度HTMLの文法チェック（バリデート）をかえるようにする

The W3C Markup Validation Service

https://validator.w3.org/

補講　DOCTYPEをHTML4.01/ XHTML1.0にする場合の注意点
現在のHTML基準規格はHTML5でありますが、世の中の全てのHTML文書がHTML5になってるわけではありません。
など。
 

---

 

LESSON05　CSSの概要

CSSの役割や基本の書式などCSSを書く前の予備知識を解説

CSSの概要と基本ルール
インライン
内部参照
外部参照
など
 

---

 

LESSON06　基本プロパティとセレクタの使い方

よく使う基本的なプロパティ
基本的なプロパティとセレクタで文書を装飾する

外部CSSにファイルをリンクする
外部CSSファイルを用意する
HTMLから外部CSSファイルへリンク

要素に対して基本的な装飾を設定する
ウィンドウ背景色の設定
リンク色の設定
ページタイトル　h1の設定
大見出し　h2の設定
情報データ見出し　dt の設定

要素に名前をつけてスタイルを設定
リード文領域にid属性で名前をつける
id属性をセレクタにしてスタイルを指定する
リンクにclass属性で名前をつける
class属性をセレクタにしてスタイルを設定する

いろいろなセレクタ
属性セレクタ
擬似セレクタ
疑似要素

CSS3で追加されたセレクタ一覧

 

---

 
LESSON07　背景画像を使って装飾する

背景画像の扱い方を練習

背景画像で装飾する
使用する素材を確認
body要素に背景画像を設定
背景画像の繰り返し方向を指定

背景画像を設定する
使用する素材を確認する
など

 

---

 
LESSON08　初歩的な文書のレイアウトとボックスモデル

CSSで文書をレイアウトする際に必ず必要となるボックスモデル

ページ全体のレイアウトを整える
コンテンツ領域のスタイルを設定する

基本的なfloatの仕組み

 

---

 

LESSON09　表組みと入力フォームのスタイリング

応募フォームを読みやすくスタイルリングする

表組みとフォーム部品の構造化
など。

 

---

 

LESSON10　レイアウトの種類

LESSON10　レイアウトの種類
Webサイトには様々なレイアウトがあります。
固定か可変など

代表的なレイアウト手法
固定レイアウト
可変レイアウト
カラムレイアウト

グリッドレイアウトとフリーレイアウト
総合的なレイアウト手法

アダプティブレイアウト

 

---

 

LESSON11　floatレイアウト

floatを使った段組みレイアウト
folatによるマルチカラムレイアウト

2カラムレイアウト
3カラムレイアウト

カラム落ちを修正する
など。

 

---

 

LESSON12　positionレイアウト

floatと並ぶCSSレイアウトの基本であるpositionを使ったレイアウト

positionレイアウト
絶対配置
相対配置
固定配置

補講　新しいレイアウト手法
Flexbox
など。

 

---

 

LESSON13　セクション関連の新要素

セクション要素とはなど解説。

 

---

 
LESSON14　新しいカテゴリとコンテンツ・モデル

要素カテゴリの細分化

ブロック要素
インライン要素

 

---

 

LESSON15　その他の新要素と属性

補講　HTML5 の全体仕様と実装上の注意点

HTML5 & CSS3 のブラウザ対応など調べるのに便利なサイト

アクセスするとIP、ブラウザのバージョン
OSなど表示されます。

What’s my ip Address
HTML5 & CSS3 Support
https://bestvpn.org/whats-my-ip/

Can I use
https://caniuse.com/

など、紹介

 

---

 

LESSON16　Webサイトのコーディング設計

コーディング設計図の役割や重要性など紹介。

コーディング設計のポイント

ウォーターフォール型の制作ワークフロー
プロトタイプ型の制作ワークフロー

設計時に検討しておくこと
①文書構造設計（HTMLマークアップ時）
②情報グルーブの構造化とレイアウト枠の設計（HTMLマークアップ時）
③ファイル命名ルール（画像スライス時）
④id、class命名ルール（CSSコーディング時）
⑤サイズ計測、色コード指定（CSSコーディング時）
⑥セレクタ設計（CSSコーディング時）

 

---

 

①文書構造設計
②情報グルーブのい構造化とレイアウト枠の設計
③画像ファイル命名ルール
④id、class命名ルール
⑤サイズ計測、色コード指定
⑥セレクタ設計
 

---

 

実習　サンプルサイトの画面コーディング設計をする
文書構造設計をする

①文書構造の骨格を決める
ロゴをh1
コンテンツ大見出しをh2
コンテンツ小見出しをh3

②ナビゲーション要素をリスト要素でマークアップ

③その他の要素をマークアップ

 

---

 

情報の構造化とレイアウト枠の設計をする
①コンテンツの情報構造をグルーピングする
②グルーピングした構造を適切な要素をマークアップする
③レイアウトの都合で必要な枠を見つけてdiv要素でマークアップする
④アウトラインチェック
 

---

 

LESSON17　効率的なCSSコーディングの下準備

事前のコーディング設計が完了したら
本格的なコーディング作業に入ります。

CSSコーディングのための下準備
ブラウザの初期スタイルの問題とリセットCSS

よく利用されるリセットCSS

CSS Reset

https://cssreset.com/

 

---

 

リセットCSS

Normalize.css

https://necolas.github.io/normalize.css/

Normalize.css -GitHub

https://github.com/necolas/normalize.css

 

---

 

LESSON18　大枠のレイアウトフォーマットを作成する

全体の共通フォーマットとなる下層の詳細ページを作成する

制作するWebサイトの構造、情報を確認する

ディレクトリ、ファイル一覧

各階層のレイアウトフォーマット

HTMLのマークアップと全体レイアウト
マークアップを確認する

全体のレイアウトフォーマットを作成する

①サイト全体に共通する設定を記述するbase.cssを読み込む
など

 

---

 

LESSON19　displayプロパティを活用したレイアウト
パンくずリストとフッターメニューを作る

displayプロパティの活用

 

---

 

LESSON20　CSSスプライトの仕組みを理解する
画像としてデザインされたグローバルナビゲーションを作る

 

---

 
LESSON21　メインコンテンツ領域を作成する
コンテンツ領域内の各要素に対するスタイル設定をする

メインコンテンツ領域えお完成させる

見出し等の共有スタイルをスタイル指定する

 

---

 

LESSON22　CSS3の概要

CSS3では何ができるのか？
①classやidに頼らないセレクタ作りが可能になる
②CSS3だけで表現できるデザインの幅が格段に広がる
③簡単に段組みを実現できるようになる
④CSSだけでウェブに動きがつけられるようになる
⑤Webフォントをサポート

Webフォントのサービス例
Google Fonts

https://fonts.google.com/

TypeSquare

https://typesquare.com/

⑥ウィンドウやデバイス画面サイズ等に応じて柔軟にCSSを切り替えられるようになるなど、

 

---

 

LESSON23　CSS3セレクタ

属性セレクタ
擬似クラス
否定、ターゲット、UI擬似クラス

 

---

 

LESSON24　CSS3プロパティ
テキストの装飾と新しい色
ボックスの装飾とボックスモデル
背景画像とグラデーション

 

---

 
LESSON25　変形・アニメーションとメディアクエリ
transform　変形
transform-origin　変形の原点
transition 　トランジションアニメーション

 

---

 

LESSON26　デバイスの特性を理解する

スマートフォンやタブレットはPCとはかなり異なる特性を持っています。
スマートフォンとタブレット

Googleのスマホ対応ラベル

モバイルフレンドリーテスト
Webサイトがモバイル端末に最適化されているかチェック

https://search.google.com/test/mobile-friendly

指で操作することを意識する
ひと目で、押せることが分かるデザイン

画面サイズとviewportの関係
Retinaディスプレイで画像が、ぼやける問題

表示パフォーマンスを改善するための対策
①ビットマップ画像を減らす

CSSで描画可能なオブジェクトはCSSに任せる

画像
CSS Shape Generator（現在エラー？。）
https://coveloping.com/tools/css-shapes-generator

特集な書体はWenフォントを利用する
Webフォント
Google Fonts

https://fonts.google.com/

単色アイコンはアイコンフォントを利用する
アイコン
Ico Moon

https://icomoon.io/

②画像デートサイズを最適化
Photoshopから書き出されただけの画像データには
表示に関係ないメタデータが含まれています。
データサイズを最適化するソフトやツール

Mac用
Image Optim
https://imageoptim.com/mac

Mac用
ImageAlpha
https://pngmini.com/

Windows用
PNGmicro

http://www.romeolight.com/ja/products/pngmicro/

Windows用
JPEGmicro

http://www.romeolight.com/ja/products/jpegmicro/

など解説

 

---

 
LESSON27　モバイル対応Webサイト制作の基礎知識

モバイル対応の手法、メリット、デメリット

モバイル対応の2つの方法
PCサイトとは別にモバイル専用サイトを作る。
メリット、モバイルユーザーならではのニーズや行動性に合わせたコンテンツ構成を提供できる
デメリット、メンテナンスや２度手間、コストが高くなる

もう1つは、PCサイトと同じHTMLを使用してレスポンシブWebデザイン
メリットは、PC、モバイル問わず、全てのユーザーに対して同一のコンテンツや情報が発信しやすい

デメリットは、PC、モバイルで同じHTMLで使用するので、技術的な制約がある。など

 

---

 

LESSON28　レスポンシブの画面設計とベースコーディング

レスポンシブWebデザインの画面設計
コンテンツファースト
ブレイクポイント

 

---

 
LESSON29　メディアクエリを使ったレイアウトの調整
ブレイクポイントに合わせてメディアクエリを記述する

 

---

 
LESSON30　Retinaディスプレイ対策

レスポンシブサイトではRetinaディスプレイのようなピクセル密度の高いデバイスから閲覧されることもあります。

ビットマップ画像の扱い

フルードイメージは等倍のみ
（sampleサイトでは、写真、ロゴ画像など）

固定サイズ画像は、2倍サイズを用意する
（sampleサイトでは、アイコンなど）

ベクトルデータで表現できるオブジェクト
丸、三角、矢印などCSSで描画
フォントデータ、Webフォント、アイコンフォント
SVG画像

三角アイコンをCSSで描画する
CSS triangle generator

http://apps.eky.hk/css-triangle-generator/

Google Fontsを使う

https://fonts.google.com/

 

---

 
主なWebフォントサービス

FONTPLUS
https://webfont.fontplus.jp/

TypeSquare

https://typesquare.com/

Fonts.com

https://www.fonts.com/ja

Adobe Typekit

https://typekit.com/

 

---

 

アイコンフォントを使う

IcoMoon

https://icomoon.io/

サンプルサイトのデザインは、960グリッドシステムを使い作成。
960グリッドシステムの解説のPDFをダウンロードできます。

960 grid system

https://960.gs/

 

---

 

補講　レスポンシブにまつわる各種TIPS

レスポンシブ対応おすすめプラグインの紹介など

スライダー
slick.js

http://kenwheeler.github.io/slick/

モーダル
magnific popup

http://dimsemenov.com/plugins/magnific-popup/

高さ揃え
matchHeight

http://brm.io/jquery-match-height/

レスポンシブメニュー
MeanMenu

https://www.meanthemes.com/plugins/meanmenu/

など、
この本、１冊、

HTML5&CSS3標準デザイン講座 単行本（ソフトカバー）

持って置くと、忘れないので、おすすめです。

 

---

 

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本（ソフトカバー） – 2019/5/24
草野 あけみ (著)
ゼロからしっかり学べる、本格Webデザイン。