デザインの学校 これからはじめる HTML & CSSの本 読んでみた。

[記事公開日]2017/06/26

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

デザインの学校シリーズの本

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)
「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)

目次
デザインの学校 これからはじめる HTML & CSSの本 読んでみた。
Chapter 01 ウェブページについて知ろう
Chapter 02 HTMLの基本を理解しよう
Chapter 03 ウェブページを作ろう
Chapter 04 サブページを作ろう
Chapter 05 CSSの基本を理解しよう
Chapter 06 CSSでレイアウトしよう
Chapter 07 テキストをデザインしよう
Chapter 08 背景,影,枠線を付けよう
Chapter 09 モバイル・SNS対応して公開しよう

2021年
HTML5って最新なんでしょって思ってる人もいます。
現在ではHTML5は廃止で、「HTML Living Standard」だそうです。

HTML5(エイチティーエムエル・ファイブ)は、World Wide Web Consortium(W3C)が策定していたHyperText Markup Languageの5回目に当たる大幅な改定版、
現在では、「HTML Living Standard」
https://ja.wikipedia.org/wiki/HTML5

HTML Standard 日本語訳
https://momdo.github.io/html/

Webサイトを制作
文章をマークアップする(コーディング)
また、レスポンシブWebデザインなどとも言われてます。
PCサイズの画面表示でなく、スマートフォンに対応のレスポンシブWebデザイン

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

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

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

 


 

パソコンとインターネットの「わからない!」をぜんぶ解決する本 完全版 (TJMOOK) 大型本 – 2021/2/2

 


 

理解するほどおもしろい! パソコンのしくみがよくわかる本 [改訂2版] 単行本(ソフトカバー) – 2020/4/20
丹羽 信夫 (著)

理解するほどおもしろい! パソコンのしくみがよくわかる本 [改訂2版] 単行本(ソフトカバー) – 2020/4/20
丹羽 信夫 (著)

 


 

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

 


 
ハローワークなどの職業訓練(基金訓練)は、
昔は、凄く多くのジャンルや学校などがありましたが、
不正などあり、次に次に閉鎖。
また、職業訓練で学校に通っても、「その業種」では働けないど、とても多いです。
テレビでも放送していました。

求職者支援訓練(訓練校)とかで、Webデザインスクール系の学校だと、

デザインの学校の本を使ってのスクールも多いです。
今ではわからない。けど。

求職者支援訓練に通う人って、「その業種」で働きたいから通うと思います。
自分が、過去に通った求職者支援訓練(Webスクール)は、とてもひどかった。

学校の卒業近くになると「講師との面談」などありますが、
なんで「Web系」の職種を探してるんだ。
他の「業種」でも探してください。など言われた。

Webスクールに通う人って、「Web系の職種」に就きたいから通うと思うけど。
趣味で通うなら別だけど。

今では?求職者支援訓練は、どうなってるかわからないけど。

ハローワークに通と、「○○の学校など進めてくる」

また、Web系って若い人しか働けない感じです。

WEB業界って、アイドル業界みたいに?スピードがめちゃ早いです。
次に次に新しくなってく。

HTML や CSSなど学ぶのに、「おすすめ」の本らしいです。

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

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書 単行本(ソフトカバー) – 2019/3/1
赤間 公太郎 (著), 狩野 咲 (著), 鈴木 清敬 (著)

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

他に、
Progateなど
https://prog-8.com

 


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

 


 

12歳からはじめるHTML5とCSS3 Kindle版
TENTO (著) 形式: Kindle版

12歳からはじめるJavaScriptとウェブアプリ 単行本(ソフトカバー) – 2017/11/24
TENTO (著)

 


 

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

 


 

伝わるデザインの授業 一生使える8つの力が身につく 単行本(ソフトカバー) – 2020/11/9
武田 英志 (著)

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉 単行本 – 2015/7/31
筒井 美希 (著)

ノンデザイナーズ・デザインブック [第4版] 単行本(ソフトカバー) – 2016/6/30
Robin Williams (著), 米谷 テツヤ (監修, 翻訳), & 2 その他

あたらしい、あしらい。 あしらいに着目したデザインレイアウトの本 単行本 – 2020/8/31
ingectar‐e (著)

ほんとに、フォント。 フォントを活かしたデザインレイアウトの本 単行本(ソフトカバー) – 2019/2/20
ingectar-e (著)

けっきょく、よはく。 余白を活かしたデザインレイアウトの本 単行本 – 2018/7/20
ingectar-e (著)

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色 単行本(ソフトカバー) – 2020/6/12
ingectar-e (著)

[改訂版]実例付きフォント字典 単行本(ソフトカバー) – 2018/4/20
パイ インターナショナル (編集)

やってはいけないデザイン 単行本(ソフトカバー) – 2016/12/17
平本 久美子 (著)

失敗しないデザイン 単行本(ソフトカバー) – 2020/7/15
平本 久美子 (著)

1枚デザインの構図とレイアウト 単行本(ソフトカバー) – 2019/7/16
パイ インターナショナル (編集)

っぽくなるデザイン 誰でもできるかっこいいレイアウト集 単行本(ソフトカバー) – 2020/3/3
ingectar-e (著)

誰も教えてくれないデザインの基本 単行本(ソフトカバー) – 2018/1/20
細山田デザイン事務所 (著)

あるあるデザイン〈言葉で覚えて誰でもできるレイアウトフレーズ集〉 単行本(ソフトカバー) – 2019/1/18
ingectar-e (著)

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA) 単行本 – 2015/7/1
坂本 伸二 (著)

イメージをパッと形に変えるデザイン大全 単行本(ソフトカバー) – 2021/1/22
尾沢 早飛 (著)

デザインの基本ノート 仕事で使えるセンスと技術が一冊で身につく本 単行本 – 2018/7/21
尾沢 早飛 (著)

レイアウトのデザインパターン帖 単行本(ソフトカバー) – 2011/6/20

 


 

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

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

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

 


 

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

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

 


 

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

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

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

 


 


Udemy無料オンラインコース / 無料コースをチェック

無料。
バナー・ロゴ・チラシ等、あらゆるプロ並み販促物が作れる!無料グラフィックソフトInkscape(インクスケープ)で販促物を作ろう。

Udemy / Inkscape(インクスケープ)でプロ級販促物を作成できる実践講座(ウォーミングアップ編)

無料。
HTMLの超入門講座!基本の基本からしっかり学習していくので、これからWeb系プログラミングを学習していきたい人の第一歩となります。是非こちらのコースでHTMLの基礎を学習

Udemy / Webページを作成しよう!これから始める「HTML超入門」

 


 

これからはじめる Webデザインの本 [改訂2版] 単行本(ソフトカバー) – 2018/9/7

 


 

2017/5/26に発売の
デザインの学校
これからはじめる HTML & CSSの本を読んで見ました。
HTML5 & CSS3対応
[Windows 10 & macOS対応版]

