現役Webデザイナーをリサーチした結果わかった!初心者向け「基本のHTML&CSS」おすすめ本 はこれだ!

現役Webデザイナー60名にリサーチ!初心者向け「HTML&CSS」おすすめ本ランキング

こんにちは、さくらです。

現役Webデザイナーをリサーチした結果わかった、おすすめ本はこれだ!【第2弾】今回はwebデザインの基本「基本のHTML&CSS」のおすすめ本のランキングです。

前回の現役Webデザイナーをリサーチした結果わかった!初心者向け「Webデザイン」おすすめ本 はこれだ!のリサーチの際に調査した、実際に今活躍しているデザイナーさんが使っていた、おすすめ本をランキング形式にまとめました。

この記事は下記の方を対象にしています。
・未経験からWebデザイナーを目指している方
・Webデザイナーで経験の浅い方
・コーディングを勉強したいWebディレクター
目次

初心者向け「基本のHTML&CSS」おすすめ本ランキング

現役webデザイナー60名をリサーチし本当に役に立つおすすめ本をランキング形式で紹介します。

調査方法はブログとTwitterで検索し、現役webデザイナーの肩書をもちコーディングも行う方をピックアップ。(2020年9月4日現在)総勢60名のwebデザイナーを調査しました。

1位: HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

<現役Webデザイナー13名がおすすめ本として紹介>
・初心者には少しむずかしいかもしれないけど、これ1冊をしっかり覚えればすべて網羅できる本
・ボリュームがたっぷりで、初心者~上級者まで幅広く活用できる本
・著者である草野あけみさんは、フリーのコーダーをされていて、現場をきちんと理解しているので説明がわかりやすいです。

この本は管理人も持っています。webサイトの制作デザインは昔々テーブルタグで行っていたので、CSSデザイン移行段階で一度挫折しました。このブログを自分で作るために再度勉強する時に購入しました。とてもわかりやすい説明で、参考になりました。HTMLが何かわからないwebデザイン初心者の方は2位の「スラスラわかるHTML&CSSのきほん」の方がよいです。こちらは、基本をおさえたWebデザイナー初心者の方におすすめの本です。

2位:スラスラわかるHTML&CSSのきほん 第2版 試し読みしてみる

<現役Webデザイナー9名がおすすめ本として紹介>
・この書籍は「HTMLって何?」という初心者向けの1冊です。
・小さなWebサイト作りを通してHTMLとCSSの基本を学べるので入門書としてよい良い本です。
とりあえず最初の一冊には最適。中身も詰めこみ感がなくて、見やすいですよ。

こちら「HTMLとは何?」という超初心者向けの本です。なぜwebサイトがブラウザーで見られるのかなど基本を理解していないwebデザイナーって意外といるのです。基礎があやふや方はこの本から勉強されるのがおすすめです。

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

<現役Webデザイナー8名がおすすめ本として紹介>
・使用する写真やフォントがスタイリッシュなので、のめり込んでwebサイトを作ってしまう本です。
・「スラスラわかるHTML&CSSのきほん」の上位版という感じです。
基本中の基本を学習したいという方におすすめできる本

この本は素材がおしゃれで作っていて楽しいと評判がいいですね。HTMLとはなんぞや?という基本的な説明もしっかりあるので未経験でwebデザイナーになりたい方にもおすすめの本です。

4位:HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

<現役Webデザイナー6名がおすすめ本として紹介>
・ひととおりHTMLとCSSの基礎を学んだ後にはこの本がオススメです!
「HTML5& CSS3」用語や構造などの基礎に一度触れたことがある人向けの本。基礎が分からない人がこの本から勉強すると必ずつまずくので注意。

この本は管理人も持っています。実は私もかなり本を買っています(笑)
この本はいきなりレイアウトの話から始まるので、HTMLとCSSの基礎がわかっていない方がこの本からHTMLを勉強し始めると、HTMLが嫌いになります(笑)。上記で紹介した基礎の本を学んだ後のステップアップ本として購入されるのがよいです。

5位:作りながら学ぶ HTML/CSSデザインの教科書

<現役Webデザイナー5名がおすすめ本として紹介>
サイト作成準備の段階からサイト公開までひととおり学べる本です。
・基礎から学べるだけでなく、現場で実際に使われているテクニックまで学べる内容
・1つのwebサイトを作り上げるのに必要な知識を網羅的に解説しているので実践で使えます。

この本はHTML&CSSの入門書としても役に立ちそうです。基礎からwebサイト制作・公開~webのアクセス解析まで網羅されているので、web制作をひととおりの流れで覚えることができるので現場でも使えます。

6位:世界一わかりやすい HTML5&CSS3 コーディングとサイト制作の教科書

<現役Webデザイナー3名がおすすめ本として紹介>
拡張子の変更の仕方から、ファイルの読み込み方やHTML&CSS基礎までを丁寧に解説している一冊
・各章ごとに解説→練習問題という流れになっていて、学んだことを知識として定着させることができます。

こちらも初心者向けのwebサイトの基本からHTML&CSS、webサイトの公開方法まで一連の流れがわかりやすい本です。練習問題がそれぞれにあるので、きちんと覚えたかどうか確認しながらすすめられます。

