読者です 読者をやめる 読者になる 読者になる

notitie

日々感じたことをメモ書き

HTMLとCSSを習得したい人はモダンコーディングという本がおすすめ

本-プログラミング

html5とcss3のロゴ画像

 今回は『モダンコーディング』という本が、HTML5とCSS3を学ぶのに分かりやすく、とても役に立ったので紹介したいと思います。

01.もっとHTML5とCSS3を習得したいという人には『モダンコーディング』をおすすめしたい

 

モダンコーディング

▼ HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

 

これから独学でどの本でHTML5とCSS3勉強をしようかとは考えたときに、真っ先に購入した本が『モダンコーディング』でした。なぜなら著者のフロントエンドエンジニアであるよしこさんをTwitterでフォローしていて、個人的に憧れていた人がモダンコーディング本を執筆したからです。ぼくは、この知らせをTwitterで知った時に即購入しました。結論から言うと、この本を買って大正解。

ぼくが考える、この本の一番良い点はカッコいいWEBサイトを実際に手を動かしながらHTML5/CSS3を学べるところです。カッコいいWebサイトを作れるというのはすごく重要で、ぼくは飽き性ということもあり、どんなに説明が分かりやすくても出来上がるWEBサイトがかっこ良くないとやる気がでないのです。

 

02.モダンコーディング本で実際に作る3つのWebページを紹介

本書では以下の3個のWEBページを実際に作りながらHTML5/CSS3を学んでいきます。

リンク先からウェブサイトを確認できます。

1.スタンダードレイアウト

スタンダードレイアウト

 2.グリッドレイアウト

グリッドレイアウト

3.シングルページレイアウト

シングルページレイアウト

どれも見た目はお洒落ですが、特に3つ目のWebサイトはずば抜けてカッコよいです。3つ目のWebサイトではスマートフォンに対応したレスポンシブデザインも学べます。

とにかく作っていて楽しいです。なぜならコードを書いていく内にどんどんかっこ良くなるから。そして本を見ながらではあるけれど、自分の手で実際にカッコいいWebサイトを作り上げている感覚というのはとてもワクワクします。今まで自分でWEBサイトを作ったことはなかったのですが、この本のおかげで簡単な自己紹介サイトを作ることもできました。そういった意味からも、この本にはとても感謝をしています。

 

03.HTMLやCSSを全く触ったことがない人にはあまり向いていないかもしれない

この本に取り掛かる前の僕のレベルは自力でWebサイトを書くことは出来ないけれど、タグの意味や要素は大体見れば理解できているぐらいのものでした。

HTMLとCSSぐらい触ったことがない人でもすぐにできるだろうと思う人がいるかもしれませんが、完全初心者がこの本に取り掛かると分からない事が多くてコードを2,3行書いては調べての繰り返しになってしまい楽しく学べないと思います。自分で分からない箇所を調べることで身につく知識も多いとは思いますが、、、。

 

この本に取り組んでみて、不親切だと思った部分は以下の通り。

1.初歩的なことに関しては説明されていない

先ほども書いた通り、初歩的なことに関しては説明がないので全くの初心者がこの本を取り組むのは少々ハードルが高いかもしれません。HTML/CSSが一体どういうものか分からない人は、まず始めに『ドットインストール』で概要を理解することをおすすめします。無料動画で分かりやすく説明してくれるので、理解の手助けにかなり役立ちます。一通り理解できたら、『Progate(プロゲート)』で実際に手を動かしながらHTML/CSSを学んでみましょう。こちらも無料で学べて手を動かしながら学べるので、動画で得た知識を更に深めることができます。

 

2.完成までの過程におけるイメージ図が少ない

特に初心者からすればコードを書いている途中で、現段階のイメージ図が確認できるだけで安心度が大きく変わると思います。この本にはそういったイメージ図が少なく、もっと増やしてほしいと思いました。 今書いているコードは本当にあっているのかな?と不安に思いながら書くより、定期的に確認できるイメージ図が用意されている方が余計なことを考えずに済むので、もっと楽しめそうです。

 

悪い点だけを言えばモダンコーディング本は総じてあまり親切ではない、と言えるかもしれません。

 

04.HTML/CSSの基礎を学んだ次に読むべき良書だと言える

悪い点も書きましたが、それでもこの本から学んだことはとても多いです。HTML/CSSの基礎の基礎を学んでから、モダンコーディング本に取り組むのはおすすめの方法だと思います。ぼく自身もモダンコーディング本で知らない知識にたくさん出会ったのですが、HTML/CSSの基礎があったので理解が更に深まりましたし、コードを書いていて楽しかったです。

 

それに加えて本書を通じて3つのWebページも制作するわけなので、一通り終えてみると少なからず達成感を感じることができます。こういった小さな達成感は特に最初の頃はとても大事なことだと思います。本を見ながらでもやり遂げた感覚はこれからのモチベーションにもつながるからです。もちろん、この本に取り組む前と比べて成長した実感もあります。

ぼくみたいな初心者でも本書に書かれている所で分からない箇所があれば、Googleで調べながら進めることができました。ググる力(Googleで検索する能力)は重要だと聞いていましたが本当にその通りで、自分の分からない事があればネット上に答えやヒントとなる情報はたくさんあるので、調べたいことを早く見つける力は必要だと感じます。

 

この本をやり終えて思ったのはコーディングすごく楽しい、もっと極めたい、立派なフロントエンドエンジニアになりたいということ。

 

モダンコーディング

▼ HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

  

05.個人的に憧れているフロントエンドエンジニア、よしこさんのポートフォリオが超カッコいい

勝手に紹介します。よしこさんはGoodpatchでフロントエンドエンジニアをされている方。Goodpatchのオフィスが本当にかっこ良すぎてこんな職場で働きたいと誰もが思うはずです。

blog.kushii.net

 

よしこさんのポートフォリオはこちら。

とにかくこのポートフォリオを初めてスマホで見た時、何やこれ〜!と驚いたのを覚えています。スマホとパソコンでは動作がまた異なりますけどどちらもすごいです。ぼくも早く自分の格好良いポートフォリオを作れるようになりたい。

 

関連記事

  1. デザインの引き出しを増やすために使える「Dragdis」がアイデア収集に便利なので紹介する
  2. 海外のデザイン動向をいち早く情報収集したい人は「Muzli」を利用しよう
  3. 「ハマるしかけ」を読んでデザインと心理学に関して学んだこと