デザインの学校 これからはじめる HTML & CSSの本 Windows 10 & macOS対応版

 


 

デザインの学校 これからはじめるPhotoshopの本 CC2017対応版

 


 

デザインの学校 これからはじめるIllustratorの本 CC2017対応版

 


 

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

Webサイトを制作するノウハウの学習を「1日30分からはじめる」をテーマに、やさしく・しっかりと伝える本。
タイプや難易度の異なる5つのサンプルサイトを題材に、作り方のノウハウを解説しています。
HTML+CSSの基本から、FlexboxやCSSグリッドといった“流行り”の手法の使い方・使いどころがわかります!

 


 

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

 


 

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

 


 

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

 


 
ウェブデザインの思考法 (Business×Design×IT) 単行本(ソフトカバー) – 2019/5/31

 


 

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

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

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

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

 


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

 


 

できるクリエイター GIMP 2.10独習ナビ 改訂版 Windows&macOS対応 (できるクリエイターシリーズ) (日本語) 単行本(ソフトカバー) – 2020/1/17

 


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

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

面倒な手続きや複雑な操作は一切なく、誰でも簡単に30秒でネットショップが作れます。

今までネットショップを作りたくても時間や資金、知識…様々な理由で始められなかった悩みを全て解決。ネットショップをつくるのに、「勉強」や「資金」は必要ありません。
ネットショップ作成が今までで1番簡単に。

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

また、他社の有料カートのような、よりリッチなショップデザインや高度なカスタマイズを
可能にするデザインテンプレートも5000円から購入できます。

 


 

低コストで簡単、プロのようなホームページ作成「グーペ」

ブログ感覚で手軽にお店のホームページを作成!
GMOペパボ株式会社が提供する【グーペ】では、
飲食店、美容院、ネイルサロンなどのお店だけではなく
塾、事務所、個人事業主、クリエイター、アイドルまで、
様々な業種のホームページが簡単にお作りいただけます。

デザイン作成は、4,000通りものデザインパターンから、
イメージに合ったデザインを選択できるほか、

HTMLとCSSでカスタマイズすることも可能ですので、
初心者だけでなく、中・上級者の方も満足いただけます。

もちろんスマートフォン・タブレットも対応

 


 
ハローワークなどでの
職業訓練(基金訓練)校
Webデザイン系のコースを受ける。
Webの現場では、Adobe系のソフトなど使われてる事が多いです。
今では、Adobe系(Photoshop、Illustrator)などは、勉強するのに、毎月の使用料金がかかるので
勉強はしにくいです。

ハローワークの
職業訓練(基金訓練)では、いろいろなコースなど選べます。
求職者支援訓練(訓練校)とかで、
Webデザイン系の学校だと、
この書籍のシリーズ(デザインの学校)本を
使っての授業をする訓練校も、あると思います(多いかも)。

職業訓練(基金訓練)で、
Webデザイン系(Web系)など、ほか。
職業訓練を終えたら卒業、そして、気になった職種の面接など。

職業訓練で通う学校の講師も、学校によっては様々です。
学校では、いろいろと教わらないです。

自分の通った学校は、メイン1人の講師はWeb制作現場で働いていた人。
もう1人の講師は、実務は素人で、職業訓練でWeb系を卒業してる人だった。

また、先生の多くが独学の人ばかりだった。

自分が、求職者支援訓練(訓練校)で、通った時は、
デザインの学校シリーズ、2012年発売。
デザインの学校 これからはじめるHTML&CSSの本
2012/5/2発売の、古い書籍を購入し、使っての授業だった。
(デザインの学校 これからはじめるHTML&CSSの本 大型本 – 2012/5/2)

出来ない場合は、数をこなすしていくしかないかも。

 


 

エンジニアは、バリバリコードを書いてるイメージを持ってる人もいると思います。
実際には、バリバリ書いてないとか。
現場によりますが調べてる時間の方が長いそうです。
プログラミングなどしても、挫折してるは9割?だとか。
また長時間の勉強とかしても、人によっては頭に入らないです。
1日、2時間くらいの勉強。
勉強することが目的にならないように。
プログラミング言語など、ほか、次に次に変わっていきます。
やっていて楽しくないと続かない。

ちょっと待て!プログラミングスクールを受講する前に読む本: 12週間で25万円!アラフォー会社員が入学前に知りたかった情報とは? Kindle版
ひぐ (著) 形式: Kindle版

マーケット感覚を身につけよう—「これから何が売れるのか?」わかる人になる5つの方法 Kindle版
ちきりん (著) 形式: Kindle版

 


 

また、ニュースにもなってましたが
職業訓練って、こういうのも多いかと。

ウェブサイト制作の職業訓練を実施する「メディアクリエイト」
職業訓練会社8800万円脱税疑い、国税局が代表ら告発

3.5億円超の所得隠し脱税の疑い、職業訓練会社を刑事告発 – TBS News

2ちゃんねるニュース速報ナビ
https://www.2nn.jp/newsplus/1499085094/

 


 

職業訓練に通うとき。
その当時に思ったのが

なんで?。2012年の発売の、こんな古い書籍を使うんだろ〜って思った。

他にも、いろいろな良い本とか、発売されてるのにと。

確かに、デザインの学校シリーズ
2012/5/2の発売
これからはじめる HTML & CSSの本は、
丁寧に説明されていて、初心者の方とかには、わかりやすい内容だと思いますが。

でも、この本を買って、勉強だけでは、Webデザイナーにはなれないと思った。
2012年の発売の当時は良書だったかもです。

自分が、求職者支援訓練に通った時は、2012年ではないです。
Web系は進化してます。
この本を使って、授業をやった後に、
制作課題で、各自でWebサイトを作ってと言われたので。。

生徒は、みんな、よくわからず、
個人、個人で、他の書籍などを買ってました。
余計な出費がかかる感じ。

なんか。職業訓練って。そんなイメージです。
自分の時、就職率が90%とか言ってたけど学校だったけど。。
卒業生は、架空の人物だったのか?

先生にもよるかも知れないけどね。

 


 

2017/5/26に発売
デザインの学校シリーズ

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)
「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)

の本は、

2012/5/2に発売の
デザインの学校
これからはじめる HTML & CSSの本の、改正版的な内容の本なのかな。
2012/5/2の方は、お問い合わせフォームも、少しあります。
ダウンロードのサンプルフォルダには、使用ソフトも入ってるので便利ですが。

 


 

2017/5/26に発売の
デザインの学校シリーズ
デザインの学校
これからはじめる HTML & CSSの本は、お問い合わせフォームとかはないです。
[Windows 10 & macOS対応版]

その変わりに、
flexレイアウトの解説、
ウェブフォントを利用しよう
スマートフォンやタブレットなどのモバイル端末にも対応させるメディアクエリ。
Facebookでシェアされた時の表示の仕方。など他が載ってます。

