HTML/CSS

HTML/CSSの学習におすすめの勉強本と動画

IT・Web業界特化の転職サイト!
【マイナビIT AGENT】

先輩くん
先輩くん
マイナビIT AGENTは、IT・Web業界に強い転職エージェントだよ!
後輩ちゃん
後輩ちゃん
登録~転職に至るまで一切費用はかからないよ!
公式ホームページはこちら

【月額980円で読み放題!】
Amazon Kindle Unlimited

Amazon Kindle Unlimited
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

おすすめ参考書

後輩ちゃん
後輩ちゃん
先輩!HTML/CSSの学習でおすすめの本を教えてください!
先輩くん
先輩くん
了解!僕がおすすめする本について紹介していくね!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

本書情報
出版社SBクリエイティブ
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
(電子書籍)
レビュー
(Amazon)
(1,654件)
本書の構成

  1. 最初に知っておこう! Webサイトの基本
  2. Webの基本構造を作る! HTMLの基本
  3. Webのデザインを作る! CSSの基本
  4. フルスクリーンのWebサイトを制作する
  5. 2カラムのWebサイトを制作する
  6. タイル型のWebサイトを制作する
  7. 外部メディアを利用する

レビューちゃん
レビューちゃん

読み進めながらHTML&CSSを打ち込むだけでフルスクリーン、2カラム、タイル型のページを作成することができます。初心者の自分にもどこかで見たことあるような「ちゃんとオシャレな」Webページが作れて、ちょっと感動しました。HTML&CSSの解説も分かりやすく、かつコンテンツの配置や配色、使用するツール、レスポンシブ対応などWebデザインに関する内容も充実しており、初心者向け本としてとてもバランスが良いです。
私は最初kindle版を買いましたが、読みにくいので書籍版を買い直しました。手元に置いて何度も読み返したい本です。

引用元:Amazonレビュー
レビューくん
レビューくん

他のhtml/cssの参考書も3冊ほど持っていて、progateやudemyの講座も受けていますが、これ一冊あれば入門には充分です。
progateで苦手意識が芽生えなければ楽しく進められるかと思います。解説がわかりやすいし、よく使うタグやプロパティもまとめられているし初心者が欲しい情報が得られて満足しています。

引用元:Amazonレビュー

HTML&CSSとWebデザインが 1冊できちんと身につく本

本書情報
出版社技術評論社
著者服部 雄樹
発売日2017/7/21
ページ数732ページ
Kindle版
(電子書籍)
レビュー
(Amazon)
(189件)
本書の構成

  1. 知っておきたいサイトとデザインのきほん知識
  2. サイト制作の前に準備しておくこと
  3. 知っておきたいHTMLのきほんと書き方
  4. 知っておきたいCSSのきほんと書き方
  5. フルスクリーンページを制作する
  6. シングルカラムページを制作する
  7. 2カラムページを制作する
  8. グリッドレイアウトページの制作と動画の埋め込み
  9. 問い合わせページを制作する
  10. マルチデバイス対応ページを制作する

レビューちゃん
レビューちゃん

実際に進めながら学習することができ、その中で分からないことが出てくればそれもまた学びの機会にすることができます。自分でコーディングしながら進めることで応用を考えることにもつながります。Kindle版を購入し通勤の時間の中で進めることができました。知識ゼロではなく少し学んでから取り組むとベストなレベルかと思います。

引用元:Amazonレビュー
レビューくん
レビューくん

解説しながら少しづづ足して完成させていくので、分かりやすい。
自分が作りたいサイトでレイアウトがおかしくなっても、本の知識で直すことができた。
初心者でも完成度が高いサイトを作れる。
作ったサイトを作者の方に見てほしいくらいいいサイトができた。

引用元:Amazonレビュー

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

本書情報
出版社SBクリエイティブ
著者Mana
発売日2021/2/19
ページ数355ページ
Kindle版
(電子書籍)
レビュー
(Amazon)
(181件)
本書の構成

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

レビューちゃん
レビューちゃん

