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

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

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

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

 


 

ゼロから学べるWeb制作学習書がHTML5とCSS3に完全対応!

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

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

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

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

 


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

Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論 単行本 – 2021/11/23
ヘイドン・ピカリング (著), アンディ・ベル (著), 安田 祐平 (

 


 

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

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

 


 

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 サイトの投稿と問題解決

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

 


 

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

 


 

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

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

 


 

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

初心者からちゃんとしたプロになる Adobe XD基礎入門〈Webデザイン、ワイヤーフレーム、プロトタイピング〉 単行本(ソフトカバー) – 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制作の便利なサイト

仮の画像配置に
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デザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本(ソフトカバー) – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)

 


 

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

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

 


 
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制作のための実践的メソッド ワークフロー構築、コーディング規約、制作&ディレクションTipsなど、高品質な制作を支える現場の仕事術 単行本(ソフトカバー) – 2017/4/28

 


 

デザインの学校 これからはじめる Illustrator & Photoshopの本 [2021年最新版] 単行本(ソフトカバー) – 2021/5/10
図書館を検索中
黒野 明子 (著), ロクナナワークショップ (監修)

 


 

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

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

 


 

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

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

 


 

おうちネットショップ® 単行本(ソフトカバー) – 2021/5/21
山本祥輝 (著)
BASEでネットショップを開設

 


 

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

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

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

 


 

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

これ1冊でゼロから学べる Webプログラミング超入門 ーHTML,CSS,JavaScript,PHPをまるごとマスター 単行本(ソフトカバー) – 2016/7/29
掌田 津耶乃 (著)

 


 

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

作りながら学ぶWebプログラミング実践入門 ~一冊で理解するHTML、CSS、JavaScript、Node.js~ 単行本(ソフトカバー) – 2020/1/28
掌田津耶乃 (著)

 


 

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

 


 

Udemy(ユーデミー)
Udemy / 【世界で30万人が受講】フルスタック・Webエンジニア講座(2019最新版)

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

Udemy(ユーデミー)
Udemy / Webレイアウトをもっと自由に! Flexbox基礎講座

Udemy(ユーデミー)
Udemy / HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座

Udemy(ユーデミー)
Udemy / [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

Udemy(ユーデミー)
Udemy / AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得

 


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

最短4週間で未経験からプロを育てるオンライン完結のスクールです。
どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。

【現在提供中のコース】
・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・Webデザインコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース

 


 

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カラム

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

 


 

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

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グリッドといった“流行り”の手法の使い方・使いどころがわかります!

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉 (日本語) 単行本(ソフトカバー) – 2020/2/26

 


 

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

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

 


 

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

 


 

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

 


 

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

 


 
IT用語図鑑 ビジネスで使える厳選キーワード256 単行本 – 2019/5/13

 


 

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

 


 

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん 単行本(ソフトカバー) – 2017/3/27
たにぐちまこと (著)

 


 

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

 


 

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

 


 

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デザイン。

 


 

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

 


 

デザインの学校 これからはじめる Illustrator & Photoshopの本 [2019年最新版] 単行本(ソフトカバー) – 2019/6/6

 


 

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

本書では、Mr.M COFFEEという
カフェのWebサイトを作成します。
サンプルファイルもダウンロードできるので、
素材などを、自分で用意しなくてもいいので、すぐ勉強ができます。
HTML5に対応です。

また、BootstrapのCSSフレームワークでの本も出ています。
同じ
Bootstrap 4 フロントエンド開発の教科書 単行本(ソフトカバー) – 2018/8/25

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

 


 

Dreamweaverレッスンブック CC2019対応 単行本 – 2019/3/18

 


 

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

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

 


 

世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 単行本(ソフトカバー) – 2018/9/26

世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 単行本(ソフトカバー) – 2018/9/26

 


 

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

 


 

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

 


 

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

 


 

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

 


 

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

 


 

実習で身につく!新しいWebデザインの教科書~基礎から学べるHTML&CSSデザイン~ (SCC Books 408) 単行本 – 2018/3/19
境 祐司 (著)

Webデザインを基礎から習得、コスパ最強の1冊!

Webデザイン、HTML、CSSの基礎、Webレイアウトの基礎と応用などを、図と写真を用いて基礎から詳しく説明しています。
数多くの実習課題を掲載しましたので、ウェブサイトを実際に作成しながら学習できます。

 


 

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

 


 

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デザイン

 


 

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

 


 

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

挫折せずに学び通せる!

 


 

Udemy(ユーデミー)、おすすめです。

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

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)を作ってみよう!

 


 