また、本の価格維持?、ページの都合上か、わかりませんが、

ファイルをアップロードの仕方で、FTPソフトのFileZillaを紹介してますが、
ファイルのアップロードの仕方などは解説してません。

本では、FileZilla の仕方は、サポートでWebサイトに載ってます。

なので、インターネット環境が見れる状態の方ではないと見れないです。

 


 

デザインの学校 これからはじめる HTML & CSSの本[Windows 10 & macOS対応版]
サポートページ
https://gihyo.jp/book/2017/978-4-7741-8968-0/support

デザインの学校 これからはじめる HTML & CSSの本[Windows 10 & macOS対応版]
FTPクライアントソフトを設定しよう
https://image.gihyo.co.jp/assets/files/book/2017/978-4-7741-8968-0/how-to-upload.html

 


 

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)
「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)

目次は、このような感じです。
Chapter1からChapter9まであります。


contents


contents2

本書の特徴
最初から通して読むと、体系的な知識、操作が身に付きます。
読みたいところから、読んでも、個別の知識、操作が身に付きます。

使い方など書いてあります。
それぞれの手順が数字の番号で書いてあるので、わかりやすいと思います。


way-to-use


index

 


 

付属CD-ROMの使い方など

この本の親切な所は、CD付きですが、
CDがインストールできないPCの環境の方は
インターネットからでも、ダウンロードができます。

付属CD-ROMが無かったら、本の価格は、もう少し安くできたかもです。

CD-ROMが無いバージョンなど本を発売なら、もう少し価格を安くできるかも。


cd-rom


chapter

ダウンロードのサンプルには
67Greebフォルダ(imageフォルダ、原稿のテキスト)
レッスンフォルダ(Chapterごとに使うフォルダが入ってます)
完成版フォルダ(67Greenのサイト)
素材集フォルダ(jpgの画像が入ってます)

勉強するには、いいと思います。

 


 

この本は、Windowsなら、メモ帳を使っての作業で解説。
Macでの仕方も載ってます。
本では、メモ帳を使っての作業をしますが

使い勝手は、人それぞれなので、
自分に合いそうなアプリケーションを探しみてくださいとも解説してます。

また
言語コードの指定で

<html lang="ja">

が、本には書いてないですが、
前に出た(2012/5/2に発売の書籍)本でも、書いてなかったので、今回も書いてないかもです。

 


 

エンジニアとか目指している方なら、この本は読んでおいた方がいいかも

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

 


 

今すぐ使えるかんたん ホームページHTML&CSS入門 [改訂2版] (今すぐ使えるかんたんシリーズ) 単行本(ソフトカバー) – 2019/6/21

 


 

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

 


 

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

 


 

たった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
山崎 響 (著)

 


 

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

 


 

無料ホームページ制作・作成なら作り方かんたんなペライチ
ペライチは無料でホームページやランディングページ作成ができるサービスです。プロがデザインしたテンプレートと誰にでも使いやすい編集画面を使って、早くカンタンにオリジナルページを作成しましょう。

簡単にホームページ作れる「ペライチ」
おどろきの簡単さ、早さ、安心を提供!
「かんたん、使いやすい」と大好評!登録ユーザー10万人を突破!
無料ホームページ作成「ペライチ」

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

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

 


 

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

 


 

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

 


 

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

 


 

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

 


 
Udemy(ユーデミー)
世界最大級のオンライン学習プラットフォームである「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)を作ってみよう!

 


 

Udemy(ユーデミー)

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
Web知識、Photoshop、Webグラフィックデザイン、HTML、CSS、実践的なコーディングなど、Webデザイナーとして働いたり、自分1人でサイトを作り上げるのに必要な全てが含まれています。


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

 


 

Udemy(ユーデミー)

WebデザインのためのPhotoshop実践講座
Webサイト制作における、Photoshopを使用したグラフィックを実践的に学びます。ワイヤーフレームの作成、合計3つの実践的なサイトを作成するなど、全100レッスンの充実した内容です。

Udemy / WebデザインのためのPhotoshop実践講座

 


 

Udemy(ユーデミー)

未経験からプロを目指す!実践PhotoshopCC講座
Photoshopが初めての人が中級レベルまでスキルアップできるコースです。単なる機能説明をするような、つまらないコースではなく、写真加工、バナー作成、フライヤー制作、Webページの制作など、実際の制作をしながら実践力を身につけます。


Udemy / 未経験からプロを目指す!実践PhotoshopCC講座

 


 

Udemy(ユーデミー)
価格:¥ 1,560(価格変動あり)
レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!
Webサイト制作の基礎をわかっている方が、レスポンシブルサイトとスマートフォンサイトを作れるようになる講座です。

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

 


 
udemyでは、自分に合ったコースなど、検索で探せるので、おすすめです。

ビジネススキル
ITとソフトウェア
IT資格

デザイン
Webデザイン
グラフィックデザイン
デザインツール
UX

音楽
作曲
音楽制作
音楽理論
ボイストレーニング
演奏テクニック
音楽ソフトの使い方

マーケティングなど、いろいろあります。

有料や無料のオンデマンドで、いろいろな学べます。

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

HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座
最新のHTML5とCSS3を駆使してWEB業界で活躍するスキルを身につけよう

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

 


 

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

Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース
Bootstrap、Dreamweaver、HTML5、CSS3を駆使してレスポンシブWEBサイトを超効率的に作ろう。手を動かして楽しみながら身につく実践的WEBサイト作成力。

Udemy / Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース

 


 

前は無料で、
超絶分かりやすいHTML5・CSS3
HTML5とCSS3を使って、お店のホームページ(HP)を作ってみよう!
などありましたが、現在では、無料では、ないのが多いです。

価格:¥ 1,560(価格変動あり)
HTML5&CSS3講座 【初級レベル】ソフトやツールなどを使わないとWEB制作ができない方や独学者の復習におすすめです
Udemy / HTML5&CSS3講座 【初級レベル】ソフトやツールなどを使わないとWEB制作ができない方や独学者の復習におすすめです

 


 

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

CSS / CSS3 マスターコース
70以上のレッスン、7時間以上のレッスンでCSSをマスターするコースです。
最新のCSS3に関する内容も充実しています。

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

 


 

価格:¥ 1,560(価格変動あり)
HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座
最新のHTML5とCSS3を駆使してWEB業界で活躍するスキルを身につけよう

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

 


 

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

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

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

 


 

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

 


 

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

 


 

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

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

ブックスタンド

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

iPadなども置けます。

 


 

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)

デザインの学校 これからはじめる HTML & CSSの本 読んでみた。

基本操作を短期間で、しっかり取得できます。
作例を作りながらの実習で、モチベーションがアップします。
いちばんやさしい、デザインの入門書です。
HTML5&CSS3の基本は、この1冊でマスターできます。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)
「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。

