エビスコム HTML&CSS コーディング・プラクティスブック実践シリーズ 読んでみた。

[記事公開日]2021/08/14

デザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。
HTML&CSS コーディング・プラクティスブック 1 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版

作って学ぶ HTML&CSSモダンコーディング 単行本(ソフトカバー) – 2021/9/16
エビスコム (著)

多くの書籍、参考書など読む必要はないらしいです。
決めた本や1つの本を読み、その内容を活用する。本は情報収集するためのものではない。
ただ、Web系って技術が進化してるので、「これ」と言う。一冊だけでは難しいかも。
最低でも数冊は読む感じ?コレクターなら別だけど。

エビスコム HTML&CSS コーディング・プラクティスブック実践シリーズ 読んでみた。

STEP 1 デザインカンプの解析
STEP 2 コーディングの準備
STEP 3 パーツの設定、ヘッダー
STEP 4 パーツの設定、ヒーローイメージ
STEP 5 パーツの設定、メッセージ
STEP 6 パーツの設定、サービス
STEP 7 パーツの設定、お問い合わせ
STEP 8 パーツの設定、フッター
STEP 9 パーツの設定、ナビゲーションメニュー
STEP 10 仕上げと最終チェック

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/

CSSなども進化してるみたいです。

The State of CSS 2020
https://2020.stateofcss.com/ja-JP/

2021年に伸びるCSSプロパティ3選
https://www.mitsue.co.jp/knowledge/blog/frontend/202102/02_1740.html

よくあるWeb制作の悩みをCSSで解決!最新テクニック40選まとめ
https://photoshopvip.net/131693

めっちゃ楽!面倒なWeb制作から救う最新オンラインツール44個まとめ
https://photoshopvip.net/131642

 


 

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

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

 


 

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

デザインカンプを見てのコーディングの仕方は2種類あり
上から下へ順番に作っていく
または、共通のパーツから作っていくなど

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

 


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

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

 


 
いろいろな、いろ。 配色に着目したデザインレイアウトの本 単行本 – 2021/12/4
ingectar‐e (著)
ちょっとしたコツを押さえるだけで、センスのいい配色デザインができるようになる!

いろいろな、いろ。 配色に着目したデザインレイアウトの本 単行本 – 2021/12/4
ingectar‐e (著)

感覚よりも段取り力が大事! 一生役立つ「伝わる」デザインの考え方 単行本(ソフトカバー) – 2021/7/20
細山田デザイン事務所 (著)
一生懸命デザインしても、スタイリッシュに見えない。
既存のデザインをマネしてしまう。
クライアントの要望がわからない…

感覚よりも段取り力が大事! 一生役立つ「伝わる」デザインの考え方 単行本(ソフトカバー) – 2021/7/20
細山田デザイン事務所 (著)

 


 

ネットに詳しいだけでネットマーケ担当者になってしまった人が本気でマーケターを目指す本 単行本(ソフトカバー) – 2021/8/21
佐藤 昌弘 (著)
マーケティングにネットは避けて通れない必須の時代

今は、1カラムのサイトが多いです。
Amazonサイトも3カラムから1カラムに。
昔はPCからサイトを閲覧してた。スマートフォンが普及してから、
現在では、スマートフォンでサイトを見るので、1カラム(1ペラ)が支流

ネットに詳しいだけでネットマーケ担当者になってしまった人が本気でマーケターを目指す本 単行本(ソフトカバー) – 2021/8/21
佐藤 昌弘 (著)

 


 

通過率84.6%のプロが教える 資料作成&プレゼン大全 単行本 – 2021/10/14
亀谷 誠一郎 (著)
この基本さえ押さえておけば、驚くほど企画が通る!あまたある競合のなかから選ばれ続けている“現場のプロ”が、長年の体験から編み出したノウハウを豊富な図解とともに徹底解説。悩める若手ビジネスパーソン必携の書。

通過率84.6%のプロが教える 資料作成&プレゼン大全 単行本 – 2021/10/14
亀谷 誠一郎 (著)

プレゼン思考 単行本(ソフトカバー) – 2021/6/23
小西 利行 (著)
クリエイターならではの企画、アイデア、発想を研ぎ澄ませるメソッドも丁寧に解説。

 


 

プロの思考整理術 単行本(ソフトカバー) – 2021/11/17
和仁 達也 (著)
本書の思考整理術を「自分の頭のモヤモヤを解消したい」人や、お客様や部下、友人、家族の相談に乗って感謝され、より良い関係性を育みたいビジネスパーソンの皆さんにお届けします。

プロの思考整理術 単行本(ソフトカバー) – 2021/11/17
和仁 達也 (著)

あてはめるだけで“すぐ”伝わる 説明組み立て図鑑 単行本(ソフトカバー) – 2021/11/25
犬塚壮志 (著)
「何をどこから説明すればいいの?」という疑問に答える決定版
説明するときに「何からどう説明しよう?」と悩むことはないでしょうか?
実は、説明には、用途に応じて「型」があります。

あてはめるだけで“すぐ”伝わる 説明組み立て図鑑 単行本(ソフトカバー) – 2021/11/25
犬塚壮志 (著)

 


 

初心者からちゃんとしたプロになる WordPress基礎入門 単行本(ソフトカバー) – 2021/11/15
ちづみ (著), 大串 肇 (著), さいとう しずか (著)
WordPressでのサイト制作の基礎がしっかり身につく!
〈こんな方にオススメ〉
・仕事としてWordPressを勉強したい方
・WordPressで自分の思うようなサイトを構築したい方
・プロレベルでWordPressを活用したいブログ運営者の方

初心者からちゃんとしたプロになる WordPress基礎入門 単行本(ソフトカバー) – 2021/11/15
ちづみ (著), 大串 肇 (著), さいとう しずか (著)

 


 

