【最新】初心者がHTML/CSSを勉強するのにおすすめの本&サイト

プログラミングの基礎中の基礎といっても過言ではないHTML/CSS。
Webページを作るには必要不可欠です。

  • HTML…ページの構造を作る文字(マークアップ言語)
  • CSS…HTMLで作った要素に対して装飾をするもの

今回はそんなHTMLとCSSを学ぶのに最適なおすすめの本・参考書を紹介していきたいと思います。

HTML / CSSを勉強するのにおすすめの本

【初心者向け】PCにあまり詳しくない方でも分かる一冊

超初心者向けといった位置づけで良いと思います。それくらい本当に丁寧で分かりやすい一冊です。

パソコンやインターネットについてあまり詳しくないという方でも挫折せずに最後まで理解ができます。

ただ一方で、この一冊だけで完全にHTMLとCSSが出来るようになるのは少し難しいと思いますので、こちらの本はあくまで入門書として使って頂いて、以下で紹介する本も合わせて勉強すると良いと思います。

【初心者向け】HTML/CSSのWebサイト制作における実用的な一冊

以前に書いた現役デザイナーが教える!初心者におすすめのデザイン本【グラフィック&WEB】という記事でも紹介しているこちらの本。

実際にWebサイトを作りながらHTMLとCSSを学ぶことができます。

ちょっと厚めでボリュームある一冊ですが、Webサイト制作のワークフロー(流れ)やブラウザ、テキストエディタなどの基礎知識から、サイトの公開(サーバーのレンタルの仕方など)応用編までHTML/CSSが完全網羅されていてかなり実用的な内容になっています。

初心者にでも分かりやすいように用語の解説もありますし、Web制作で使えるフォントの紹介もあって凄く分かりやすいです。

created by Rinker
¥2,772 (2020/09/23 00:08:34時点 Amazon調べ-詳細)

【初心者〜中級者】ある程度HTML/CSSを理解している方向け

脱初心者の大きな一歩になりうる一冊で、ブログ・ニュース系サイトとビジネス系サイトの実例で学ぶことが出来ます。

ある程度基礎を固めている方であれば、レベルアップにちょうど良いかなと思います。

また、レスポンシブデザインの入門としてもかなり良書なので、レスポンシブに興味のある方にもおすすめです。

created by Rinker
¥2,648 (2020/09/23 12:12:54時点 Amazon調べ-詳細)

【中級者】中級者の方におすすめ。Webの基礎をより深く学べる

この本では基本的なHTMLやCSSについて基礎的な部分にももちろん触れていくのですが、大きな特徴としてより深い「なぜこうするのか」といった背景まで深く学べる一冊になっています。

Web制作における自己解決能力が養われるので、バリバリコードを書くエンジニアやwebデザイナーでなくてもWebに携わる人ならぜひ読んで欲しい内容です。

本格派とった感じでしょうか。

【中級者〜上級者】デザインにもっとこだわりたい方へ

こちらはより本格的に今時の主流なデザインを学ぶことが出来る本です。

よりレベルアップしたい方や今の自分のサイトが味気ないなと感じる方におすすめ。

本書で紹介される3つのデザインはweb上で公開されているので、そちらも合わせてぜひ。

HTML / CSSを勉強するのにおすすめのサイト

ここからは、Web上でHTML、CSSを学習できるサービスを紹介していきたいと思います。

色んなサービスが出ているので、自分に合った学習法でチャレンジしてみて下さい。

ドットインストール


プログラミングの学習サイトとしては有名なドットインストール。

HTML、CSSについても学ぶ事ができます。レッスンは3分程度の短い動画にまとめられており、初心者にかなりおすすめです。

【公式サイト】ドットインストール

Progate(プロゲート)


Progateは無料で基礎から学ぶことが出来るサービスで、最初にスライド形式で解説があり、その後に実際にコードを書いて学習を進めていきます。

実際に手を動かすことで実践的にプログラミング体験が出来るので、より理解がしやすいです。

【公式サイト】Progate

【手っ取り早く近道したいあなたへ】Udemy

Udemyはオンラインで教材を購入することが出来るサービスサービスです。

これまで紹介したサイトはあくまで個人でテキストベースで学習するものでしたが、Udemyでは動画を通して学ぶことが出来るのが特徴。

HTML、CSSはかなり膨大な数の動画が用意されています。

1つの教材が1000円弱で購入でき、どれか1つを選んで学習すれば手っ取り早くHTML/CSS を習得できるはず。

講師がプロのエンジニアだったりするので、分かりやすく安心です。

【公式サイト】Udemyはこちら

【補足】フリーで使えるおすすめHTMLエディタを紹介【Windows/Mac対応】

ここまで勉強方法についての話でしたが、最後にHTML / CSSを実際に記述していくテキストエディタを紹介しておきます。

最初からPCにインストールされているテキストエディタでも書けなくはないですが、やはりHTMLタグの入力補助などがついているHTMLエディタを使う方が良いです。

今回はWindows、MacOSで使えるエディタを紹介するので、ぜひ参考にして頂ければと思います。

Windows対応おすすめHTMLエディタ

サクラエディタ


シンプルなUIで使いやすく、高機能なサクラエディタ。初心者にも扱いやすいです。

リリースされてから時間は経ちますが、いまだに根強い人気があります。

マクロ登録など活用すれば、一気に作業が楽になる機能もありますので、ぜひ慣れてきたら自分の使いやすいようにカスタマイズすると良いですよ。

サクラエディタ

Notepad++

こちらは多言語対応のエディタ。

画面分割機能などの機能もありながら軽量で初心者にも扱いやすい設計になっています。

テキストエディタとほとんど変わらないように使えるので、誰でも簡単に使えます。他にはプラグインも充実しているので、後々プラグインを導入してみるのも良いかもしれません。

Notepad++

MacOS対応のおすすめHTMLエディタ

mi


miは昔からある日本で開発された有名なエディタ。

日本語のエディタは少ないので、日本語のものが良いという方はmiが良いでしょう。

とにかくシンプルで処理も早く、機能も充実しているので初心者のはじめてのエディタとしてもおすすめ。

mi

CotEditor

MacのAppStoreで無料でダウンロードできるCotEditor。

色んなファイルに対応していて、特に不満点もなく使えるので、誰にでもおすすめ。

構文の呼び出しなどの機能があるので、こちらも使い方によっては作業効率をかなり高めることができます。

CotEditor

Windows/MacOS両対応

Sublime Text2

こちらも有名なエディタ。

とにかくUIが美しく、使ってて気持ちが良いです。

プラグインが豊富で、好きにカスタマイズができます。

初心者だけでなく、玄人の方にも使われるエディタなので、長く1つのものを使いたいという方はこのSublime Text2を使ってみると良いですね。

Sublime Text2

Atom

これまで紹介してきたエディタに比べると、比較的新しく開発されたエディタ。

日本語に対応しており、タブ型の使いやすいUIが特徴です。

無料のパッケージと呼ばれるもので、機能を追加することができるので、機能性も十分です。

ここ最近で一気にユーザーが増えてきた気がします。

Atom

まとめ

独学で学ぶのが不安だという方はWebサイト制作が学べるプログラミングスクールもあります。

【最新】プログラミングスクール徹底比較!おすすめランキングまとめ

コメントを残す

メールアドレスが公開されることはありません。