目次
Chapter 01 ウェブページについて知ろう
Chapter 02 HTMLの基本を理解しよう
Chapter 03 ウェブページを作ろう
Chapter 04 サブページを作ろう
Chapter 05 CSSの基本を理解しよう
Chapter 06 CSSでレイアウトしよう
Chapter 07 テキストをデザインしよう
Chapter 08 背景,影,枠線を付けよう
Chapter 09 モバイル・SNS対応して公開しよう

Chapter 01 ウェブページについて知ろう

HTMLとCSSについて学ぶ前に、Webサイトは、どのようなものか?
制作者の視点からあらためて学んでいきます。

01 ウェブサイトについて知ろう
Webページとは、インターネット上の文章のことです。

Webページのイメージ
HTML、CSS、画像。

Webサイトとは
ウェブページの集合体です。


lesson1


website

 


 

02 ウェブページを作成するために必要なもの

Webページを作成するためには、アプリケーションが必要です。
テキストを編集するためのアプリケーション

本書では、Windowsに付属してるメモ帳というアプリケーションを使用して
テキストファイルを作成します。

Macの場合はテキストエディットのアプリケーションが利用できます。

他に、高機能なテキストエディタには
TeraPad(無料)
Brackets(無料)があります。

2021年 9月1日、AdobeはBracketsのサポートを終了します。
無料
テキストエディタ
Brackets
http://brackets.io

 


 

さらに効率的に作業したい場合は、Adobe Dreamweaverなども載ってます。が
最初から有料のソフト。
まだ、何も書いてないので(コーディング)、人によっては、無理と思うかもです。

Adobe Dreamweaverは有料のソフトです。

画像を作成するためのアプリケーション
本書では、画像作成の方法には触れません。

画像の編集には、PhotoshopElementsなど紹介されてます。
PhotoshopElementsは有料ソフトです。
有料のソフトは、勉強するのに、敷居が高いかも。
無料でも、いいソフトは、多くあるので。

Adobe系ソフトは高いので、

無料
Pixlr Editor
https://pixlr.com/editor/

 


 

またAdobeソフトは高いし、ソフトを使っても、使わなくても、今は月々の利用の料金がかかります。
Sketchを使ってる人もいます。

他にも、Adobe以外で、いろんな便利なソフトはあると思います。

Mac用
Sketch(有料ソフト)
アプリのUIデザインやWebデザインの作成ツール

https://www.sketchapp.com/

 


 

Adobe Illustrator(有料)
Adobe Photoshop(有料)

Adobeの製品は、たまにしか使わない人にとっては高額なソフトです。

Adobe系のソフトは高いし、使うのを辞めた、また持ってない方も多いです。

今では
IllustratorやPhotoshopの代わりに、
無料で使えるソフトもあります。

InkscapeとGIMP

Adobe Illustrator(有料)
Inkscape(無料)

https://inkscape.org/ja/download/

Adobe Photoshop(有料)
GIMP(無料)
https://www.gimp.org/downloads/

 


 

はじめての無料で使えるフォトレタッチ GIMP2.10対応 (BASIC MASTER SERIES) 単行本 – 2019/3/19

 


 

すぐに作れる ずっと使える GIMPのすべてが身に付く本 単行本(ソフトカバー) – 2018/9/26

 


 

Illustratorの代わりに使ってる人も多いInkscape
今ではソフトをPCにインストールしなくても
InkscapeのChromeの拡張機能でも利用ができます。

Inkscape on rollApp – Chrome ウェブストア – Google

https://chrome.google.com/webstore/detail/inkscape-on-rollapp/icjinnaagdniegmfejingjjhljhmkopj

 


 

すぐに作れる ずっと使える Inkscapeのすべてが身に付く本 単行本(ソフトカバー) – 2019/6/17

 


 

無料で使えるイラストソフト Inkscapeスタートブック 単行本 – 2017/1/19

 


 

できるクリエイター Inkscape 独習ナビ Windows&Mac対応 単行本(ソフトカバー) – 2016/9/26

 


 

Kakumaru Punch

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

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

 


 

Monosnap – screenshot editor

画面をキャプチャー



Monosnap – screenshot editor

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

APP STORE

 


 

Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

Adobe Creative Cloud(アドビ クリエイティブ クラウド) コンプリート|学生・教職員個人版|36か月版|オンラインコード版(Amazon.co.jp限定)

Adobe Creative Cloud(アドビ クリエイティブ クラウド) コンプリート|学生・教職員個人版|12か月版|オンラインコード版

 


 

Adobe Photoshop CC|12か月版|パッケージ(カード)コード版

Adobe Illustrator CC|12か月版|パッケージ(カード)コード版

Adobe Creative Cloud フォトプラン(Photoshop+Lightroom) with 1TB|12か月版|オンラインコード版

 


 

PhotoshopやIllustratorは、月々の利用の料金が高いです。

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



Affinity Designer

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

APP STORE

 


 

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

Webデザインの作業フェーズ・業務シーンごとに、
「Adobe Photoshop」と「Adobe Illustrator」の
便利な使いこなし方やノウハウを解説する本です。
Webにまつわるビジュアルをより魅力的なものにするために、
あるいはWeb制作を効率的に行うために
必要となるテクニックを目的に沿って作例を用いながら解説します。
Webデザイン初心者、Webデザインに活動範囲を広げたい
と考えているグラフィックデザイナーはもちろん、
簡単な素材の制作や写真加工を行う必要がある
プログラマーやコーダーにとっても有益な内容です。

 


 

データを転送するためのアプリケーション
作成したWebページを公開するには、データをWebサーバーに転送する必要があります。

FTPアプリケーションの解説などあり

データ転送用のアプリケーションは、
FTPクライアントとして、
FileZillaやCyberduck
など、どちらも無料ですと書いてます。

FileZilla
https://ja.osdn.net/projects/filezilla/

Cyberduck
https://cyberduck.io/

 


 

レンタルサーバー

「ロリポップ!」
「さくらのレンタルサーバ」
「スターサーバー」

 


 

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

 


 

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

 


 

「ムームードメイン」独自ドメイン
69円から、格安ドメイン取得サービス

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

 


 

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

 


 

ウェブデザインの思考法 (Business×Design×IT) 単行本(ソフトカバー) – 2019/5/31

 


 

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

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

 


 

便利なアプリや、ソフトもいろいろあります。

Mac用の フリーソフト、アプリ、アップデータの新着情報をお届けするサイト

https://macsoft.jp/

フリーソフト100は無料で使える便利なソフトや無料情報を集めました。

パソコンで活用するデスクトップアプリ、USBメモリーを有効に利用できるソフト、Webアプリなど、フリーソフトとシェアウェア情報を紹介。

https://freesoft-100.com/

 


 

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

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

 


 

小さな会社&お店の Canva超入門 ~お洒落で目を引くチラシ・ポスター・名刺・ポストカードを無料で作る本 単行本(ソフトカバー) – 2018/5/19

