HTMLとCSSはWeb制作を行うための基本中の基本です。どんなWebサイトを作るにしても、HTMLとCSSを使わずに作ることはできません。

今回は、初めてHTMLとCSSを勉強する人におすすめの入門書をご紹介したいと思います。

HTMLとは

HTMLは、Webサイト上に表示するコンテンツを記述するためのマークアップ言語です。今読んでいるこのテキストも、HTMLの中に記述されているためサイト上に表示されています。

Webサイトに欠かせない要素に下記のようなものがありますが、HTMLファイルに記述することでページ上に表示されています。

  • テキスト
  • 画像
  • 箇条書き
  • 見出し

CSSとは

CSSは、Webサイトのデザインを整えるためのマークアップ言語です。全く同じHTMLを使ってWebサイトを作っても、CSSによってぜんぜん違う見た目のWebサイトができあがります。

下記のようなスタイルは、基本的にCSSファイルで指定します。

  • 背景色
  • テキストの色
  • 画像の大きさ
  • 余白の大きさ
  • レイアウト
  • アニメーション

少し前までは、WebサイトのアニメーションはJavaScriptという言語で作らなければなりませんでしたが、CSS3からCSSだけで簡単なアニメーションを作ることができるようになりました。

HTMLとCSSのおすすめ勉強法

いざHTMLとCSSを勉強してWebサイトを作れるようになろう!と思った時に、どのような順番で勉強すれば分からないという方もいるかもしれません。

そのような方は、ぜひ下記の順番で学習を進めてみることをおすすめします。

  1. Progateで基本を学ぶ
  2. Udemyで流れを掴む
  3. 参考サイトの模写で実際にサイトを作る
  4. ポートフォリオサイトを作ってみる

詳しくはこちらの記事でご紹介しているので、ぜひ参考にしてください。

おすすめの書籍

では、初心者がHTMLとCSSを勉強する時におすすめの書籍をご紹介していきたいと思います。

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

WebクリエイターボックスのManaさんが書かれたHTMLとCSSの入門書籍です。Webサイトを作るための基本知識から始まり、HTMLとCSSの基本が初心者向けに説明されているので、初めてHTMLとCSSの勉強をするという人におすすめの書籍です。

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

2018年9月に発売された比較的新しい書籍です。HTMLとCSSの基本を覚えたら、サンプルサイトの作成を通してWeb制作の様々なテクニックを身につけていくことができます。

また、Webサイトを公開するまでの手順やファイルの配置方法、SNSのogpタグの書き方などもしっかりと説明されているので、Web制作だけでなく公開する所までの手順が一冊で分かるようになっています。

デザインの学校 これからはじめる HTML & CSSの本

数あるHTMLとCSSの入門書の中でも、分かりやすい説明が特徴の書籍です。これまでHTMLとCSSの勉強を始めたけれど途中で挫折してしまった人でも、この本であればきっと最後までやり抜けるはずです。

まずは易しい入門書から始めることが、挫折しない勉強のためにはとても大切です。

HTML5&CSS3デザインきちんと入門

1つ1つの項目がとても丁寧に書かれていて、初心者にも分かりやすく説明されていながらも、最新のマークアップのテクニックまで紹介されていて、幅広く、そして深い知識を身につけることができる入門書です。

いちばんやさしい HTML&CSS 入門教室

HTMLとCSSの基本知識を身に付けて、Webサイトの作り方を学ぶことができる書籍です。

説明がとても丁寧なので、初心者の方でもしっかりと内容を理解しながら読み進めていくことができます。

また、最近発売された書籍ということもあって、最新のトレンドが反映されており、スマホ向けサイトに重点が置かれているので、これからWebサイトの作り方を勉強したい人にはとてもおすすめです。

いちばんやさしい JavaScript 入門教室

上記に紹介した書籍のJavaScript版です。WebサイトはHTMLとCSSで基本部分を作ることはできますが、複雑なアニメーションや処理を行うためにはJavaScriptを使わなければなりません。

Webデザイナーになるためには、JavaScriptも必ず理解しないといけないので、HTMLとCSSを覚えたら次はJavaScriptに挑戦してみましょう。

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

Webサイトを作るために必要なHTMLとCSSの知識に加え、Webデザインの定番レイアウトやデザインを学ぶことができる書籍です。

チュートリアル形式になっているので、サンプルサイトを作りながら必要な知識を順番に見に付けていくことができます。

実践的なテクニックも多く紹介されており、この本の内容をしっかりと理解することができれば、Web制作に関する基本はばっちりと押さえることができます。

入門書の選び方

HTMLとCSSは様々な書籍が発売されていて、どの本を選べばいいか分からない方も多いかもしれませんが、書籍を選ぶときには下記のポイントに気をつけてみてください。

  • 自分のレベルに合っていること
  • 最後までやり遂げられそうな本を選ぶこと

まず、自分のレベルに合っている本を選ぶようにしましょう。

自分のレベルよりも難しい本を選んでしまうと、内容を理解することができず、最後までやり遂げても得られる知識が限られてしまいます。

自分のレベルよりも簡単な本を選んでしまうと、知っていることだらけで途中で飽きてしまったり、すぐ読み飛ばしてしまったりします。

また、最後までやり遂げられそうな本を選ぶというのも重要です。

分厚い本を選んでしまうと、途中で投げ出してしまう可能性があります。なるべく最初は手に取りやすい、簡単な書籍を選ぶようにして、それをやり終えたらもう少しステップアップした内容の本で勉強という風に、1冊ですべて身につけるのではなく、1つ1つの書籍をこなすことによって知識を得ていった方が偏りなく、着実に力を付けていくことができます。

Webデザイン全般のおすすめ書籍はこちら

Webデザイナーとして知っておかなければならない知識や、身に付けておくべきスキルはHTMLとCSSだけではありません。

デザインの基本知識や、レイアウト、配色など幅広く知識を身に付けておくようにしましょう。

まとめ

プログラミングを少しでもかじったことがある人であれば、HTMLとCSSは比較的スムーズに覚えていくことができます。また、プログラミングを全くやったことが無いという人にとっても、HTMLとCSSは取り掛かりやすく、ある程度のWebサイトであれば比較的短期間で作れるようになります。

Web制作にはHTMLとCSS以外にも様々な言語が登場しますが、基本はこの2つです。

まずはHTMLとCSSを身につけて、デザイナーとしての第一歩を踏み出してみてください。