完全初心者向けホームページ制作のための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とは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

 

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

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

 

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

 

 

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

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

 

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

 

 

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

 

 

 

こちらの教材は本のタイトル通りHTML・CSSについて基本的な知識が付く入門書です。

サイトを作る上でレイアウトの構成が重要ですが、この本はそのレイアウトのデザインを作るCSSでの装飾について力を入れています。

 

難しいテクニック、応用などが無くサイトを作る上での最低限の基礎知識の一通りの制作する過程をまとめた本ですのでホームページ制作の知識が全く無い人、コーディングって何？という人にとっては入りやすい教材です。

 

 

 

 

難しくない基本的なHTML・CSSの書き方と、HTMLのコードでも少し難関ではあるがフォームやテーブルのなどを活用して基本的なレイアウトが学べる内容です。

模範的なPCサイトが作れるようになります。

フォームページ（お問い合わせ）ももちろんアクセスページで必要なグーグルマップの埋め込み方法なども解説されていて基本的なウェブサイトに必要なページ全てが作れます。

ロリポップレンタルサーバーでサーバーのレンタル方法やドメインの取得方法まで解説して載っているので実際にホームページをインターネットに公開する方法も理解できます。

またHTML・CSSを書いたコードの情報をサーバーに上げる時に必要なFTPソフトのダウンロード方法もあり、サイトをインターネットで後悔し実践的に活用したい人にはかなりお勧めな一冊です。

スマホでのレイアウトについてはさらっと触れるだけでPCサイトに重点を置いた本でした。

スマホのサイトの作り方を詳しく学びたい人はは別の本で強化する必要があります。（下記でお勧め本紹介してます）

 

 

 

インターネットを閲覧するためのブラウザのインストール方法から解説が始まります。

この本はレスポンシブデザインからスマホサイトを先に制作したのちにPCサイトのデザインを整えるサイトの制作方法で解説されており、かなりスマホでのサイトの見せ方・コーディングの仕方に力を入れていました。

 

またファビコンについても書かれていて、スマホサイトに力を入れたい人にはかなり魅力的な内容になっています。

（ファビコンとはスマホでサイトをお気に入りしたときに出るアイコン）

 

基本的なことと押さえつつHTMLでも少し難しいコードの書き方を駆使しているところも見えたので応用的な感じもしました。

ウェブサイトを作る上で効率よくページを複製するため、ひな型となるページを1つ作ってどんどんページを増やしていくサイト制作の考え方のコツも載っていました。

1冊でウェブサイトとして必要なページ全てが作れるので完全なサイトが作れます。

 

スマホサイトの作り方に力を入れたい人には一番のおすすめです。

 

 

 

 

HTML・CSSでのコーディングの仕方だけでなくサイトの見栄えを意識したデザインの意識の仕方を取り入れてその両方をバランスよく解説している本です。

ウェブデザインに興味がある人にはおすすめです。

サンプルのワイヤーフレームが今風でお洒落で本のデザインも見やすくきれいでした。

 

エディタはAtomで解説しています。

エディタとはHTML/CSSなどのコードを書くためのソフトです。

Atomはフリーソフトです。

 

HTMLの書き方でも基本的なことはもちろんですが、サイトをかっこよく、お洒落に見せるために意識すべき色彩の選び方についても開設されています。

色の組み合わせのサンプルプランに豊富にページを割いて解説されています。

メインカラー、ベースカラー、アクセントカラーの割合でサイトのデザインをどう見せるかなどのウェブデザインに必要な知識を取り入れつつコードの解説をしているので楽しんでサイト制作を学べると感じました。

サイトのレイアウト（カラム）の種類には豊富さはないが、PCサイトからスマホサイトを作るためのレスポンシブデザインにも触れています。

 

画像をかっこよく見せたいサイトに向いているサイト作りの解説をしているので写真・画像を意識したサイトやブログを制作したい人には向いています。

時短でホームページ制作を学びたい人向け【入門から初級】

 

 

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

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

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

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

 

 

 

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

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

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

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

 

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

 

 

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

スマホサイトに力を入れたい人におすすめです。

 

サイトのレイアウト・カラムのいろんなパターンが豊富に紹介されていてデザインにレイアウトにこだわりたい人には面白い本だと思います。

またこの本はレスポンシブデザインで切り替わるレイアウト（カラム）の仕組みを基本的で分かりやすく解説されていました。

サイトを作る上で一番躓きやすい部分を充填して解説していると感じたので過去の自分にも送ってやりたい本です。

 

とても親切だと思ったのがブレイクポイント（サイトの幅でサイトのデザインが変わる幅の位置）でサイトの見え方の切り替えの幅でどのデバイスにどんな見え方になるのかも持っていて、スマホサイズ、タブレットサイズ、PCサイズとデバイスによってサイトのデザインを変える事が開設されているのでユーザーの事を考えたサイト作りができると感じました。

ブログやニュースサイト、またビジネス風のサイトのサンプルレイアウトも載っているのでジャンルが豊富です。

 

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

 

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

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

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

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

 

 

 

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

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

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

 

CSSでできる少し遊び心のあるデザインの方法が細かく乗っているのでちょっとした技術の見せどころを取り入れられます。

グリッドレイアウトについても載っており、かなりかっこいい今風のサイトのレイアウトのサンプルが載っているので一味違うサイトを作りたいならお勧めです。

フロントエンドエンジニアが解説に関わった本であるので、ウェブサイトのデバッグ確認などのWeb業界で働くのであれば必須で使うデベロッパーツールにも触れられていてWeb業界でサイトを作る人の作業の仕方も学べるのはかなり実践的能力が身につきます。

 

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

 

 

 

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

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

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

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

 

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

 

 

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

 

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

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

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

 

[nlink url=”https://abstract-ous.net/life/study-programming”]

 

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

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

 

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

 

[nlink url=”https://abstract-ous.net/life/no-skill-fe”]

 

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

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

 

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