内容紹介
会社やお店の販促ツールを、無料であっという間に作れます!

会社や店舗などを運営していると、必ず必要になるのが、販促ツール。

名刺やショップカード、チラシといった紙媒体や、広告用バナー画像、SNS告知用画像といったWeb媒体も。
Canvaは、これらのデザインを外注しないで自分で作りたい! という方のための、無料サービスです。

本書では、Canvaを使って販促ツールを作る方法をわかりやすく解説。
デザインのポイントや便利なテクニックも紹介します。
Canvaを使って、プロ級のデザインが完成する1冊です!

 


 

画像
素材集を利用する
PIXTAを紹介してます。
https://pixta.jp

 


 

他に、本には載ってないでいですが、
無料で写真素材をダウンロードできるサイトは、いろいろあります。

GAHAG | 著作権フリー写真・イラスト素材集
http://gahag.net/

 


 

03 ウェブサイト制作の流れを知ろう
Webサイトが完成するまでには、いくつかのステップがあります。

Webサイトの構成を考える。
どんな内容のページを何ページ作成するのか。
Webサイト全体の構成を最初に考えます。

各ページに掲載する情報をまとめる
どんな文章や画像を載せるのか
ページごとの原稿をまとめます。

プロのデザイナーは、デザインカンプを作成することが多いのですが、
そこまで、しなくても大丈夫です。
紙にスケッチで、大まかな配置えお決めておくだけでも
この後の作業がスムーズに進められるます。と書いてます。

この本では、デザインカンプの作成とかは、しないです。

簡単でも、いいので、あるといいかもです。

 


 

HTML文章を記述する
プレーンな文章にHTMLというタグと呼ばれる印を組み込むことで、
文章全体を構造化された情報として発信することが可能になります。

CSSを記述する
見た目に関する情報を記述。

検証する
HTML文章やCSSの記述中、思いどおりに作業が進んでいるか、こまめに確認

データをアップロードする
Webサイトが完成したら全てのデータを、まとめてWebサーバーにアップロード

 


 

04 ウェブページを表示するアプリケーションを知ろう
Webブラウザの説明

GoogleChrome

Microsoft Edge

Safari

 


 

05 Google Chromeをインストールしよう
本書では、GoogleChromeを使って作業します。

Google
https://www.google.co.jp/

https://www.google.co.jp/chrome/index.html

この本は、Chapterごとの最後に練習問題があるので、復習ができるのは、いいかもです。


layout


quiz

 


 

Chapter 02 HTMLの基本を理解しよう

Chapter2から、コーディングの作業です。
完成イメージが載ってます。

章のポイントも載ってます。

01 テキスト作成の準備をしよう
Windowsは、メモ帳、Macはテキストエディットで、
HTML文章、CSSを記述します。


chapter2


chapter2lesson

 


 

02 実際に書いてみよう
まずはhtmlタグ、headタグ、bodyタグの3種類のタグを使って
Webページを構成する基本的な要素を作成します。
htmlタグを、半角英字で入力する。

<html>

 


 

そして、メモ帳、又はテキストエディタで
htmlタグを、このように書きます。

<html>
<head>
</head>
<body>
</body>
</html>

ファイルの拡張子は表示させます。
MacとWindowsの仕方が載ってます。

 


 

03 ページタイトルを決めよう
ページタイトルはWebページにとって重要な情報です。
titleタグを入力

<title>67Green</title>

 


 

04 文書の基本情報を記述しよう
DOCTYPE宣言の入力
詳しくは載ってないけど、HTMLのバージョンのようなものです。

<!DOCTYPE html>

文字コードを入力(UTF-8を指定)

<meta charset="utf-8">

作者情報の入力

<meta name="author" content="67Green">

概要文を入力

<meta name="description" content="区のグリーン専門店">

文字コードとは?
HTML文章の文字コードにはutf-8、
shift_JIS、EUC-JPなど、いくつかの種類があります。

 


 

05 HTMLファイルを保存しよう

作成したHTMLを保存します。

HTMLファイルのファイル名を
半角英数字で、index.htmlとして入力して保存。

文字コードをUTF-8にして、保存。

この本では、
言語コードのja(日本語)の指定とかの、説明は書いてないです。

<html lang="ja">

言語コードの指定は書かなくても、ブラウザで表示されますが、
日本語で、サイトを表示なら書いた方が、いいかもです。

HTML5タグリファレンス – HTMLクイックリファレンス

http://www.htmq.com/html5/html.shtml

 


 

06 テキストを追加しよう
サンプルでダウンロードした素材。
あらかじめ用意したテキスト原稿を開き、文章をコピーし

HTMLファイルに貼り付けます。

bodyタグの中に、コピーしたテキストを貼り付けます。

<body>

07 ウェブブラウザで確認しよう
HTMLファイルを、ChromeのWebブラウザで確認する

コメントを記述する。
HTMLファイルには、コードに関するメモなどをコメントとして、書いておくことができます。
自分の時は、コメントアウトと習ったけど、
最近の本だと、コメントと解説されてるのが多いです。

 


 

Chapter 03 ウェブページを作ろう

01 見出しを設定しよう
HTMLでは、見出しを設定するには、
専用のタグがあります。
大見出しなら、h1タグ。
小見出し、などあります。
見出しタグはh1からh6までの要素あり

h1タグを入力

<h1>


chapter3


chapter3lesson

見出しから導き出されるアウトライン
適切な見出しレベルのHTMLタグで囲む。
正しいアウトライン(文書構造)になってるか。

HTML 5 Outliner

https://gsnedders.html5.org/outliner/

 


 

02 箇条書きを設定しよう
箇条書きなど表示するとき。
ul要素とli要素について

ulタグを入力

<ul>

03 段落を設定しよう
p要素について(文章などの部分)

pタグを入力

<p>

04 文章を改行して読みやすくしよう
改行させるには、brタグ
br要素について
brタグを入力

<br>

 


 

05 情報の種類に分けよう
多くの、WebサイトやWebページには、
ヘッダ、ナビゲーション、メインコンテンツ、フッターなどの情報の固まりで構成されています。

header(ヘッダ)
footer(フッター)
nav(ナビゲーション)
main(メインコンテンツ)
section(セクション)

その他の要素
情報の種類を分けるための要素
article要素
ブログのエントリーやニュース記事など単体で成り立つ情報を表すのに使います。

aside要素
本文とは外れるけど、軽く触れておきたい情報を表すのに使います。

 


 

06 画像を表示させる(埋め込もう)

文章だけど、情報が伝わりづらい場合には、画像を埋め込んで、表示、内容を補足します。

属性とは
属性名と属性値を対の形で記述するのが一般的です。

img要素について
画像を表示させたい(埋め込みたい)箇所にimgタグを入力する

imageはimageフォルダ
main.jpgは画像のファイル
alt属性(代替えテキスト)、画像が表示されない場合には、文字で表示されます。

