【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

【月額980円で読み放題!】
Amazon Kindle Unlimited
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

おすすめ参考書

後輩ちゃん

先輩!HTML/CSSの学習でおすすめの本を教えてください!

先輩くん

了解!僕がおすすめする本について紹介していくね!

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

総合評価
( 5 )
出版社SBクリエイティブ
著者Mana
発売日2019/3/16
ページ数280ページ
本書情報
本書の構成
  • 最初に知っておこう! Webサイトの基本
  • Webの基本構造を作る! HTMLの基本
  • Webのデザインを作る! CSSの基本
  • フルスクリーンのWebサイトを制作する
  • 2カラムのWebサイトを制作する
  • タイル型のWebサイトを制作する
  • 外部メディアを利用する

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

引用元:Amazon

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

引用元:Amazon

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

総合評価
( 4.5 )
出版社技術評論社
著者服部 雄樹
発売日2017/7/21
ページ数732ページ
本書情報
本書の構成
  • 知っておきたいサイトとデザインのきほん知識
  • サイト制作の前に準備しておくこと
  • 知っておきたいHTMLのきほんと書き方
  • 知っておきたいCSSのきほんと書き方
  • フルスクリーンページを制作する
  • シングルカラムページを制作する
  • 2カラムページを制作する
  • グリッドレイアウトページの制作と動画の埋め込み
  • 問い合わせページを制作する
  • マルチデバイス対応ページを制作する

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

引用元:Amazon

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

引用元:Amazon

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

総合評価
( 4.5 )
出版社SBクリエイティブ
著者Mana
発売日2021/2/19
ページ数355ページ
本書情報
本書の構成
  • 最初に知っておこう! Webサイトの基本と必携ツール
  • ランディングページで学ぶ「レスポンシブWebデザインとフォント」
  • ブログサイトで学ぶ「装飾とカラムレイアウト」
  • コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
  • イベントサイトで学ぶ「特定ページの作り方とアニメーション」
  • ギャラリーサイトで学ぶ「動画と画像の使い方」
  • HTMLやCSSをより早く、より上手に管理できる方法
  • サイトの投稿と問題解決

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

引用元:Amazon

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

引用元:Amazon

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

総合評価
( 4.5 )
出版社翔泳社
著者竹内 直人 / Capybara Design / 竹内 瑠美
発売日2021/10/14
ページ数288ページ
本書情報
本書の構成
  • HTMLを書いてみよう
  • SNSリンク集を作ってみよう
  • 2カラムページを作ってみよう
  • 1カラムページを作ってみよう
  • 複数ページのサイトを作ってみよう

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

引用元:Amazon

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

引用元:Amazon
著:Capybara Design, 著:竹内 直人, 著:竹内 瑠美
¥2,420 (2023/07/16 02:01時点 | Amazon調べ)

おすすめ動画コンテンツ

私がおすすめする動画コンテンツはUdemyです。

実際に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)

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

引用元:Udemy

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

引用元:Udemy

まとめ

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次