6位:CSS設計完全ガイド ~詳細解説+実践的モジュール集

<現役Webデザイナー3名がおすすめ本として紹介>
・webデザイナーよりはwebコーダーが読む本ではあるが、cssを本気で極めるならおすすめの本
・ CSSフレームワークに依存しない手法を学ぶためにはよい本です。

プロの現場ではCSS設計は大変重要なのですが、小さな会社だとデザイナーがコーディングまですることが多いので、その方面に就職が決まった方やフリーの方が読むと仕事の幅が広がります。私もCSS設計は勉強予定ですがまったく手が廻らずフロントエンジニアにお任せ状態です・・。

6位:わかばちゃんと学ぶ Webサイト制作の基本

<現役Webデザイナー3名がおすすめ本として紹介>
・これからwebの世界に飛び込みたいという人にとってはぴったりの1冊
webサイト制作の0~100までをマンガでわかりやすく解説している本。

4コマ漫画でサイトの基本的な仕組みから企画、制作などひととおりを学べます。未経験からwebデザイナーを目指す方には入門書として読みやすいです。html、css、Javascriptなどが擬人化されていて、親近感をもちやすいので専門用語で挫折した方にもおすすめ。

9位:1冊ですべて身につくHTML&CSSとWebデザイン入門書

<現役Webデザイナー2名がおすすめ本として紹介>
・本当にこの1冊ですべて身につくHTML&CSSとWebデザイン入門書だと思います。
・知識ゼロから体系的に学べますが、初心者向け~プロの現場でも使えるテクニックなども掲載されているので幅広い方が対象の使える1冊です。
ベストセラーになっているweb本です。

1つのwebサイト制作をしながら体系的に学べる1冊です。サイトデザインの作り方が細かく分かれているので実践的に学べます。webデザイン初心者の方におすすめできる1冊です。

10位:本当によくわかるHTML&CSSの教科書

<現役Webデザイナー2名がおすすめ本として紹介>
・Webサイト構築の大筋を理解のに最適の本です。
Webサイトを作ったことはあるけど挫折した人や基礎を学びたい人にぴったりの一冊です。
・プログラミング知識がない人でも基礎学習できるので、デザイン性の高いWebサイトを作ることができるようになります。

この本を勉強することでトップページ、メニュー、アクセス、問い合わせフォームと一般的なwebサイトの制作ができます。全部作り終わった時にはかなりの自信がつきます。webサイトの仕組みなど基本知識も網羅されているので未経験のwebデザイナーを目指している方にはおすすめの1冊です。

ランキング圏外の本をご紹介

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (現役Webデザイナー1名がおすすめ)
必要な内容が1冊の本にコンパクトにまとまっているのは便利!htmlやCSSを理解してパッと見るとに役にたちますが、初心者はもっと基本の方がよいと思います。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎 (現役Webデザイナー1名がおすすめ)
これからwebデザイナ―を目指す方がCSSの役どころを理解するのに最適な一冊です。

だれかの役に立つまとめ

この「Webデザインの基本」と「HTML&CSS」で現役のweb制作をしているデザイナーさんがおすすめする本をご紹介しました。

今はネットにもよい情報はたくさんあります。私が今でもお世話になっているサイトをいくつか紹介します。

HTML&CSSを勉強するおすすめwebサイト

HTML クイックリファレンス
超有名サイトです。HtmlやCSSなどを調べるのによく使いますが、こちらで独学で勉強することも可能です。

MDN(Mozilla Developer Network)
Firefoxで有名なMozillaが公開している、Web技術全般をわかりやすく解説しているめちゃ使えるサイトです。

とほほのWWW入門
ここは私がwebの仕事を始めたことにお世話になったサイトで、かなりの老舗サイトです。

ドットインストール
3分の動画によって学ぶことができるのが、ドットインストールです。CSSはここで勉強しました。動画なのでわかりやすいのですよね。

WHATWG
HTMLと関連技術の開発をするためのコミュニティである。W3Cが策定したXHTMLや、W3Cがウェブ開発者の要望を軽視していることなどを不満に思ったApple、Mozilla、Operaの開発者たちによって2004年に結成された団体で今はW3Cよりも影響力があるかも。

だれかのためになるまとめ

未経験でwebデザイナーになりたい方は、デザインの基礎とHTML,CSSを勉強すればひととおりの知識は身につきます。ただ、そのままフリーになるのはなかなか難しいです。独学orスクール知識を学ぶ→クラウドワークスなどで実績を積んで、そのままフリーになるという方ももちろんいます。ただ、こういう方が生き残るのが大変です。

おすすめは勉強したら制作会社に入ってプロの仕事方法を学ぶのが一番です。そして、しっかり学んだ後にフリーになる方が確実です。年齢が若い方ならインターンなどもあるので、知識がなくても就職できる可能性もあります。

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

この記事を書いた人

「人生100年。仕事に、生活に、自分にワクワクし続ける!」
をモットーに現在「デジタルドクター」として活動中。
こちらでは30~50代の女性がキラキラするための情報を中心に発信します。
ウェブ解析やマーケティングなどIT関連話は デジタルドクターサイトで発信中。

コメント

コメントする

目次