【仕事】HTML&CSSとWebデザインが1冊できちんと身につく本【スキル】

前回のブログで、『文系でもプログラミング副業で月10万円を稼ぐ!』を紹介しました。

まったく何も知らない人がプログラミングを学ぶのに、Webサイトの構築は実際にすぐ目にすることができてわかりやすいため、基礎を勉強するために打ってつけの本と思い紹介しました。

実際にやってみた、という方はたぶんできたと思いますが、人によってはもう少し詳しいことがわかるようになりたい!と思った方もいたのではないでしょうか。

今回はもう少しレベルの高いことをやってみたいという方に向けての本を紹介したいと思います。

特にHTMLとCSSを学び、いくつかのパターンのWebサイトも作ってみたい・・・という方に向けての記事になります。

本のタイトルは『HTML&CSSとWebデザインが1冊できちんと身につく本』です。

もう・・・タイトルが・・・そのまんまですね。

本記事の内容
・本の紹介
・実際にどのような知識とスキルが得られるのか
・どうしたらよいか?

■本の紹介

この本は一言でどのような本かと言うと、
・HTMLとCSSを学びたい方を対象
・実際のWebページを制作
・4つのレイアウトを制作
・難解なfloatについて詳しく解説
といった特徴があります。

基礎的なWebサイトとデザインの解説から始まり、サイト制作の準備、基本的なHTMLの知識解説、基本的なCSSの知識解説、そして4つのWebページのレイアウトを実際に作っていき、最終的にはレスポンシブデザインまで学ぶ、という流れになっています。

まさにステップバイステップで学んでいく感じです。

通常の入門書のような機能の解説がひたすら続くような本の構成になっていません。

実際に手を動かして一つ一つのWebページを作成していく構成になっていて、最終的にはそのまま自分のホームページにできるようなWebサイトができあがります。

これはとても良い構成だと思います。
どうしても入門書的な本だとサンプルプログラムなどを作成することもあるのですが、それがそのまま実用的にものかと言われるとなかなかそういった類のものはないのが現状です。

後ほど、私が実際に手を動かして本に沿って作成したWebサイトを載せておきますが、見ていただければ私が言っていることが納得してもらえると思います。

ただ、一点だけ言っておきたいことがあります。

この本に書かれていることを一度にすべて完璧に理解し覚えることはできません。

私自身もすべてを完璧に理解して覚えることはできていません。

でも大切なことは、本に書かれていることを実際にちゃんと自分でやってみて、Webサイトができあがるという体験です。

知識として得ただけでは意味がありません。
ちゃんと自分の手を動かして、見よう見まねで構わないので作ってみることです。
ちなみにコピペはダメですよ。

この本に書かれている内容はダウンロードすることができますので、それをそのまま持ってきて動いた!動いた!と喜んではいけません。

ちゃんと自分が一文字一文字打ち込んでページを作ってください。

当然わからないことや壁にぶつかると思いますが、その時にはダウンロードしたプログラムと自分の打ち込んだプログラムを見比べて、何が原因だったのかを探っていって解決していってください。

ダウンロードしたプログラムは、バグ(プログラムの不具合の元)つぶしに使うのは良いです。

本の構成は以下のようになっています。

Chapter1 知っておきたサイトとデザインのきほん知識
Chapter2 サイト制作の前に準備しておくこと
Chapter3 知っておきたいHTMLのきほんと書き方
Chapter4 知っておきたいCSSのきほんと書き方
Chapter5 フルスクリーンページを制作する
Chapter6 シングルカラムページを制作する
Chapter7 2カラムページを制作する
Chapter8 グリッドレイアウトページの制作と動画の埋め込み
Chapter9 問い合わせページを制作する
Chapter10 マルチデバイス対応ページを制作する

■実際にどのような知識とスキルが得られるのか

この本を通して得られる知識とスキルは以下のようなものです。
1.WebサイトとWebデザインの基礎知識
2.Webサイトに必要な制作環境
3.HTML(HyperText Markup Language)とCSS(Cascading Style Sheets)の基礎知識
4.4つのレイアウト(フルスクリーン、シングルカラム、2カラム、グリッドレイアウト)
5.問い合わせページ
6.マルチデバイス対応

この本のメインは4~6の実際のWebサイトの各Webページの制作です。

制作するための事前知識として1~3があります。

最後にある6のマルチデバイス対応は、パソコンで見る場合だけでなく、タブレットやスマートフォンで見る時のレイアウトの対応についてのものです。

今ではスマホで見る人が多くなってきていますから必須の知識になります。

一言で言うと、実用的なデザインを学ぶことができ、ほとんどのWebサイトのレイアウトを学ぶことができるという本です。

この本も丁寧でわかりやすく書いてあるので、プログラミング初心者であってもできるでしょう。

わからない箇所にぶつかった時は、ダウンロードしたプログラムを見てください。
最悪どうしてもわからなけばダウンロードしたプログラムをそのまま使っても良いかと思います。

最後までたどり着ければ、ほとんどのWebサイトの制作に対応できる基礎は身についたと言えるでしょう。

■どうしたらよいか?

この本の内容をコーディングしたデータもダウンロードすることができます。

ただし、既に述べましたがコピペして完成!は絶対にやらないでください。

一文字ずつ打ち込んでWebサイトを1つずつ制作していきましょう。

エラーや上手くいかないことは、当たり前です。

どんなベテランプログラマーでもエラーやバグを完全になくすことはできません。
ましては初心者の方であれば、つまづきまくっても心配ありません。
それは当たり前ですから。

かくいう私もこの本に沿ってコーディングしていく中で、何度も上手くいかないことがありました。

その都度、本を繰り返し読み、本のコーディング内容と自分の打ち込んだものを何度も見比べたりしながら、完成させていきました。

実際にできあがると、嬉しい気持ちと達成感を味わうことができました。

ちなみにですが、私自身がコーディングした結果です。

このようなページが作成できます。

実際に作成したWebサイト

あきらめずに頑張っていきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です