<img>を入力して
<img src=”image/main.jpg” alt=”店内写真”>

この画像は、大切な情報です。
なので、段落(p要素)として設定します。
<p>タグを入力し、このように入力する

<p><img src="image/main.jpg" alt="店内写真"></p>

 


 

ファイルのパス
画像を埋め込んだり、ページ同士を連携、リンクする際は、
どのフォルダに画像があるか?
パスの種類は、絶対パス、相対パスなどがあります。

HTMLファイルと同じ階層にある画像の入力。

<img src="main.jpg">

又は
HTMLファイルと同じ階層にある画像の入力について

<img src="./main.jpg">

 


 

HTMLファイルと同じ階層にある、フォルダの中の画像の入力

<img src="folder/main.jpg">

HTMLファイルよりも上の階層、(他のフォルダ)にある画像の入力

<img src="../main.jpg">

 


 

HTMLファイルよりも2つ上の階層にある画像の入力

<img src="../../main.jpg">

同じ階層の入力

<img src="./main.jpg">

HTMLファイルよりも上の階層にあるフォルダの中の画像の入力

<img src="../folder/main.jpg">

画像のファイル形式の解説などあります。
JPEG
PNGなど、
今では、WebPなどもあり

Chapter3まで、すると、このような感じなります。


chapter3-min

 


 

Chapter 04 サブページを作ろう

本書では、ヘッダ、フッター、ナビゲーションなど、
他のページでも、使い回せるパーツを再利用しながら効率的にページを複製します。
index.htmlファイルを複製して、ITEMページを作ります。

01 ページを複製しよう
Webサイトは、複数のページで構成されています。
index.htmlをコピー
複製して、名前を、item.htmlにする


chapter4


chapter4lesson

 


 

item.htmlをテキストエディタ、又は、メモ帳で開き
不要な箇所を削除する

ダウンロードしたサンプルの原稿をテキストで開き、コピーし
内容を貼り付ける

そして、必要な箇所にh2タグを入力

<h2>

 


 

文法をチェック
W3Cが公開しているMarkup Validation Serviceのサイトにアクセスし
HTMLコードを貼り付けて、チェックボタンをクリック。

ツールを使って、こまめにチェックしましょうと書いてあります。

Markup Validation Service

https://validator.w3.org/

 


 

02 表を作成しよう
表は、tableタグを使う

商品一覧を表(テーブル)としてタグ付けします。
商品の画像や、文書を表の中に入れます。

table要素(表を作成するタグ)
tr要素(行を作成するタグ)
th要素(見出しを作成するタグ)
td要素(セルを作成するタグ)

tableタグで囲まれた部分は、それが1つの表であることを表します。

<table>タグを入力
<tr>タグを入力
<th>タグを入力
<td>タグを入力

 


 

<table>
<tr>
<th><img src="image/item1.jpg" alt="ウェア"></th>
<td>ガーデニング作業をオシャレに。</td>
<td>6,980円</td>
</tr>
<tr>
<th><img src="image/item2.jpg" alt="鉢植え"></th>
<td>育てやすいグリーンネックレス。</td>
<td>1,500円</td>
</tr>
<tr>
<th><img src="image/item3.jpg" alt="ポット"></th>
<td>インテリアにもなる木製ポット。</td>
<td>700円</td>
</tr>
</table>

 


 

03 Googleマップを埋め込もう
Googleマップを利用すると、手軽に、Webサイトに地図を埋め込むことができます。

index.htmlをコピー
複製して、ファイル名をmap.htmlにする

map.htmlをテキストエディタで開き
不要な箇所を削除する

そして、必要な箇所に
<h2>タグを入力

GoogleChromeなどで、
Googleマップを開く

https://www.google.co.jp/maps

Googleマップに
住所を入力し、メニューを開き
地図を共有または埋め込むをクリック

埋め込みコードを確認し

表示されたiframタグの部分

<ifram></ifram>

埋め込みコード(Googleマップ)をコピーする

<iframe src="https://www.google.com/maps/" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

map.htmlをテキストエディタで開き
埋め込みコードを貼り付ける

map.htmlをGoogleChromeのブラウザを開いて確認する。

 


 

04 ページ同士を連携しよう
Webページ同士を連携するために、リンクの設定を行います。

a要素について
リンクを設定する

index.htmlをテキストエディタで開き

ナビゲーションメニューにリンクを設定
リンクの開始を示す
aタグを入力し

<a href="index.html">TOP</a>

次に、
item.htmlファイル
map.htmlファイルに
リンクを設定する

<li><a href="index.html">TOP</a></li>
<li><a href="item.html">ITEM</a></li>
<li><a href="map.html">MAP</a></li>

他に
リンクの仕方など、載ってます。

特定の場所へのリンク
アプリケーションを起動するリンクなど

アイテム画像のページ。
mapのページ。
ここまですると、このような感じになります。


chapter4-min


chapter4-2-min

 


 

Chapter 05 CSSの基本を理解しよう

HTML文章が完成したらCSSのスタイルシートを記述して、デザインやレイアウトを整えます。

01 CSSの基本を理解しよう
CSSでレイアウトする

基本的には、
HTMLは情報の部分
CSSは見た目です。

セレクタ
スタイルの適用対象を示すための情報がセレクタです。

プロパティ
スタイルの種類を指定するための情報です。


プロパティに応じて希望のスタイルを指定します。

コメント
メモを書き入れたいときに使います。


chapter5


chapter5lesson

 


 

02 セレクタを理解しよう
ここでは代表的な3つのセレクタの解説

①タイプセレクタ
body、やh1、などのHTML要素名、そのものをセレクタとして利用

CSSファイルに、タイプセレクタを入力する

body {
color:black;

}

h1 {
color:red;

}

p {
color:blue;

}

 


 

②classセレクタ
class名を利用したセレクタ

HTMLファイルに、このように書く

<p class="note">定休日は水曜日です</p>

 


 

CSSファイルに、このように書く

.note {
color:green;

}

 


 

③idセレクタ
id名を利用したセレクタ

HTMLファイル

<h1 id="logo"67Green></h1>

CSSファイルに

#logo {
color:green;

}

 


 

他に、組み合わせ方

①子孫セレクタ
HTML文書では、ある要素の中に別の要素が含まれることがあります。

HTMLファイル

<p><img src="image/main.jpg" alt="店内写真"></p>

CSSファイル

p img {
padding:10px;

}

 


 

組み合わせ方

②複数セレクタ
複数の要素に共通のスタイルを適用する場合

HTMLファイル

<h3>美味しいケーキ</h3>
<p>ケーキは毎日手づくり</p>

CSSファイル

h3,p {
color:gray;

}

 


 

03 テキストの色を指定しよう
テキストの色は、カラーコードや色名で指定できます。

メモ帳を起動し、新規ファイルを作成
CSSファイルに
h1 セレクタを入力

h1 {

}