WordPress のデザインやレイアウトを CSS を使って変更するために、この本を入手しました。
HTML はかなり理解していますが CSS はちょっと手を加えるられる程度しか理解度がないので難しそうでしたが、本の内容がとてもよく整理されていて助かりました。
カラフルで視覚的にとても見やすいレイアウトなので、本を開いた時に堅苦しさがなくて、とても取り組みやすいです。
この本の助けを借りて、なんとか自分好みのデザインを作ってみようと思います。

引用元:Amazonレビュー
レビューくん
レビューくん

私のスキルとしてはHTML・CSSは中の下のレベルで、これまでいくつかの書籍を参考に学習してきましたが、自分には一番合っていると思えるくらいわかりやすかったし、為になりました。まったくの初心者で出会っていたらどう感じたかは今はもうわかりませんが・・・

引用元:Amazonレビュー

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

本書情報
出版社翔泳社
著者竹内 直人 / Capybara Design / 竹内 瑠美
発売日2021/10/14
ページ数288ページ
Kindle版
(電子書籍)
レビュー
(Amazon)
(135件)
本書の構成

  1. HTMLを書いてみよう
  2. SNSリンク集を作ってみよう
  3. 2カラムページを作ってみよう
  4. 1カラムページを作ってみよう
  5. 複数ページのサイトを作ってみよう

レビューちゃん
レビューちゃん

イラストや図での解説もわかりやすく、カピぞうさんも可愛くスイスイ読めました。現役でWeb制作の仕事をしていますが、Web業界は日進月歩でどんどん変わっていくので、私が持っていた知識で古かった部分をアップデートできてとてもよかったです。

引用元:Amazonレビュー
レビューくん
レビューくん

いくつかコーディングの本を読んでいますが、苦手意識がなかなか拭えず。SNSで評判が良かったので買ってみました。
一番良かったのは、PCサイトからスマートフォンサイト作成、その逆も学べる点でしょうか。他の本は一方通行だった気がします。。。実際案件ではまだスマホファーストでコーディングをしたことがないこともあり、体験できたのが良かったです!また、使い方が曖昧だったプロパティも動画でかなりしっかり教えてくれるので、苦手意識がだいぶ払拭されました。カワイイ絵柄ですが、中身は結構骨太です!

引用元:Amazonレビュー

おすすめ動画コンテンツ

私がおすすめする動画コンテンツはUdemyです。
実際にUdemyを利用して実感した魅力的なポイントは、以下の通りです。

Udemyのここが魅力

  • 新規学習者向けのセールで格安でコースを購入することができる
  • コース購入から30日以内であれば、返金することができる
  • 分からない箇所があれば、コメントで質問することができる
  • プロのエンジニアが教えてくれるため、実践的な講義を受けられる

後輩ちゃん
後輩ちゃん
Udemyすごい。。
先輩くん
先輩くん
僕も新しい技術を学びたい時には、必ずと言っていいほど利用しているよ!

ちゃんと学ぶ、HTML/CSS + JavaScript

ウェブ開発の人気オンラインコース
動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,710人
レビュー
(Udemy)
(9,232件)
こんな人におすすめ!

  • Web制作を学びたい方
  • アプリ制作等でHTMLと CSSおよび、JavaScriptの知識が必要な方

動画構成

  1. はじめに
  2. 入会フォームをHTML/CSSで作成しよう
  3. レスポンシブWebデザインで、スマホ対応のサイトを作ろう
  4. Bootstrapで素早くWebページを作ろう【2021年版】
  5. JavaScriptで今日の日付を表示しよう
  6. イベントドリブンな、ストップウォッチプログラムを作成しよう
  7. Ajax通信でフォトライブラリーを作成しよう
  8. JavaScriptライブラリーを利用しよう

レビューちゃん
レビューちゃん

これこそ本当に丁寧な解説というものだと感じました。理屈が分からなければ前に進めないタイプの私にはとてもよかったです。通常は講義でわからない部分はネットで調べながらやったりしているのですが、本講座は講座内ですべて細かいところまで説明してくれるのでその必要がありませんでした。それでいて、スピードを遅く感じるわけではなく、いつのまにかhtml、javaScriptの初歩的な学習ができていました。ありがとうございました。

引用元:Udemyレビュー
レビューくん
レビューくん

