Amazon Kindle Unlimited
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
おすすめ参考書
後輩ちゃん先輩！HTML/CSSの学習でおすすめの本を教えてください！
先輩くん了解！僕がおすすめする本について紹介していくね！
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
| 出版社 | SBクリエイティブ |
| 著者 | Mana |
| 発売日 | 2019/3/16 |
| ページ数 | 280ページ |
- 最初に知っておこう! Webサイトの基本
- Webの基本構造を作る! HTMLの基本
- Webのデザインを作る! CSSの基本
- フルスクリーンのWebサイトを制作する
- 2カラムのWebサイトを制作する
- タイル型のWebサイトを制作する
- 外部メディアを利用する
読み進めながらHTML&CSSを打ち込むだけでフルスクリーン、２カラム、タイル型のページを作成することができます。初心者の自分にもどこかで見たことあるような「ちゃんとオシャレな」Webページが作れて、ちょっと感動しました。HTML&CSSの解説も分かりやすく、かつコンテンツの配置や配色、使用するツール、レスポンシブ対応などWebデザインに関する内容も充実しており、初心者向け本としてとてもバランスが良いです。
引用元：Amazon
私は最初kindle版を買いましたが、読みにくいので書籍版を買い直しました。手元に置いて何度も読み返したい本です。
他のhtml/cssの参考書も3冊ほど持っていて、progateやudemyの講座も受けていますが、これ一冊あれば入門には充分です。
引用元：Amazon
progateで苦手意識が芽生えなければ楽しく進められるかと思います。解説がわかりやすいし、よく使うタグやプロパティもまとめられているし初心者が欲しい情報が得られて満足しています。
ポチップ
HTML＆CSSとWebデザインが 1冊できちんと身につく本
| 出版社 | 技術評論社 |
| 著者 | 服部 雄樹 |
| 発売日 | 2017/7/21 |
| ページ数 | 732ページ |
- 知っておきたいサイトとデザインのきほん知識
- サイト制作の前に準備しておくこと
- 知っておきたいHTMLのきほんと書き方
- 知っておきたいCSSのきほんと書き方
- フルスクリーンページを制作する
- シングルカラムページを制作する
- 2カラムページを制作する
- グリッドレイアウトページの制作と動画の埋め込み
- 問い合わせページを制作する
- マルチデバイス対応ページを制作する
実際に進めながら学習することができ、その中で分からないことが出てくればそれもまた学びの機会にすることができます。自分でコーディングしながら進めることで応用を考えることにもつながります。Kindle版を購入し通勤の時間の中で進めることができました。知識ゼロではなく少し学んでから取り組むとベストなレベルかと思います。
引用元：Amazon
解説しながら少しづづ足して完成させていくので、分かりやすい。
引用元：Amazon
自分が作りたいサイトでレイアウトがおかしくなっても、本の知識で直すことができた。
初心者でも完成度が高いサイトを作れる。
作ったサイトを作者の方に見てほしいくらいいいサイトができた。
ポチップ
ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座
| 出版社 | SBクリエイティブ |
| 著者 | Mana |
| 発売日 | 2021/2/19 |
| ページ数 | 355ページ |
- 最初に知っておこう！ Webサイトの基本と必携ツール
- ランディングページで学ぶ「レスポンシブWebデザインとフォント」
- ブログサイトで学ぶ「装飾とカラムレイアウト」
- コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
- イベントサイトで学ぶ「特定ページの作り方とアニメーション」
- ギャラリーサイトで学ぶ「動画と画像の使い方」
- HTMLやCSSをより早く、より上手に管理できる方法
- サイトの投稿と問題解決
WordPress のデザインやレイアウトを CSS を使って変更するために、この本を入手しました。
引用元：Amazon
HTML はかなり理解していますが CSS はちょっと手を加えるられる程度しか理解度がないので難しそうでしたが、本の内容がとてもよく整理されていて助かりました。
カラフルで視覚的にとても見やすいレイアウトなので、本を開いた時に堅苦しさがなくて、とても取り組みやすいです。
この本の助けを借りて、なんとか自分好みのデザインを作ってみようと思います。
私のスキルとしてはHTML・CSSは中の下のレベルで、これまでいくつかの書籍を参考に学習してきましたが、自分には一番合っていると思えるくらいわかりやすかったし、為になりました。まったくの初心者で出会っていたらどう感じたかは今はもうわかりませんが・・・
引用元：Amazon
ポチップ
これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本
| 出版社 | 翔泳社 |
| 著者 | 竹内 直人 / Capybara Design / 竹内 瑠美 |
| 発売日 | 2021/10/14 |
| ページ数 | 288ページ |
- HTMLを書いてみよう
- SNSリンク集を作ってみよう
- 2カラムページを作ってみよう
- 1カラムページを作ってみよう
- 複数ページのサイトを作ってみよう
イラストや図での解説もわかりやすく、カピぞうさんも可愛くスイスイ読めました。現役でWeb制作の仕事をしていますが、Web業界は日進月歩でどんどん変わっていくので、私が持っていた知識で古かった部分をアップデートできてとてもよかったです。
引用元：Amazon
いくつかコーディングの本を読んでいますが、苦手意識がなかなか拭えず。SNSで評判が良かったので買ってみました。
引用元：Amazon
一番良かったのは、PCサイトからスマートフォンサイト作成、その逆も学べる点でしょうか。他の本は一方通行だった気がします。。。実際案件ではまだスマホファーストでコーディングをしたことがないこともあり、体験できたのが良かったです！また、使い方が曖昧だったプロパティも動画でかなりしっかり教えてくれるので、苦手意識がだいぶ払拭されました。カワイイ絵柄ですが、中身は結構骨太です！
ポチップ
おすすめ動画コンテンツ
私がおすすめする動画コンテンツはUdemyです。
実際にUdemyを利用して実感した魅力的なポイントは、以下の通りです。
- 新規学習者向けのセールで格安でコースを購入することができる
- コース購入から30日以内であれば、返金することができる
- 分からない箇所があれば、コメントで質問することができる
- プロのエンジニアが教えてくれるため、実践的な講義を受けられる
後輩ちゃんUdemyすごい。。
先輩くん僕も新しい技術を学びたい時には、必ずと言っていいほど利用しているよ！
ちゃんと学ぶ、HTML/CSS + JavaScript
| 作成者 | たにぐち まこと |
| 学習時間 | 9時間 |
- Web制作を学びたい方
- アプリ制作等でHTMLと CSSおよび、JavaScriptの知識が必要な方
- はじめに
- 入会フォームをHTML/CSSで作成しよう
- レスポンシブWebデザインで、スマホ対応のサイトを作ろう
- Bootstrapで素早くWebページを作ろう【2021年版】
- JavaScriptで今日の日付を表示しよう
- イベントドリブンな、ストップウォッチプログラムを作成しよう
- Ajax通信でフォトライブラリーを作成しよう
- JavaScriptライブラリーを利用しよう
これこそ本当に丁寧な解説というものだと感じました。理屈が分からなければ前に進めないタイプの私にはとてもよかったです。通常は講義でわからない部分はネットで調べながらやったりしているのですが、本講座は講座内ですべて細かいところまで説明してくれるのでその必要がありませんでした。それでいて、スピードを遅く感じるわけではなく、いつのまにかhtml、javaScriptの初歩的な学習ができていました。ありがとうございました。
引用元：Udemy
初心者の私でも迷走することなく講座を進める事ができたのは、丁寧で詳細な解説のお陰だと思っています。この講座中に質問をさせていただいたのですが、その解答も迅速でとてもわかりやすくご教示いただけました。楽しく勉強を進める事ができました。
引用元：Udemy
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
| 作成者 | 中村 裕太 |
| 学習時間 | 24時間 |
- 実務未経験からITエンジニアに転職したい方
- 自分でWebサービスを開発して公開したい方
- 駆け出しのWebエンジニアでスキルアップしたい方
- Webアプリを構築できるようになって仕事の幅を広げたいWebデザイナー
- Webアプリを構築できるようになって仕事の幅を広げたいマーケター
- エクセルやパワポ仕事が多いSEの方でプログラムを自分でもっと書けるようになりたい方。
- コース概要
- ウェブ開発の概要を知ろう
- 開発環境を準備しよう
- HTMLの基本を習得しよう
- HTMLステップアップ編
- CSSの基本を習得しよう
- Flexboxの基本を習得しよう
- ポートフォリオサイト – 作品紹介サイトを制作しよう
- ウェブサイトのコーディング
- Bootstrap5の基本を習得しよう
- Bootstrap5でフォトギャラリーを制作しよう
- JavaScript入門
- JavaScript DOM操作
- JavaScript イベントとイベントハンドラ
- 新・Rubyの開発環境構築をしよう
- Ruby入門
- MySQL入門
- Ruby on Rails7 入門 – 導入
- Ruby on Rails7 入門 – タスク管理アプリを作成しよう
- Git/GitHub入門 – ソースコードバージョン管理入門
- AWS Cloud9による開発環境構築
- Ruby on Rails5入門
- ボーナスレクチャー
初心者にとってわかりやすく、一つ一つの解説が丁寧。コースが広範囲で基礎を網羅しているため、このコースひとつからの発展ができる。
引用元：Udemy
受講前にオリエンテーションが行われることにより、Q＆Aの手順や注意点が具体的に解説されており、わかりやすかった。
引用元：Udemy
実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
| 作成者 | NEST online |
| 学習時間 | 9時間 |
- 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方
- より実践的なコーディングのスキルを身に着けたい方
- 【初心者向け】クリニックサイトのマークアップ(1)
- 【初心者向け】クリニックサイトのマークアップ(2)
- 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
- 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
- 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
- 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
- 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
- 【上級者向け】Webマガジンサイトのマークアップ(1)
- 【上級者向け】Webマガジンサイトのマークアップ(2)
- 【上級者向け】Webマガジンサイトのマークアップ(3)
- 【上級者向け】Webマガジンサイトのマークアップ(4)
このコースの特徴は、個別の技術を順次解説しているのではなく、１つのサイトを作成する過程を解説しているところにあります。よって、自分が今何をやっているのかを明確に知ることができるし、今後、自分がコーディングする時になると、どの講義内容をどこで活用するのかが想像しやすいです。非常に勉強になりました。
引用元：Udemy
基礎を終了して次のステップアップにちょうど良かったです。聞きやすいしわかりやすいと思います。より実践的なことをしている実感が出ます。
引用元：Udemy
まとめ
今回は、HTML/CSSの学習でおすすめの本と動画コンテンツについてご紹介しました。
HTML/CSSは、Web制作では必須のスキルとなるので覚えておきましょう。HTML/CSSの学習が終わって次のステップに進みたい人は、JavaScriptの学習をしましょう。JavaScriptを使えるようになると動きのあるサイトを制作することができるようになります。
