完全初心者向けホームページ制作のためのHTMLとCSSの学習におすすめの本【段階と目的別に紹介】

これから紹介していく教材本でHTML・CSSを学ぶ目的は何なのかをそれぞれ段階別に解説し、自身に見合った教材が選べることができればと思いまとめてみました。

 

こんな人におすすめしてます

 

  1. サイトを作る上での勉強の始め方が分からない
  2. HTML・CSSとか分からないけどWebサイトを作ってみたい
  3. サイトを制作できるようになりつつWebの世界の知識を深めたい
  4. コードを理解しWeb業界で働いてみたい

 

などサイトを作る目的の人、HTML/CSSをとにかく理解したい人、また実践的な力をつけてコーダーやフロントエンドエンジニア、Webエンジニアに興味がある人におすすめします。




HTMLとCSSを理解すれば何ができるのか

HTMLはマークアップ言語と呼ばれ、CSSはスタイルシート言語と言います。

どちらもプログラム言語ではありません。

 

この2つの言語を学ぶことでWebサイトの制作の知識が尽きますのでサイトをつくることができるようになります。

つまりWEBサイトの見た目を制作できる言語である。

 

簡単にHTMLとCSSの役割を説明します。

 

HTMLとは

 

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

 

考え方としてはサイトの骨組みをつくるための言語です。

骨組み=フレームワークと言います。

 

普段インターネットで閲覧するサイトのベースはこのマークアップ言語・HTMLを使ってできています。

 

CSSとは

 

CSSとは、(Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページの骨組みを装飾するスタイルシート言語です。

HTMLが骨だとしたらCSSは肉です。

 

サイトのコンテンツに色付けしたり、位置設定をしたり、余白をつくったりと細かい装飾を加えてサイトの見栄えを整える役割をします。

 

 

初心者が1からサイトを作れる本【入門から初心者へ】

 

たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA)

 


基礎的なパソコン知識がある人でサイトを制作する流れを掴むことを目的とした入門テキストです。

小難しい事は一切なく、2日でできるとあるように短時間でホームページの制作までの流れが学べる本です。

この本で実際にサイトが作れますがHTML・CSSについての前知識レベルですので本当に一からサイトを作りたい人の入門テキストとしてはコンセプト通りです。

この本をきっかけにHTML・CSSなどの言語への理解を深めて行けるのでサイトを作るきっかけが欲しい人におすすめです。

 

スラスラわかるHTML&CSSのきほん

 

 


HTML・CSSって何なのか分からない人でも1から丁寧にイラスト付きで解説されています。

この本の目的は読者がサイトのフレームワークをつくれることです。

学習期間としてもイラストと解説が見やすいデザインであるためスラスラと読め、1週間程度で読み切れますので短期で学習したい人におすすめです。

ソースコードも理解できるようになりサイトも作れるようになるので1からHTML・CSSを学び始める初心者にとって優しい本です。

 

 

いちばんよくわかるHTML5&CSS3デザインきちんと入門

 

 

こちらの教材は個人的な評価で見て一番見やすいデザインで分かりやすくHTML・CSSについて解説されています。

Webサイトを作る上で必要な知識であるルートの構造や、スマホとPCでのサイトの見え方を変えるレスポンシブデザインについても書かれています。

この本を読むことでWebサイトの知識が深まり、今必須となっているスマホ用のサイトの作り方を学べますのでより実践的なスキルが身につきます

 

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

 

 

こちらの本はWeb業界で働くことを目的とした人にはお勧めです

15段階のレッスンに別れてHTMLとCSSの理解を深めてWebサイトを制作するためのステップ本です。

解説のための画像も大きく本のデザインも読者が分かりやすいようにまとめられています。

基礎をしっかりと理解してサイトを制作したい人にとっては応用的も利く本です。

またWeb業界で働くなら必要である常識的な知識が載っています。

例えばスマホデザインに重視しないといけない事、画像などの拡張子による活用の違いなどが詰まっていますのでWeb業界に興味もあり1から学びたい人にぜひ手に取っていただきたい。

 