初心者の私でも迷走することなく講座を進める事ができたのは、丁寧で詳細な解説のお陰だと思っています。この講座中に質問をさせていただいたのですが、その解答も迅速でとてもわかりやすくご教示いただけました。楽しく勉強を進める事ができました。

引用元:Udemyレビュー
動画の詳細はこちら

ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!

ウェブ開発の人気オンラインコース
動画情報
作成者中村 裕太
学習時間24時間
受講者数31,997人
レビュー
(Udemy)
(5,606件)
こんな人におすすめ!

  • 実務未経験からITエンジニアに転職したい方
  • 自分でWebサービスを開発して公開したい方
  • 駆け出しのWebエンジニアでスキルアップしたい方
  • Webアプリを構築できるようになって仕事の幅を広げたいWebデザイナー
  • Webアプリを構築できるようになって仕事の幅を広げたいマーケター
  • エクセルやパワポ仕事が多いSEの方でプログラムを自分でもっと書けるようになりたい方。

動画構成

  1. コース概要
  2. ウェブ開発の概要を知ろう
  3. 開発環境を準備しよう
  4. HTMLの基本を習得しよう
  5. HTMLステップアップ編
  6. CSSの基本を習得しよう
  7. Flexboxの基本を習得しよう
  8. ポートフォリオサイト – 作品紹介サイトを制作しよう
  9. ウェブサイトのコーディング
  10. Bootstrap5の基本を習得しよう
  11. Bootstrap5でフォトギャラリーを制作しよう
  12. JavaScript入門
  13. JavaScript DOM操作
  14. JavaScript イベントとイベントハンドラ
  15. 新・Rubyの開発環境構築をしよう
  16. Ruby入門
  17. MySQL入門
  18. Ruby on Rails7 入門 – 導入
  19. Ruby on Rails7 入門 – タスク管理アプリを作成しよう
  20. Git/GitHub入門 – ソースコードバージョン管理入門
  21. AWS Cloud9による開発環境構築
  22. Ruby on Rails5入門
  23. ボーナスレクチャー

レビューちゃん
レビューちゃん

初心者にとってわかりやすく、一つ一つの解説が丁寧。コースが広範囲で基礎を網羅しているため、このコースひとつからの発展ができる。

引用元:Udemyレビュー
レビューくん
レビューくん

受講前にオリエンテーションが行われることにより、Q&Aの手順や注意点が具体的に解説されており、わかりやすかった。

引用元:Udemyレビュー
動画の詳細はこちら

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

ウェブ開発の人気オンラインコース
動画情報
作成者NEST online
学習時間9時間
受講者数8,806人
レビュー
(Udemy)
(1,469件)
こんな人におすすめ!

  • 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方
  • より実践的なコーディングのスキルを身に着けたい方

動画構成

  1. 【初心者向け】クリニックサイトのマークアップ(1)
  2. 【初心者向け】クリニックサイトのマークアップ(2)
  3. 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
  4. 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
  5. 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
  6. 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
  7. 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
  8. 【上級者向け】Webマガジンサイトのマークアップ(1)
  9. 【上級者向け】Webマガジンサイトのマークアップ(2)
  10. 【上級者向け】Webマガジンサイトのマークアップ(3)
  11. 【上級者向け】Webマガジンサイトのマークアップ(4)

レビューちゃん
レビューちゃん

このコースの特徴は、個別の技術を順次解説しているのではなく、1つのサイトを作成する過程を解説しているところにあります。よって、自分が今何をやっているのかを明確に知ることができるし、今後、自分がコーディングする時になると、どの講義内容をどこで活用するのかが想像しやすいです。非常に勉強になりました。

引用元:Udemyレビュー
レビューくん
レビューくん

基礎を終了して次のステップアップにちょうど良かったです。聞きやすいしわかりやすいと思います。より実践的なことをしている実感が出ます。

引用元:Udemyレビュー
動画の詳細はこちら

まとめ

今回は、HTML/CSSの学習でおすすめの本と動画コンテンツについてご紹介しました。

HTML/CSSは、Web制作では必須のスキルとなるので覚えておきましょう。HTML/CSSの学習が終わって次のステップに進みたい人は、JavaScriptの学習をしましょう。JavaScriptを使えるようになると動きのあるサイトを制作することができるようになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村