価格:¥ 1,480(価格変動あり)

actto BST-02 ブックスタンド(OEM品番:EDH-004)

ブックスタンド
本を見ながらの作業する時に、
本を見開きで、コーディング、プログラミングなどする時に便利。
ブックスタンド。

 


 

無料

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

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

 


 

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

Udemy(ユーデミー)
Udemy / Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース

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

Udemy(ユーデミー)
Udemy / WebデザインのためのPhotoshop実践講座

Udemy(ユーデミー)
Udemy / 未経験からプロを目指す!実践PhotoshopCC講座

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

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

 


 

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

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

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

 


 

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

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

 


 

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

 


 

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

 


 

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

ベストセラーが大改訂!

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

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

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

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

 


 

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

 


 

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

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

 


 

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

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

 


 

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

 


 

イラスト図解でよくわかる HTML&CSSの基礎知識 単行本(ソフトカバー) – 2018/1/24

 


 

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

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

 


 

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

 


 

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

これから本気で学びたい人の最高の教科書!

 


 

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

 


 

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

 


 

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

 


 

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

 


 

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

 


 

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

 


 

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

 


 

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

 


 

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

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

 


 

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

 


 

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

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

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

 


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

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

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標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

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

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

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

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

HTML5&CSS3標準デザイン講座

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

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

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

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

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

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

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

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

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

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

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

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

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

 


 

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

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

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

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

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

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

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

 


 

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

ワイヤーフレームを作るには有名な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

 


 

Adobe Photoshop Elements 2019 & Adobe Premiere Elements 2019|学生・教職員個人版|Mac対応|カード版(Amazon.co.jp限定)

 


 

Adobe Illustrator CC + Photoshop CC|12か月版|Windows/Mac対応|オンラインコード版

Adobe Photoshop CC|12か月版|Windows/Mac/iPad対応|パッケージ(カード)コード版

Adobe Illustrator CC|12か月版|Windows/Mac対応|パッケージ(カード)コード版

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版

 


 

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

Acorn



Acorn 6 Image Editor

カテゴリ: グラフィック&デザイン
価格: 無料(価格変動あり)

APP STORE

 


 

Affinity Designer

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



Affinity Designer

カテゴリ: グラフィック&デザイン
価格: ¥6,000(価格変動あり)

APP STORE

 


 

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

画面をキャプチャー



Monosnap – screenshot editor

カテゴリ: グラフィック&デザイン
価格: 無料(価格変動あり)

APP STORE

 


 

Flation
アイコン素材

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

https://www.flaticon.com/

 


 

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

 


 

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

 


 

CodeCamp
現役エンジニアによるオンラインプログラミングスクール
NHKや日経など各種メディアに取り上げられてます。
書籍なども出版、Amazonのプログラミング学習カテゴリでランクイン。

無料の体験レッスンは7:00~23:40の間で自由な時間で受講可能。

 


 

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

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

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


menu1


menu2


menu3


menu4

 


 

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

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

Chapter02は
lesson6(うちのにゃんこ)
lesson7(うちのにゃんこ)
lesson8(うちのにゃんこ)
lesson9(うちのにゃんこ)


nyanko


form

 


 

Chapter03は
レイアウトについて
lesson11(floatレイアウト)
lesson12(positionレイアウト)

 


 

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