無料でフォーム作成から問い合わせ対応・顧客管理までできるformrun

 


 

担当者1人で取り組める はじめてのネット広告 (DOBOOKS) 単行本(ソフトカバー) – 2021/9/30
船井総合研究所 (著)
はじめてネット広告を担当する人にとって
・どのような準備が必要で
・何をしなければいけないか
を「基礎」と「応用」に分けて紹介!

担当者1人で取り組める はじめてのネット広告 (DOBOOKS) 単行本(ソフトカバー) – 2021/9/30
船井総合研究所 (著)

 


 

儲かる会社はホームページが9割! 単行本 – 2021/10/13
芝田 弘美 (著)
オンラインによる会社の売り上げを高めるには
ホームページが一番! ホームページ集客術を専門用語を使わず
説明します。

儲かる会社はホームページが9割! 単行本 – 2021/10/13
芝田 弘美 (著)

見るだけIT用語図鑑278 単行本(ソフトカバー) – 2021/9/25
草野 俊彦 (著)

見るだけIT用語図鑑278 単行本(ソフトカバー) – 2021/9/25
草野 俊彦 (著)

 


 

伝わる図解! 超入門 (TJMOOK) ムック – 2021/10/13
久保田 麻美 (著)
いまビジネスの場で話題! 会議などの内容を図解でわかりやすくまとめる方法「グラレコ」を徹底解説します。

伝わる図解! 超入門 (TJMOOK) ムック – 2021/10/13
久保田 麻美 (著)

 


 

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

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

 


 


Amazon.co.jp: Amazon Music Unlimited – 3ヶ月 0円で音楽を聴き放題 4か月目以降は月額980円(プライム会員の場合は780円)

Amazon 売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。
ホーム&キッチン
家電&カメラ
ゲーム、本、CDなど

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

Amazon
「Kindle Unlimited」
読み放題
月額980円で好きなだけ読める
初回30日間は無料体験


 


 
見るだけでデザインセンスが身につく本 単行本 – 2021/12/3
大坪拓摩 (著)
多くの人に魅力的、センスがある、と評価されるデザインには『法則』『ルール』がある!

見るだけでデザインセンスが身につく本 単行本 – 2021/12/3
大坪拓摩 (著)