サイトの基礎知識がある人向け 初級から中級へステップアップ

 

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

 


少しサイトへの知識がある人向けの中級者レベルに向けてのステップ本です。

 

HTML/CSSの言語とはなんなのか、またこれらを使ってできる事についての基礎がある人にとっては新しい課題を与えてくれる教材です。

本のデザインも見やすく解説も読みやすいですが、PC用のサイトを軸にした本ではあるのでスマホ用のサイトを作りたい方には物足りないしれないがレスポンシブデザインについても載っていますのでステップアップ段階では十分な方だと評価してます。

またブログサイトのレイアウトの基礎についても触れられているのでサイトのジャンルによってレイアウトの違いが学べるのはおすすめです。

 

WordPressでブログサイトを作ってみたい方はこちらの本をお勧めします。

 


WordPressを使ってブログのレイアウトを作成するのに最適です。

自分でWordPressのテーマを作成したい、WordPress専用のPHPが分からなくてもカスタマイズが可能であることを目的とした本です。

上の本で物足りない方はぜひ手にってみてください。

WordPressでサイトを作ることはかなり力になりますし、また企業でも通用できる実践的なスキル・知識が身につくので今後学び続けるのであれば早い時期に通る道です。

 

HTML5/CSS3 モダンコーディング

 

 

こちらの本はフロントエンドエンジニアの方が著者した本である程度基礎知識があるやや中級者向けです。

フロントエンドエンジニアはWebサイトを構築・作成・運用・更新などを行う職種です。

 

お勧めとして上記で紹介した本をマスターした後に購読を勧めたい初心者から脱皮して中級者へ向かいたい人向けです。

この本では3つのサンプルサイトを作成していくプロセスが載っており、Web業界で働くのであれば必須で使うデベロッパーツールにも触れられていてWeb業界でサイトを作る人の作業の仕方も学べるのはかなり実践的能力が身につきます

 

初心者からプロまで使えるおすすめの事典

 

できるポケット HTML5&CSS3/2.1全事典

 

 

これは本のタイトルにあるようにHTML言語(マークアップ言語)とCSS言語(スタイルシート言語)の事典です。

Webエンジニアで働いていた身としては初心者でなくなっても活用していますのでかなり重宝しています。

HTMLとCSSを扱う上で必要な要素やプロパティと呼ばれるコードが全て載っています

使用例も豊富であり、またNGな書き方なども細かく解説されているので、教材本と合わせてこの事典を活用することをおすすめします。

 

Windowsユーザー向けのショートカットキー事典

 

できるポケット 時短の王道 ショートカットキー全事典 改訂版

 


Windowsユーザー向けではありますがこちらのショートカットキー事典は個人的に感動モノでした。

 

格段に作業効率を上げるためにはショートカットキーを活用することです。

またショートカットキーを知っていて損することはないし、Web業界でもショートカットキーをあまりにも使えない人は仕事が遅く少し恥ずかしい扱いを受けてしまいます。

HTML・CSSについての本ではないですがパソコン作業全てに共通できる本ではあるので、作業効率を上げてかっこよくサクサクと制作したい人や、Web業界に興味がある人は実践的に使える事が書いてあるのでぜひ覚えて見ましょう。

 

 

これからの時代サイトを作れることは必須項目である

私自身HTMLとCSSと少しのプログラム言語をかじった程度でしたが未経験でWeb業界に転職しフロントエンドエンジニアとしてWebサイトを作っていました。

 

その経緯については以下より

 

 

今からの時代小学生の基本授業でもHTMLやCSS、プログラミングの授業を取り入れてIT・Webの理解を高めています。

時代的に見て仕事だけでなく一般常識レベルで必要な知識となってきているので学生の方、または興味があるけど勉強の始め方が分からない人はとりあえず、Web言語を学んで何を作りたいのかの目標を持ってみるのをお勧めします。

 

作りたいもの成りたいものが明確にわかれば学ぶことが何なのかが分かってきます。