flexcoding

 


 

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

 


 

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

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


sample

 


 

ORIENTATION レッスンを始める前に

orientation1

orientation2

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

Macなら
CotEditor(無料)
mi(無料)
Jedit(有料)

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

 


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

Macなら
Adobe Brackets(無料)

Bracketsは、拡張機能の紹介とかはないです。

http://brackets.io/

 


 

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

 


 

Sublime Text(有料、無料)
Coda2(有料)

Windowsなら
Adobe Brackets(無料)
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などでも無料で利用できるサーバーなどあります。

 


 

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

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

 


 

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

 


 

FTPソフトは

Mac
FileZilla(無料)

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

Cyberduck

https://cyberduck.io/

Cyberduck
(無料と有料があります)



Cyberduck

カテゴリ: 仕事効率化
価格: ¥2,900(価格変動あり)

APP STORE

 


 

Windows
FileZilla(無料)
FFFTP(無料)
WinSCP(無料)

など紹介と解説
 


 

Chapter01 HTMLで文書を作成する

LESSON01 HTMLの概要

chapter01

lesson01

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

HTMLの役割
HTMLの基本構文
要素(Elements)
属性(Attribute)

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

ドキュメントツリー

DOCTYPE宣言(文書型宣言)
html要素
head要素
title要素
meta要素

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

 


 

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

lesson02

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

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

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

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

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


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

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

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

情報のグルーブ化

divをsectionに置き換える

不要な区切り線を削除

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


 

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

lesson03

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

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

重要な語句を強調する
<strong>

画像を挿入する

リンクを設定する

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

絶対パスと相対パス

ルート相対パス

など。

 


 

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

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

lesson04

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

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

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

見出しのセルの要素を

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

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

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

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

The W3C Markup Validation Service

https://validator.w3.org/

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


 

Chapter02 CSSで文書を装飾する

LESSON05 CSSの概要

chapter02

lesson05

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

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


 

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

lesson06

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

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

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

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

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

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

 


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

lesson07

背景画像の扱い方を練習

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

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

 


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

lesson08

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

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

基本的なfloatの仕組み

 


 

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

lesson09

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

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

 


 

Chapter03 CSSレイアウトの基本

LESSON10 レイアウトの種類

chapter03

lesson10

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

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

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

アダプティブレイアウト

 


 

LESSON11 floatレイアウト

lesson11

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

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

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

 


 

LESSON12 positionレイアウト

lesson12

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

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

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

 


 

Chapter04 本格的なHTML5によるマークアップを行うための基礎知識

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

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

chapter04

lesson13

 


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

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/

など、紹介

 


 

Chapter05 本格的なWeb制作のための設計と準備

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

chapter05

lesson16

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

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

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

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

 


 

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


 

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

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

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

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

 


 

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


 

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

lesson17

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

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

 


 

Chapter06 実践的なWebサイトのコーディング

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

chapter06

lesson18

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

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

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

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

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

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

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

 


 

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

displayプロパティの活用

lesson19

 


 

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

lesson20

 


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

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

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

lesson21

 


 

Chapter07 CSS3入門

LESSON22 CSS3の概要

chapter07

lesson22

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

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

https://fonts.google.com/

TypeSquare

https://typesquare.com/

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

 


 

LESSON23 CSS3セレクタ

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

lesson23

 


 

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

lesson24

 


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

lesson25

 


 

Chapter08 マルチデバイス対応の基礎知識

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

chapter08

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サイト制作の基礎知識

lesson27

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

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

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

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

 


 

Chapter09 レスポンシブ・ウェブデザインのコーディング

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

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

chapter09

lesson28

 


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

lesson29

 


 
LESSON30 Retinaディスプレイ対策

lesson30

レスポンシブサイトでは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/

など、
この本、1冊、

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

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

 


 

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

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】 単行本(ソフトカバー) – 2019/5/24
草野 あけみ (著)

LINEで送る
Pocket

おすすめ