みんなのデザイン入門 [ #2 レイアウトの基礎 ] : 誰でもうまくなるリアルな思考法と実践例 Kindle版
山﨑みどり (著) 形式: Kindle版

デザイナーでない人でも、気軽に学べるデザインの入門書

 


 

作って学ぶ HTML&CSSモダンコーディング 単行本(ソフトカバー) – 2021/9/16
エビスコム (著)
モバイルファースト&レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする

作って学ぶ HTML&CSSモダンコーディング 単行本(ソフトカバー) – 2021/9/16
エビスコム (著)

ドットインストールは、わかりやすい動画で解説されてると思います。

ドットインストール

Web制作の流れを体験しよう
はじめてのWeb制作
シンプルなプロフィールサイトを作りながらWeb制作の流れを体験していきます。
https://dotinstall.com/lessons/basic_website

Web制作の開発環境を整えよう macOS編
https://dotinstall.com/lessons/basic_pcsetup_mac_v3

Web制作の開発環境を整えよう Windows編
https://dotinstall.com/lessons/basic_pcsetup_win_v3

プログラミング学習の悩みを相談しよう
悩みごとがあれば相談してみよう
https://dotinstall.com/lessons/programming_ama

 


 

つくってかせごう: 救済200名以上!あのWordPress解説動画をこの1冊に完全マニュアル化 Kindle版
ゆか (著) 形式: Kindle版
WordPressが難しくて自分では作れないと思っているあなたへ

UXと理論で作る Webデザイン: デザイナーでなくてもわかる Kindle版
川合 俊輔 (著), 大本あかね (著), 菊池崇 (著) 形式: Kindle版
デザインする際にツールを思い通りに使いこなせることも重要ですが、デザインするための原則や法則を学ぶことはさらに重要です。
なぜこのレイアウトなのか、なぜこのUIなのか、なぜこの色なのか…

 


 

Photoshop よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/10/21
senatsu (著)

Photoshop よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/10/21
senatsu (著)

(PDF版電子書籍・練習用ファイル・解説動画付き)Illustrator よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/11/4
石川 洋平 (著), 清水 健次 (著), 堀内 良太 (著)

(PDF版電子書籍・練習用ファイル・解説動画付き)Illustrator よくばり入門 CC対応 (できるよくばり入門) 単行本(ソフトカバー) – 2021/11/4
石川 洋平 (著), 清水 健次 (著), 堀内 良太 (著)

 


 

2021年9月
「電子書籍には所有権はない。規約違反などでアカウントが停止されれば、すべての蔵書を一瞬で失うことになる」
「4000冊の蔵書が一瞬で吹っ飛ぶ」アマゾンの電子書籍が抱える根本的な落とし穴
https://news.yahoo.co.jp/articles/f33fbefb012d7d6b83a830294891c24a8ab6f136

 


 

エビスコム HTML&CSS コーディング・プラクティスブック実践シリーズの他にも、
狩野 祐東 さんの教科書では教えてくれないHTML&CSSもオススメです。
JavaScriptの本、同様、この本も狩野さんが独自の噛み砕いての解説本です。

この本も、
デザインカンプを見てコーディングするので本格的に学べると思います。

また、現在のWeb制作では?、PhotoshopやIllustratorは使われてなく、Adobe XDやSketch、figmaなどで作成してるのが多いそうです。

この本では、最初に、デザインカンプの画像を見て、画像をパーツ、パーツで区切る。
①デザインカンプ(画像)を見て、コンテナに分ける。
②コンテナに分けたら、それを、今度はモジュールに分ける。
コンテナとモジュールは、この本、独自の言い方です。

コンテナは、例→ヘッダーコンテナ、メインコンテナ、フッターコンテナ。
モジュールは、例→1つ1つのパーツことで、これをボックスなどとも言う。

人によっては、昔、Web制作などする時(した時)に、全部、divタグで囲ってしまえばいいって方もいると思います。

今では、いろいろな本なども出てるので、自分で学びやすい仕方で学ぶといいと思います。

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

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

 


 
確かな力が身につくJavaScript「超」入門 第2版 単行本 – 2019/9/21
狩野 祐東 (著)

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

 


 

HTMLフォームの基本 Kindle版
ともひこ (著) 形式: Kindle版
本書はHTMLフォームの基本を学ぶためのものです。

 


 

【Amazon.co.jp限定】見てわかる、迷わず決まるフォントのアイデア マネするだけでセンスのいいフォント(特典「装飾につかえる! カジュアルな手書きフォントデータ」データ配信) (見てわかるシリーズ) 単行本(ソフトカバー) – 2021/10/19
ingectar-e (著)

【Amazon.co.jp限定】見てわかる、迷わず決まるフォントのアイデア マネするだけでセンスのいいフォント(特典「装飾につかえる! カジュアルな手書きフォントデータ」データ配信) (見てわかるシリーズ) 単行本(ソフトカバー) – 2021/10/19
ingectar-e (著)

 


 

ストーリーと連動した4つのWebサイトをつくります。簡単なサイトから少しずつレベルアップ!
4大特典付き
特典PDFは、サイトの公開方法(ドメインやFTP設定など)
Adobe XDデータ(サンプルサイトのデザインデータ)
サイト集(プロも使う、お役たちサイト集)
チートシート(復習m学習に使える4種のチートシート)

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

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

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

 


 

Web制作の役立つサイト

cman.jp
無料 ホームページのパーツ作成
https://webparts.cman.jp

CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説!
https://jajaaan.co.jp/css/css-headline/

「シンプル」こそ大事!ホームページ制作で基本の「やるべきこと」とよくある間違い
https://photoshopvip.net/130600

マネるデザイン研究所
普通のWebデザイン集とは違い、ちょっぴりポイントを解説したWebデザイン集です。
https://maneru-design-lab.net

cms design|CMSで構築されたWebデザインギャラリー
https://cmsdesign.jp

Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
https://responsive-jp.com

現代デザイン | Webデザインギャラリー・サイトリンク集
現代デザインはWebサイトを集めたギャラリー・リンク集です。
https://gendaidesign.com

 


 

【特典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/9/16
エビスコム (著)
モバイルファースト&レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする

作って学ぶ HTML&CSSモダンコーディング 単行本(ソフトカバー) – 2021/9/16
エビスコム (著)

作って学ぶ HTML&CSSモダンコーディング

個人サイトを作ろう! テンプレートですぐできる! すぐに身につく! HTML&CSS 単行本(ソフトカバー) – 2021/8/24
ガタガタ (著)
サイトを作るってとっても楽しい! 基本のテンプレートがあるから誰でも作れる!

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

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

ウェブ立地論 ~“来てほしい人にアプローチする”集客につながる顧客目線のウェブの作り方 単行本(ソフトカバー) – 2021/8/26
石井 研二 (著)

ウェブ立地論 ~“来てほしい人にアプローチする”集客につながる顧客目線のウェブの作り方 単行本(ソフトカバー) – 2021/8/26
石井 研二 (著)
ウェブ立地論 ~“来てほしい人にアプローチする”集客につながる顧客目線のウェブの作り方

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

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

できるデザイン教室 HTML&CSS&Webデザインきほん講座 単行本(ソフトカバー) – 2021/10/20
岩本 修 (著)

 


 

昔は、本って言ったら、紙の本しか無かったです。
今では、スマートフォンなど普及し、
いろいろなデバイスなどもあります。
紙の本ではなく電子書籍などもあります。

Amazonでは、電子書籍のKindle版の本など多く扱ってます。

Kindle版は手軽に利用が出来ます。
Kindle版は読み放題でもあります。

 


 

Amazon
「Kindle Unlimited」
読み放題
月額980円で好きなだけ読める
初回30日間は無料体験


Kindle版など利用の注意。
Amazonのサイトで、本など見たときに、
「紙版」と「Kindle版」が出てる場合があります。
Amazonのサイトでは、「Kindle版」の場合、1クリックで購入されてしまうので注意が必要です。

1クリックは便利だけど、
Kindle版の場合は、間違って買ってしまう場合あり

間違って買った場合、その画面からキャンセルができますが、画面を移動したりすると、画面上からキャンセルなど出来ないので、電話で問い合わせするしかないです。

 


 

Amazon 売れ筋ランキング
Amazon.co.jpの売れ筋ランキング。ランキングは1時間ごとに更新されます。
ホーム&キッチン
家電&カメラ
ゲーム、本、CDなど

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

 


 

Kindle版などの注意。
買う場合は注意が必要です。

AmazonのKindle版は誰でもKindle版を販売できます。

中には、悪質というか、
Kindle版を買ったはいいが、
大してタメになる情報などは書いてなく、
「他のサイト」に誘導するような、Kindle版もあります。
価格が安いならいいけど?。

サンプルで試し読みならいいけど。
Kindle版など購入する場合は、注意が必要です。

普通の本の販売の場合は、誰でも販売は出来ないです。

Kindle版を利用するのに注意。
他にも、Kindle版を買ったはいいが、通信エラーとかで、Kindle版が正常に表示されず読めないなど。

 


 

最新 Kindle Unlimited 電子書籍写真集の作り方 (玄光社MOOK) (日本語) ムック – 2020/7/30

最新 Kindle Unlimited 電子書籍写真集の作り方 (玄光社MOOK) (日本語) ムック – 2020/7/30

 


 

2021年6月
Amazonアプリで障害か、「すぐ落ちる」報告相次ぐ PrimeビデオやKindleも【解決済み】
https://www.itmedia.co.jp/news/articles/2106/24/news075.html

Amazonのサービス(Kindle版)を、お金を払って利用してる人は多いです。

AmazonのKindleなど、ほか。
Kindleなどは、人によっては、とても分かりづらいです。(使い方など)

Kindleで本など見るには、
①Kindleソフト
②Kindle Cloud Reader(ブラウザ版)
③スマートフォン用のKindleアプリなどあります。

自分は、PC版(Mac版)のKindleをソフトをダウンロードして使う。
Kindleアプリを起動する。
すると、Kindleアプリが終了してまうことが、たまにあった。
前からあったけど、しばらくしたら、また普通に使える。

これは、通信回線のエラーかサーバーのエラー?と思ってた。

自分は、インターネットの回線は、jcomを使用。
jcomはたまに通信エラーなどもあります。

インターネットの検索で、「Kindle 落ちる」 など検索すると、いろいろ出てきます。

 


 

Amazon、Kindle版買った本を、
Kindleで読みたくKindleアプリを起動したら、Kindleがすぐ終了。
何度やってもだめ。
スマートフォンのKindleアプリだと普通に見れる。

自分の場合は、PC版のKindleアプリだけ落ちて使いものにならない。

Amazon側で障害があったそうです。

できればAmazonの公式サイトで、通信障害など表示してほしいです。
いろいろ試した時間が無駄になります。

 


 

Amazon
タイムセール
家電、日用品、ファッションほか人気の商品が毎日お買得価格で登場!
これから開催予定のタイムセール一覧


Amazon タイムセール 家電、日用品、ファッションほか人気の商品が毎日お買得価格で登場!

 


 

Kindle版
エビスコムのHTML&CSS コーディング・プラクティスブック実践シリーズ
いろいろ出ています。おすすめ

Amazon
「Kindle Unlimited」
読み放題
月額980円で好きなだけ読める
初回30日間は無料体験


目次
エビスコム HTML&CSS コーディング・プラクティスブック実践シリーズ 読んでみた。

STEP 1 デザインカンプの解析
STEP 2 コーディングの準備
STEP 3 パーツの設定、ヘッダー
STEP 4 パーツの設定、ヒーローイメージ
STEP 5 パーツの設定、メッセージ
STEP 6 パーツの設定、サービス
STEP 7 パーツの設定、お問い合わせ
STEP 8 パーツの設定、フッター
STEP 9 パーツの設定、ナビゲーションメニュー
STEP 10 仕上げと最終チェック

※プリント・レプリカ形式は無料のKindleアプリ(PC、Mac、Android、iOS用)やFireタブレットでご利用いただけます。
Kindle Paperwhiteなどの電子書籍リーダーやKindle Cloud Readerでは利用できません。
対応デバイスをご確認のうえ、ご利用ください。

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版

 


 

グーテンベルク時代のWordPressノート テーマの作り方(入門編) (EP NOTE SERIES) [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
WordPressのブロックエディタ「Gutenberg」を活かしたオリジナルテーマの作成方法をステップ・バイ・ステップで解説。

グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編) (EP NOTE SERIES) [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版
ランディングページ&1カラムサイトの作成方法を全302ページで解説。

エビスコム
WordPressローカル環境 構築ガイド
ローカルサーバー環境を用意し、自分のパソコン上でWordPressを使う方法
https://github.com/ebisucom/wordpress-local

 


 

Kindle版など操作する時に便利かも?

価格:¥ 2,209(価格変動あり)

タッチペン KINGONEスタイラスペン 極細 超高感度 iPad/スマホ/タブレット対応 たっちぺん 磁気吸着機能対応 ipad ペン USB充電式 スマホ ペン
ブランド: KINGONE

ミヨシ MCO なめらか筆ファイバ-ヘッドタッチペン シルバ- STP-11/SL
ブランド: ミヨシ

 


 

Kindle版を利用について、
せっかくKindle版を買った。
あれ、読めないの?。

Kindle版の場合、本によっては
※プリント・レプリカ形式は無料のKindleアプリ(PC、Mac、Android、iOS用)やFireタブレットでご利用いただけます。
※Kindle Paperwhiteなどの電子書籍リーダーやKindle Cloud Readerでは利用できません。
対応デバイスをご確認のうえ、ご利用ください。
など記載してるのもあります。

AmazonのKindleについて

Kindleは、Webブラウザで見れるKindle Cloud Readerもあり
Kindle Cloud Reader
https://read.amazon.co.jp/kindle-library

ただ、
Kindle Cloud Readerでは、
読める本と読めない本があるのも注意です。

申し訳ありません。この本は Kindle Cloud Reader で開くことができません。Windows、Mac、Android、または iOS 用の無料 Kindle アプリで読むことができます。
と表示される本は、
Kindle Cloud Readerでは対応してない本もあるので。

Kindle Cloud Readerで読めない本は
Kindleの専用ソフトをダウンロードして使う感じ

Kindleの専用ソフトは使い勝手が悪い感じです。
それは、Kindleの専用ソフトは、起動すると、落ちる。
落ちる。何度も落ちるので。

macの場合は、
Kindleアプリは、
Amazonのサイトからダウンロードできるのと
mac Storeでダウンロードできるのがあり

自分は、Amazonのサイトから昔にダウンロードしたのを使ってた。
ただ、Kindleアプリが落ちるので試しに、古いバージョンのKindleアプリだと見れた

パソコンで読むときはパソコン用のKindleソフトを使う人が多いと思います。

 


 
初心者からちゃんとしたプロになる HTML+CSS実践講座 (日本語) 単行本(ソフトカバー) – 2020/8/28
相原 典佳 (著), 草野 あけみ (著), サトウ ハルミ (著), 塚口 祐司 (著)
1日30分からはじめる! 制作現場の実践的コーティング

初心者からちゃんとしたプロになる HTML+CSS実践講座 (日本語) 単行本(ソフトカバー) – 2020/8/28
相原 典佳 (著), 草野 あけみ (著), サトウ ハルミ (著), 塚口 祐司 (著)

 


 
シリーズの第3弾
初心者からちゃんとしたプロになる JavaScript基礎入門 (日本語) 単行本(ソフトカバー) – 2020/3/25

初心者からちゃんとしたプロになる JavaScript基礎入門 (日本語) 単行本(ソフトカバー) – 2020/3/25

 


 

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

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

 


 

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

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

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉 単行本(ソフトカバー) – 2021/3/2
柏岡 秀男 (著)

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉 単行本(ソフトカバー) – 2021/3/2
柏岡 秀男 (著)

初心者からちゃんとしたプロになる Photoshop基礎入門 単行本(ソフトカバー) – 2021/2/2
おの れいこ (著), 髙橋 宏士朗 (著)

初心者からちゃんとしたプロになる Photoshop基礎入門 単行本(ソフトカバー) – 2021/2/2
おの れいこ (著), 髙橋 宏士朗 (著)

初心者からちゃんとしたプロになる Illustrator基礎入門 単行本(ソフトカバー) – 2021/5/7
尾花 暁 (著), 高橋 としゆき (著), 樋口 泰行 (著)

初心者からちゃんとしたプロになる Illustrator基礎入門 単行本(ソフトカバー) – 2021/5/7
尾花 暁 (著), 高橋 としゆき (著), 樋口 泰行 (著)

初心者からちゃんとしたプロになる InDesign基礎入門 単行本(ソフトカバー) – 2020/12/22
森 裕司 (著)

初心者からちゃんとしたプロになる InDesign基礎入門 単行本(ソフトカバー) – 2020/12/22
森 裕司 (著)

 


 
Progateをした後に、何をすればいいの?

Progateの次に学ぶ!Python演習問題100問パック!〜データ構造編〜 Kindle版
はやたす (著) 形式: Kindle版

 


 

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

ドットインストール
プログラミング学習サービス「ドットインストール」
3分動画でマスターできるプログラミング学習サービス
https://dotinstall.com

YouTubeなどは無料で、プログラミングを解析してる動画などあるので、おすすめ

Progate(プロゲート)
Progateはオンラインプログラミング学習サービスです。
https://prog-8.com

CODEPREP
CODEPREPはプログラミングを書いて動かしながら 学ぶ実践型のプログラミング学習サービスです。
https://codeprep.jp

シラバス(Cyllabus) – キュレーション型 eラーニングシステム
シラバスは、WEBデザインやWEBアプリケーションの 開発方法を学ぶことができる WEB サービスです。ステップバイステップで、マネをしながら学習することができます。
https://cyllabus.jp

 


 
Webサイトのリサーチに便利なサイト
SANKOU! | Webデザインギャラリー・参考サイト集
https://sankoudesign.com

SANKOU!
LP(ランディングページ)
https://sankoudesign.com/category/lp/

シンプル
https://sankoudesign.com/category/simple/

コーポレートサイト
https://sankoudesign.com/category/corporatesite/

ECサイト・オンラインショップ
https://sankoudesign.com/category/ec-onlineshop/

女性向け・女性的
https://sankoudesign.com/category/woman/

SP
https://sankoudesign.com/sp/

 


 

Udemy
Udemyを知っている方、知らない方、多いと思います。

インターネット(スマートフォン)などの動画配信で、オンデマンドビデオで受講することができます。

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

 


 
たにぐち まこと さんは、Udemyでも動画などあります。

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

Udemy / [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門。Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。

Udemy / WordPress開発マスター講座 WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作ろう

Udemy / PHP+MySQL(MariaDB) Webサーバーサイドプログラミング入門 本格的なWebシステム開発に欠かせない、サーバーサイドプログラミングをPHP+MySQLで学ぼう。

Udemy / SQL入門 – MySQLで学ぶデータベース データベースで、顧客データ・商品データ・売上データを効率的に管理しよう。この講座では、操作するための専用言語 SQLを学びながら、MySQLの操作方法を学びます。

Udemy / Git入門: ノンプログラマーのための Git Gitの基本やメリットの他、無償で使える GitKrakenを利用した Git操作を実際の操作を通じて学びます。GitHubと連携したリモートリポジトリーの活用方法や、GitHub Flowなどの運用ルールも学び、Gitをマスターできます

Udemy / Scratch 3で、親子で学べるゲームプログラミング ゲームを作って、子どもと楽しみながらプログラミングを学ぶことができます

 


 

システムを作らせる技術 エンジニアではないあなたへ 単行本(ソフトカバー) – 2021/7/22
白川 克 (著), 濵本 佳史 (著)

システムを作らせる技術 エンジニアではないあなたへ 単行本(ソフトカバー) – 2021/7/22
白川 克 (著), 濵本 佳史 (著)

エンジニアのための新教養 □○△で描いて、その場でわかるシンプル図解 何でも伝え、何でもまとめるストラクチャードコミュニケーション 単行本(ソフトカバー) – 2021/7/19
加島 一男 (著)

エンジニアのための新教養 □○△で描いて、その場でわかるシンプル図解 何でも伝え、何でもまとめるストラクチャードコミュニケーション 単行本(ソフトカバー) – 2021/7/19
加島 一男 (著)

 


 
現場で使える Web編集の教科書 単行本 – 2021/7/20
withnews+ノオト+Yahoo!ニュース (著)

現場で使える Web編集の教科書 単行本 – 2021/7/20
withnews+ノオト+Yahoo!ニュース (著)

 


 

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

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

 


 

エビスコム HTML&CSS コーディング・プラクティスブック実践シリーズの他にも、
狩野 祐東 さんの教科書では教えてくれないHTML&CSSもオススメです。

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

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

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

 


 

ノーコードシフト プログラミングを使わない開発へ 単行本(ソフトカバー) – 2021/6/23
安藤 昭太 (著), 宮崎 翼 (著), NoCode Ninja (著)

ノーコードシフト プログラミングを使わない開発へ 単行本(ソフトカバー) – 2021/6/23
安藤 昭太 (著), 宮崎 翼 (著), NoCode Ninja (著)

現場で使えるVue.js 3.x 実践ガイド 単行本(ソフトカバー) – 2021/7/20
株式会社MONSTER DIVE (著)

現場で使えるVue.js 3.x 実践ガイド 単行本(ソフトカバー) – 2021/7/20
株式会社MONSTER DIVE (著)

 


 

作って学ぶ HTML&CSSモダンコーディング 単行本(ソフトカバー) – 2021/9/16
エビスコム (著)
モバイルファースト&レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする

作って学ぶ HTML&CSSモダンコーディング 単行本(ソフトカバー) – 2021/9/16
エビスコム (著)

作って学ぶ HTML&CSSモダンコーディング

エビスコム HTML&CSS コーディング・プラクティスブック実践シリーズ 読んでみた。

エビスコム (著)知ってる人、知らない人いると思います。
WebデザインやWebサイトの制作など勉強する場合、
世代によっては、エビスコムの書籍を買って勉強した人は多いと思います。

今では、便利で、YouTubeの動画や、動画を購入してなど、動画など見ながら、Webサイトの制作の仕方なども学べます。

エビスコム、昔は、書籍のみの発売でしたが、現在では電子版のみで販売してるシリーズもあります。

「HTML&CSS コーデイング・プラクティスブック」
レスポンシブに対応した「デザインカンプ」 +「 素材」+「指示書」を見て、コーディングするシリーズです。

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ [プリント・レプリカ] Kindle版
エビスコム (著) 形式: Kindle版

HTML&CSSやWordPress関連の本など、
書籍によっては書いある説明など、まちまちで、どれが?正解なの?わからないなどあります。

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ
1ページのサイトなので、初心者などのも手軽に?学べると思います。

自分は、
Amazon「Kindle Unlimited」読み放題で読んでみました。

Amazon
「Kindle Unlimited」
読み放題
月額980円で好きなだけ読める
初回30日間は無料体験


HTML&CSS コーディング・プラクティスブック 実践シリーズ
デザインカンプと指示書に従い、
Webページをコーディングしてみる実践シリーズです。
第1弾(HTML&CSS コーディング・プラクティスブック 1 実践シリーズ)ではAdobe XDで作成されたコーポレート系サイトのデザインカンプを元に、カンプの解析、パーツの抽出を行い、
「どうしてこのように設定するのか?」を踏まえながらコーディングしていきます。

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ
STEP 1 デザインカンプの解析
STEP 2 コーディングの準備
STEP 3 パーツの設定、ヘッダー
STEP 4 パーツの設定、ヒーローイメージ
STEP 5 パーツの設定、メッセージ
STEP 6 パーツの設定、サービス
STEP 7 パーツの設定、お問い合わせ
STEP 8 パーツの設定、フッター
STEP 9 パーツの設定、ナビゲーションメニュー
STEP 10 仕上げと最終チェック

サンプルなどもダウンロードできます。
デザインカンプ(XDデータ)と作例はダウンロードデータに同梱してあります。
レイアウトにはFlexbox(フレキシブルボックス)を使用します。
モバイルファーストとレスポンシブで作成します。

コーディング・プラクティスブック・デザインカンプ、指示書


コーディング・プラクティスブック

 


 

※プリント・レプリカ形式は無料のKindleアプリ(PC、Mac、Android、iOS用)やFireタブレットでご利用いただけます。
Kindle Paperwhiteなどの電子書籍リーダーやKindle Cloud Readerでは利用できません。
対応デバイスをご確認のうえ、ご利用ください。

STEP 1 デザインカンプの解析

コーポレートサイトを作成
デザインカンプと指示書を元に、ページを作成

デザインカンプと指示書
デザインカンプ
指示書

サンプルのダウンロードのデータ
「case-study」フォルダは作例の完成データを収録しています。

「comp」フォルダはデザインカンプを収録しています。

comp.xdは、Adobe XDで作成されたデザインカンプ。
JPEGファイルはデザインカンプをJPEGで出力したもの。
など

「img」フォルダは、デザインカンプといっしょに提供された画像データを収録しています。

「img-created」フォルダは提供されたデータを元に作成した画像データを収録しています。


サンプルのダウンロードのデータ

 


 
手間ですが、
Adobe XDの無料版をインストールして
Adobe XDのソフトでデザインカンプを開けば
数値やカラーコードなども表示されます。


デザインカンプ


デザインカンプ

デザインカンプなどの作成に便利なツール、
Figmaなどの方が使いやすいかも?。
Figmaは無料で利用が出来ます。無料版だといろいろな制限がありますが、
Adobe XDみたいに、インストールするのが大変ではないです。

Figma: the collaborative interface design tool.
https://www.figma.com

Web制作会社などはAdobe XDの使用が多いらしいです。
現代的な会社や近代的な会社、
システム会社などはFigmaを使用。
また、Adobe XDから、Figmaに移行してる会社などは多いみたいです。

人よっては、Adobe XDは使い勝手が、とても悪いです。

FigmaなどはWebブラウザ上でも操作が出来ます。

Adobe XDは次に次にアップグレードされていき、
対応のOSなども、次に次に変わっていきます。
古いOSの場合は、Adobe XDはインストールが不可です。

Adobe XDの無料インストールについて
Adobe XDは、スタータープランなら無料で利用ができます。
ただ、無料のスタータープランはローカル(自分のパソコン内に)には保存ができない。
Adobe XDは、プラグインなど検索してインストールも可能
プラグインは無料と有料あり

人によっては、Adobe系って、とてもわかりづらいです。
無料となってるけど、なんか有料を仕向けてくるAdobeサイトの誘導など。

また、
Adobe XDは使う場合は、Adobeのサイトにログインしないと使用ができない。
(ログインしっぱなしは別だけど)また、専用アプリを使えば、ログインを毎回しなくてもいいとか。

Adobe XDをインストールして使うには
①Adobe XDをインストールするには、Adobeのidアカウントが必要で、メールアドレスなどで無料でidアカウント作成で登録ができます。
②次に、わかりづらいのが、Adobe XD単体のダウンロードかと思いきや、
Adobe Creative Cloudのインストール。
③Adobe Creative Cloudインストールしたら、その中にAdobe XDのソフトがあるのでAdobe XDをダウンロードしてインストールする感じです。

AdobeXDスタータープランは制限などあります。

 


 

昔はデザインカンプなどの作成などは
Adobe Photoshop(Adobe Illustrator)などで作成されていましたが、
現在では、Photoshopなどは使われてないそうです(会社によるかも)

プロの現場では、PhotoshopやIllustratorなども多く使われてます。

UIデザイン作成ツール
Sketch(有料)
https://www.sketch.com

InVision Studio(無料プランあり)
https://www.invisionapp.com/studio

サンプルのデザインカンプ
Adobe XDのファイルは、基本的には、Adobe XDのソフトをダウンロードして使えば開けます。

AdobeのPhotoshopやIllustratorなどは有料のソフトです。
デザインなどしたことない人でも、1度くらい名前など知ってると思います。

今では、Adobe XDも出ています。
人によっては「Adobe XD」って有料のソフトでしょ?って思ってる人も多いです。

ただ、人によっては、Adobe XDを使いたくない。
または、有料なんでしょ?と思ってる人も多いです。

人によっては、サイトを見ても、どれが?有料で、どれが無料なのか、とてもわかりづらいです。

「Adobe XD」について、前は、macOS 10.13から使用が可能でしたが、
現在では、macOS Mojave 10.14でないと使用ができないです。

また、「Adobe XD」は日々、アップデートされているので、
最新系のパソコン(OS)など持ってないと使い勝手が悪いです。

人によっては、古いmacOSなど使かってる(macOSのアップグレードができない。)

WEB制作やデザインカンプの制作、アプリ開発などで、使われてる
デザインツールの「Adobe XD」
「スタータープラン」は無料で利用は出来ます。
Adobe XD
https://www.adobe.com/jp/products/xd.html

「Adobe XD」を使いたいけど、
パソコンのOSが対応していないので使えない人もいます。

Adobe XDを持ってなくても開けるソフトもあります。
ただ、無料だとなかなか無いかも。

Adobe XDは、無料でダウンロードして利用ができます。
ただ、無料版は、いろいろ制限などもあり。

Adobe XD をダウンロードして、チュートリアルで使い方を学習しましょう。
https://helpx.adobe.com/jp/xd/get-started.html

Adobe XDの他に
今では、便利なツール、Figmaなどもあります。

Figmaも無料で利用が出来ますが、無料版だと、やっぱりいろいろな制限があります。
Figma: the collaborative interface design tool.
https://www.figma.com

Adobeには、他にも無料コードエディター「Brackets」とかあります。
「Brackets」はサポートを2021年9月1日に終了するみたいです。

人によっては、学習するのに、有料ソフトを使うって、
お金がかかるので(経済的に余裕があるならいいとは思うけど)
しなくなる人も多いです。

レイアウトの確認
スマートフォンの場合コンテンツの最大値は1240ピクセルで固定など

コーディングの手順
①デザインカンプからパーツを抽出
②HTMLでマークアップ
③CSSでレイアウトやデザインを整える

デザインカンプを見ると、6つのパーツに分けることができます。
①サイト名とナビゲーション
②ヒーローイメージ
③メッセージ部分
④サービス部分
⑤お問い合わせ部分
⑥情報部分

HTMLで、どのようにマークアップするか?
見出し部分や
パーツの余白
デザインが共通している箇所などを考える

 


 

STEP 2 コーディングの準備

画像を用意する(サンプルで素材はダウンロードできます)

HTMLファイルを用意(index.html)
CSSファイルを用意(style.css)
画像は、imgフォルダに入れる

index.htmlファイルにHTMLの基本設定を記述する

GoogleFontsの設定
指示書では、源ノ角ゴシックJPが指示、
源ノ角ゴシックJPは、AdobeとGoogleが共同開発したフォント
GoogleFontsでは、「Noto Sans JP」として提供されています。

AdobeFontsは、Adobe IDが必要になるため、今回は、GoogleFontsの、「Noto Sans JP」を使用。

style.cssファイルにCSSの基本設定を記述する
(リセットCSSの記述など)

表示を確認する準備
モバイル版とPC版の画面サイズ、

ブラウザの開発ツールを利用
ほとんどの人は?Chromeのデベロッパーツールなど利用してると思いますが?。
この本ではFirefoxでの開発ツールを利用

 


 

STEP 3 パーツの設定、ヘッダー

ヘッダーを作成する
作成手順など解説あり

サイト名を表示する
ナビゲーションを追加する
画像とテキストを横に並べる

ナビゲーションのメニューのボタンを追加する
ハンバーガーメニューの形にする

ヘッダーの表示を整える

PC版のヘッダーの表示を整える

ブレイクポイントを追加し設定する
サイト名をPC版の表示にする

 


 

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

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

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

 


 

STEP 4 パーツの設定、ヒーローイメージ

ヒーローイメージの作成
①画像
②キャッチコピー
③サブキャッチコピー

ヒーローイメージを表示する
キャッチコピーを表示する

PC版の表示を整える

 


 

STEP 5 パーツの設定、メッセージ

見出しのメッセージを作成する
メッセージを表示する
幅と余白の調整
PC版の表示を整える
モバイル版の表示

 


 

STEP 6 パーツの設定、サービス

サービスの部分の作成
タイトルとサブタイトルの表示、表示を整える
サービスの詳細を表示、表示を整える
画像を表示する
ボタンの表示を整える
詳細に横を並べる、表示を整える
ボタンの表示の位置を揃える

 


 

STEP 7 パーツの設定、お問い合わせ

お問い合わせを作成する
①お問い合わせの見出し
②文章
③フォーム

見出しと文章を表示する、表示を整える
フォームを表示する
入力フィールドの表示を整える
テキストの表示を整える
送信ボタンの表示を整える
PC版の表示を整える
テキストとフォームを横に並べる

 


 

STEP 8 パーツの設定、フッター

フッターを作成する
①サイト名
②住所
③SNSへのリンク

サイト名を表示する
住所を表示する
SNSへのリンクを表示する
PC版の表示を整える
サイト名とSNSへのリンクを縦中央で揃える
お問い合わせとフッターを重ねる

 


 

STEP 9 パーツの設定、ナビゲーションメニュー

ナビゲーションメニューを作成する

ナビゲーションメニューをオーバーレイの形で表示する
メニューの表示を整える

閉じるボタンを表示する
ボタンで開閉する設定
Javascriptを追加する
PC版のナビゲーションメニューの表示を整える

 


 

STEP 10 仕上げと最終チェック

ブレークポイントを決める
フェードインでページを表示する

レスポンシブを確認する

HTMLの文法と文書構造を確認する

制作したWebサイトのHTMLの文法と文書構造を確認
W3Cバリデータ

outlineにチェックを入れ、text inputを選択して
HTMLコードを入力で「チェック」をクリック

Nu Html Checker
https://validator.w3.org/nu/

制作したWebサイトの最終チェックは完了です。

Netlifyでサイトを公開する方法
Netlify(無料)
https://www.netlify.com

Netlify Drop
https://app.netlify.com/drop

サンプルでダウンロードした素材、デザインカンプ
Adobe XDでデザインカンプの値を確認する方法なども載ってます。

 


 

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版

 


 

はじめてのブログをワードプレスで作るための本[第3版] 単行本 – 2021/7/17
じぇみじぇみ子 (著), 染谷昌利 (監修)
本書は「生まれて初めて、自分でブログを作ってみよう! 」と一発奮起した人のための、
ブログの作り方だけに絞り込んだワードプレスの入門書です。

はじめてのブログをワードプレスで作るための本[第3版] 単行本 – 2021/7/17
じぇみじぇみ子 (著), 染谷昌利 (監修)

 


 

ずっと受けたかったソフトウェアエンジニアリングの新人研修 第3版 エンジニアになったら押さえておきたい基礎知識 単行本(ソフトカバー) – 2018/12/12
飯村 結香子 (著), 大森 久美子 (著), 西原 琢夫 (著), & 1 その他

いちばんやさしいGit&GitHubの教本 人気講師が教えるバージョン管理&共有入門 (「いちばんやさしい教本」シリーズ) 単行本(ソフトカバー) – 2018/12/14
横田紋奈 (著), 宇賀神みずき (著)

改訂2版 わかばちゃんと学ぶ Git使い方入門〈GitHub、SourceTree、コマンド操作対応〉 単行本(ソフトカバー) – 2021/6/12
湊川 あい (著), DQNEO (監修)

改訂2版 わかばちゃんと学ぶ Git使い方入門〈GitHub、SourceTree、コマンド操作対応〉 単行本(ソフトカバー) – 2021/6/12
湊川 あい (著), DQNEO (監修)

運用☆ちゃんと学ぶ システム運用の基本 単行本(ソフトカバー) – 2019/4/13
沢渡 あまね (著), 湊川 あい (著)

運用☆ちゃんと学ぶ システム運用の基本 単行本(ソフトカバー) – 2019/4/13
沢渡 あまね (著), 湊川 あい (著)

わかばちゃんと学ぶ サーバー監視 単行本(ソフトカバー) – 2020/12/22
湊川あい (著), 粕谷 大輔 (監修)

わかばちゃんと学ぶ サーバー監視 単行本(ソフトカバー) – 2020/12/22
湊川あい (著), 粕谷 大輔 (監修)

たった1日で基本が身に付く! Git超入門 単行本(ソフトカバー) – 2020/7/18
リブロワークス (著)
Git&GitHubのいちばんやさしい本

たった1日で基本が身に付く! Git超入門 単行本(ソフトカバー) – 2020/7/18
リブロワークス (著)

 


 

【HTML/CSS】Spotify風簡易音楽サイトを作ろう!| 作りながら学ぶシリーズ Techpit publishing Kindle版
Techpit編集部 (著) 形式: Kindle版
本教材では、HTML・CSSの基礎を少し学んだが、デザインを工夫したサイトを作成したい方向けへの教材となっています。

 


 

Photoshop Elements 2021(最新) |通常版|パッケージ版|Windows/Mac対応

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) 単行本 – 2017/2/25
伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著),

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) 単行本 – 2017/2/25
伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著),

 


 

LINEで送る
Pocket

おすすめ