colorプロパティを入力します。

h1 {
color

}

値を入力します。

h1 {
color:green;

}

 


 

CSSで色を指定する

色の表現方法

配色の時に気をつけたいポイント
テキストの色が背の色になじみすぎると
テキストが読みにくいです。専用のチェックツール

フリーソフト
Mac、Windowsソフトが紹介

Colour Contrast Analyser

https://developer.paciellogroup.com/resources/contrastanalyser/

 


 

04 テキストの大きさを指定しよう
テキストの大きさは文書の読みやすさに直結します。
CSSファイルに
font-sizeプロパティを入力します。

h1 {
color:green;
font-size

}

値を入力します。
font-size:250%;

h1 {
color:green;
font-size:250%;

}

font-sizeプロパティの解説。

 


 

05 CSSファイルを保存しよう
ここまでの作業を保存します。
ファイル名をstyle.cssとして

ファイル名を半角英数字で、style.cssとして保存。

文字コードをUTF-8にして、保存。

 


 

06 HTMLにCSSを読み込もう
HTMLファイルにlink要素を追加

<head></head>内に、link要素を追加し、読み込みたいCSSファイルを指定します。

<link href="style.css" media="all" rel="stylesheet">

media属性で
そのCSSファイルを、どんなメディアで利用するかを設定します。
media属性の値がscreen だと、パソコンやモバイルデバイスで表示した時。

allだと、全てのメディア。

printだと、印刷時の時のみ適用されます。

media=”print,screen”のように、複数のメディアを設定することも可能です。

 


 

index.htmlファイル保存。

Google Chromeで確認、
スタイルが反映され適用されてます。

HTMLファイル
item.htmlをメモ帳、テキストエディタで開きlink要素を追加

<link href="style.css" media="all" rel="stylesheet">

HTMLファイル
map.htmlをテキストエディタで開きlink要素を追加

<link href="style.css" media="all" rel="stylesheet">

 


 

07 デザインに合わせてグループ化しよう
いくつかの要素を、まとめてグループ化する、

完成図を見て、デザイン上のグループを探しましょう。

HTMLファイル
index.htmlファイルをテキストエディタで開き

divタグを入力する

<div>

本では、divタグを、複数の要素をグループ化するためのタグと解説。

item.htmlファイルをテキストエディタで開き
divタグを入力する

map.htmlファイルをテキストエディタで開き
divタグを入力する

 


 

このような感じなります。


chapter5-min

 


 

Chapter 06 CSSでレイアウトしよう

情報を、より伝わりやすくするには、配置=レイアウトが欠かせません。

01 幅を指定して中央に配置しよう
中央配置は、多くのWebサイトで見かけるレイアウトです。

Webページのレイアウトには

マルチカラム
横に2分割、3分割するレイアウト

ワンカラム
縦方向に配置するレイアウト

などあります。と解説。


chapter6


chapter6lesson

 


 

CSSファイル
style.cssファイルを開き
divを入力

div {

}

widthプロパティと値を入力
div要素の幅が640pxになります。

div {
width:640px;

}

 


 

要素の右側に余白を付けるプロパティ
margin-rightプロパティと値を入力しautoと入力
autoは、ブラウザが自動的に最適な余白を付けてくれます。

div {
width:640px;
margin-right:auto;

}

要素の左側に余白を付ける
margin-leftプロパティと値を入力しautoと入力
autoは、ブラウザが自動的に最適な余白を付けてくれます。

div {
width:640px;
margin-right:auto;
margin-left:auto;

}

WebブラウザのChromeで確認します。

 


 

02 テキストを中央に寄せよう
テキストとimg要素(画像)は、幅や余白を指定することなく中央に寄せることができます。

CSSファイル
中央揃え
複数のセレクタを入力し、プロパティを入力

h1,h2,li,footer {
text-align:center;

}

保存したら
WebブラウザのChromeで確認します。

 


 

03 箇条書きの記号を非表示にしよう
ブラウザの初期状態では、・ 黒い丸印(ビュレット)が表示されます。

CSSファイル
li要素
セレクタを入力しlist-styleプロパティと値のnoneを入力

黒い丸印、・ が非表示になります。

li {
list-style:none;

}

 


 

04 箇条書きの項目を横並びにしよう
HTMLの要素は、基本的に縦並びで表示されます。

CSSファイル
widthプロパティと値を入力
箇条書きの項目1つあたりの幅33%になります。

li {
list-style:none;
width:33%;

}

CSSファイル
floatプロパティと値を入力
floatのleft、横並びになります。

li {
list-style:none;
width:33%;
float:left;

}

flexレイアウト
要素を横並びにするには、いくつかの方法があります。
最新のブラウザではflexレイアウトと呼ばれる方法を利用します。

 


 

05 レイアウトを調整しよう
floatプロパティを使って要素を横に並べると
意図しないレイアウトになり、レイアウトが崩れる場合があります。

clearfixを記述しトラブルを回避。

clearfixについて
CSSで架空の要素を作成し、架空の要素に対してclearを適用する。

疑似要素
通常のCSSセレクタの後ろに記述することで、要素の中の特定の場所に対して
スタイルを適用する目的で使います。

要素の親子関係
clearfixは、floatプロパティが指定された(横並びになった)要素の
親要素の直後に対して適用します。

CSSファイル
セレクタを入力
ulにafter疑似要素を組み合わせることで、ul要素の直後を指すことができます。

ul:after {

}

CSSファイル
contactプロパティと値を入力し
テキスト、画像と言ったコンテンツ、つまり空(架空)のコンテンツを追加したことになります。

ul:after {
content:"";

}

CSSファイル
displayプロパティは、表示形式を指定するためのプロパティです
値をblockを入力
架空の要素がブロックレベルの表示形式に変更されます。

ul:after {
content:"";
display:block;

}

CSSファイル
clearプロパティはfloatの影響を解消するためのプロパティ
値をbothで、左右の回り込みの影響を同時に解消できます。

ul:after {
content:"";
display:block;
clear:both;

}

Chromeで確認します。
写真の上の余白が正しく表示されました、

 


 

06 スタイルを上書きしよう

デフォルトのスタイルを上書きする

CSSファイルに
セレクタを入力

ul {

}

CSSファイルに
paddingプロパティと値を入力
一般的なWebブラウザのデフォルトのスタイルでは
ul要素の周囲に余白が付けられているため上下左右の余白を0にする。

ul {
padding:0;

}

保存したら
Chromeで確認します。
ナビゲーションの左側に付いてた余白がなりました。

このような感じです。


chapter6-min

 


 

Chapter 07 テキストをデザインしよう

01 ウェブフォントを利用しよう
私たちが、文字として、認識しているのは
そのパソコンにインストールされたフォントと呼ばれる書体データです。

Macはヒラギノ角ゴ
Windowsはメイリオ
など


chapter7


chapter7lesson

 


 

Google Fontsにアクセス

https://fonts.google.com/

フォントを検索
Josefin Slabのフォントを検索

HTMLコードをコピー

index.htmlをテキストエディタで開き
HTMLファイルに
head内にペーストする

<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">

HTMLファイル
item.htmlファイルとmap.htmlファイルにもペーストします。

 


 

次に、
Google Fontsに、戻り
CSSファイルに

CSSコードをコピーし、style.cssのh1,h2,li,footerの部分にペースト

h1,h2,li,footer {
text-align:center;

}

CSSファイルにペーストします。

h1,h2,li,footer {
text-align:center;
font-family: 'Josefin Slab', serif;

}

CSSファイルを保存し、
Chromeで確認します。

 


 

Flation
アイコン素材

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

https://www.flaticon.com/

 


 

02 表内のテキストを配置しよう
HTMLファイル
item.htmlの表のデザインを整える

CSSファイル
セレクタを入力
widthプロパティと値を入力
表全体がページの横幅いっぱいに広がります。

table {
width:100%;

}

CSSファイル
セレクタを入力
text-alignプロパティと値を入力

th {
text-align:left;

}

 


 

03 要素を区別しよう
名前を付けて区別する

HTMLファイル
item.htmlをテキストエディタで開き
class名を追加

<td class="price">6,980円</td>

item.htmlを保存し

style.cssを開き
CSSファイルに
セレクタを入力しtext-alignプロパティと値を入力

.price {
text-align:right;

}

ファイルを保存して
Chromeで確認します。

 


 

04 リンクテキストのスタイルを変更しよう
リンクのテキスト色は、初期状態ではブルー色です。

CSSファイルに

セレクタを入力
colorプロパティと値を入力

li a {
color:#000;

}

CSSファイルに
セレクタを入力
text-decorationプロパティと値を入力

li a:hover {
text-decoration:none;

}

ファイルを保存して
Chromeで確認します。

このような感じになります。


chapter7-min


chapter7-2-min

擬似クラスの解説もあります。

 


 

Chapter 08 背景,影,枠線を付けよう

01 枠線を付けよう
リンクテキストを、枠線で囲む


chapter8


chapter8lesson

 


 

CSSファイル
style.cssファイルに

セレクタを入力
boder-topプロパティに値を入力

header {
border-top:solid 10px #c2e08f;

}

 


 

02 背景画像を指定しよう

CSSファイルに
セレクタを入力

background-image:url
background-repeat
background-position
background-size
プロパティに値を入力

h2 {
background-image:url(image/bg_h2.png);
background-repeat:no-repeat;
background-position:center bottom;
background-size:220px 28px;

}

 


 

03 影を付けよう
要素に影のような効果を付ける

CSSファイルに
セレクタを入力し、

section {
box-shadow:0 0 10px 0 #ccc;

}

 


 

04 余白を付けよう
CSSファイルに
marginプロパティは、枠線の外枠。
paddingプロパティは枠線の内側

section {
box-shadow:0 0 10px 0 #ccc;
margin-top:40px;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

}

 


 

05 角を丸めよう
画像の四隅を丸くする

CSSファイルに
セレクタを入力し
border-radius:プロパティと値を入力

th img {
border-radius:6px;

}

ファイルを保存し
Chromeで確認します。

このような感じになります。


chapter8-min


chapter8-2-min

 


 

Chapter 09 モバイル・SNS対応して公開しよう

スマートフォンやタブレットなどのモバイル端末にも対応させる


chapter9


chapter9lesson

 


 

01 モバイル対応しよう

HTMLファイル
index.htmlをテキストエディタで開き

meta要素を追加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSSファイル
style.cssファイルを開き
セレクタを入力しmax-width:100%を入力
この指定で、img要素の幅は親要素であるdivの幅を超えることなく表示されます。

img {
max-width:100%;

}

CSSファイルに
セレクタを入力しmax-width:100%を入力
この指定で、Googleマップの幅は親要素であるdivの幅を超えることなく表示されます。

iframe {
max-width:100%;

}

HTMLファイル
item.htmlファイルとmap.htmlファイルにも、meta要素を追加

meta要素を追加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

メディアクエリの解説

 


 

02 SNS対応しよう

OGPとは
自分のWebページがFacebookでシェアされた時に、表示される情報を設定するためのしくみです。

HTMLファイルに
OGPを利用可能にする

<html prefix="og: http://ogp.me/ns#">

ogのtitleを入力する

<meta property="og:title" content="67Green">

ogのtypeを入力する

<meta property="og:type" content="website">

ogのurlを入力する

<meta property="og:url" content="http://www.example.com">

ogのimageを入力する

<meta property="og:image" content="image/ogimage.jpg">

ogのdescriptionを入力する

<meta property="og:description" content="渋谷区のグリーン専門店">

HTMLファイルを保存します。

 


 

03 ファイルをアップロードしよう

Webサイトが完成したらデータを、サーバーにアップロードします。
FTPクライアントのアプリケーションなどを使い。

レンタルサーバー選びのチェックポイント
サーバーの登録の仕方などは、この本では載ってません。

レンタルサーバーの価格は
100円からのレンタルサーバーもあります。
ただ100円だとデータ容量など少ないと思います。

ディスク容量は
自分のWebサイトを構成するデータの合計サイズが、どのくらいか調べる。

サポート体制
お問い合わせフォームや、電話サポートがあるか?

ファイルをアップロード。
この本では、FileZillaのソフトを紹介、
ファイルのアップロードの仕方は解説してません。

FileZilla – The free FTP solution

https://filezilla-project.org/

FileZillaを使い、実際のアップロードは、インターネットの
サポートでサイトに、使い方など載ってます。

デザインの学校 これからはじめる HTML & CSSの本[Windows 10 & macOS対応版]
サポートページ

https://gihyo.jp/book/2017/978-4-7741-8968-0/support

FTPクライアントソフトを設定しよう

Chapter9(9章)でご紹介した個人向けレンタルサーバサービスの「ロリポップ!」も、
10日間のお試し期間を設けています。

https://image.gihyo.co.jp/assets/files/book/2017/978-4-7741-8968-0/how-to-upload.html

 


 

この本、丁寧な解説なので、これを読めば、簡単なホームページ、Webサイトは作れると思います。
ただ、人によっては、難しく感じる部分もあるかもです。

入門書には、おすすめかもですが。

メモ帳を使うより、専用のテキストエディタを使うと作業が楽だと思います。

普通は、コーディングななどする場合、メモ帳など使わないと思います。
(メモ帳でもできるけど)

また、
写真素材や画像の加工とかは、操作の仕方とか載ってないので、
この本だけで
Webデザインをするには難しいかもです。

Chapterによっての解説は、とても、わかりやすい箇所もあると思います。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)
「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 大型本 – 2017/5/26
千貫 りこ (著), ロクナナワークショップ (監修)

LINEで送る
Pocket

おすすめ