HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

スポンサードリンク

f:id:shiromatakumi:20151112123014p:plain

HTML・CSS・JavaScriptを独学するにはこの本たち!!

WEBサイトを制作したり、ブログのカスタマイズをしたりするために学ばなくてはいけないのが、HTML・CSS。そして、複雑な動きを付けるために必須なのがJavaScriptです。

 

これらの情報はネット上にたくさん転がっていますが、その多くは断片的なものばかりです。知識をしっかり身につけたいのなら、ある程度参考書を買って学習するのが効率的です。

 

HTML・CSS・JavaScriptを独学で勉強するには、

参考書で学習→ネットの情報で補完

というフローが良いかと思います。私はそのように学んでいます。

 

今回は、独学でコーディングスキルを磨きたい人におすすめの参考書を紹介していこうと思います。

当記事は以下のような人におすすめです。

  • HTML・CSS・JavaSctipの勉強を始めたけど、どうやって学べばいいのか分からない
  • WEBデザイナーやフロントエンドエンジニアなど、WEBに関わる仕事をしたい
  • ブログのカスタマイズを自力でできるようになりたい

私自身がWEBデザイナーという職業なので、WEBデザイナー寄りの記事になっています。フロントエンドの人からすると、えっ?と思うことが多々あるかもしれません。その点はご了承下さい。

この記事の基礎になるのは、「楽しく学ぶ」「楽しく学べる参考書」です。分厚いリファレンス買って撃沈するくらいなら、楽しくやろうぜ!?

 

HTML・CSSを勉強するのにおすすめの参考書

かなり基本的な内容から、知っておくと便利なTipsまで紹介されたオススメの一冊。始めてWEBデザインを学ぶならコレ。

ある程度コーディングに慣れた人でも、知らないような情報が載ってたりするので初心者でなくても読んでおいていいかもしれません。

 

HTML・CSSを一から勉強するには、この書籍が超おすすめです。本当に基礎の基礎からスタートして、レスポンシブデザインや頻繁に使うTipsを網羅しているので、非常に勉強になります。

ただ知識を得るだけではなく、WEBサイトを作る楽しさもこの本で知ることができるので、まだ読んでいないコーディング初心者は必ず読んでおいて欲しい一冊です。

初心者の頃、この本を3回くらい通して学習しました。

 

上の二つの参考書をしっかり練習するだけでも、かなり力がつくと思います。細かいタグの意味を知るために、

↑のようなサイトを見るか、

 

↑のようなリファレンスを手元に置いておくのが良いでしょう。

 

お次はCSS設計

初心者には難しい内容になっていますが、ある程度CSSが書けるようになった人にはかなりおすすめの一冊です。

後から修正しやすいCSSの書き方、命名規則、などCSSをもっと掘り下げて学べてレベルアップできます。

 

 

この1冊でカッコイイWEBサイトが作れるぜ!

最初の二冊よりも少し難易度は上がりますが、WEBサイトでのアニメーションやワンランク上のカッコイイデザインに仕上げるためのテクニックが紹介されています。

ただ単にコンテンツを表示させるだけでなく、WEBサイトを訪れた閲覧者に強い印象を与えるためにも、この本で紹介されているテクニックを使ってみると良いと思います。

 

HTML・CSSを勉強する際に意識しておくべきこと

コーディング初心者は、文章や画像などの要素を意図したポジションに配置し、意図したサイズにできるようになりましょう。

初心者が苦戦するのが、「画像が中央に配置できない」「高さを指定したのに反映されない」「文章が思わぬ位置に表示される」あたりではないでしょうか。

1カラム、2カラム、3カラムの組み方、floatやclearfixの使い方、positionの意味、displayの違い、これらを知ってレイアウトできるようになりましょう。カッコイイデザインはそれができてからですね。

 

スポンサーリンク

 

JavaScript(jQuery)について

参考書を紹介する前にJavaScript、そしてJavaScriptのライブラリ「jQuery」について少し説明しておきます。

JavaScriptを使うとWEBサイトに複雑な動きをつけることができます。CSSでもある程度の動きは表現できますが、それでもできることに限りがあり、JavaScriptの方がより多くのことができます。

また、動きを表現するにとどまらず、計算やフォームに入力された値を利用するなどプログラミングっぽいこともできます。様々なWEBサイト・WEBサービスが提供するAPIを利用して情報を取得することもできます。

JavaScriptを学んでおけば、WEB上でできることが格段に増えるのです。

jQueryって何?

jQueryというのはJavaScriptをもっと簡単に、楽に使えるために開発されたもので、いわゆるライブラリと呼ばれているやつです。

コーディング入門者にとって、生のJavaSctipというのは少し敷居が高くなってしまいますが、jQueryは導入も簡単、コードも分かりやすいので入門にはとてもおすすめです。

プラグインが豊富にあるのもjQueryの魅力ですね。

ただ、jQueryには読み込み速度が遅くなるなどのデメリットがあり、「jQueryはオワコン」としばしば言われています。

とは言え、WEBサイトを巡回していると多くのサイトではまだまだjQueryが使われているようです。コーディング初心者がWEBサイト制作の楽しさ、JavaScriptで何ができるのかをざっくりと知るには勉強しておいて絶対に損はありません。

 

JavaScript(jQuery)の勉強におすすめの参考書

JavaScriptの入門書はたくさんあるのですが、私はこの本を参考に勉強しました。深い所まで掘り下げる訳ではなく、ざっくりと学ぶ感じです。

最初から分厚いリファレンスを買ってもほとんどの人は挫折してしまうと思うので、ざっくりで良いと思うんですよね。

ただ、少しコードが古く、今では非推奨の「bind」が使われていたりします。ですので、次に紹介する参考書も併せて読んで欲しいです

 

jQueryを勉強するにはこの本が一番だと思います。簡単なコードからかなり複雑なコードまで学ぶことができます。また、プラグインを使ったり、ちょっとしたTipsも多く紹介されていたりと、一気に上達できる1冊です。

WEB制作の現場で実際に使われているテクニックが満載なのでかなり実践でも役に立ちます。時間があれば何度も反復してみても良いかと思います。

 

脱初心者したい人におすすめの一冊

私が現在進行形で勉強しているのが、この1冊。WEBデザインで使うようなコードだけでなく、プログラミング言語としてしっかり学習したいなと思い購入しました。

ページ数は少なく割と薄めの本なのですが、詰まってる!楽しい!非プログラマーな私でも、説明が分かりやすく具体的なので頭に入ってきます。

 

ついでに…

 

ちょっと前に書いた記事なのですが、JavaScriptの勉強におすすめのサイトや記事を集めたエントリーもあるのでぜひ読んでください。

JavaScriptの勉強用に使えるサイトや記事(備忘録) - NO TITLE

 

私流の勉強法

HTML・CSS・JavaScriptのおすすめ参考書・入門書を紹介してきましたが、私がコーディング初心者だった頃に実践していた勉強法を最後に書いておきます。

まずは、上で紹介した参考書を使って、本の通りにサイトやページを作ってみます。

そして、ある程度覚えたら、何も見ずにとりあえずオリジナルのWEBサイトを作っていきます。ただ、いきなりオリジナルのサイトを作れと言っても何を作っていいか分からないでしょう。

私は、A8.netとか楽天アフィリエイトなどで見つけた好きな商品を並べたサイトを作ってましたね。何か売れる訳ではないですが、好きな商品のバナー使い放題なので結構はかどりますよ。

んで、分からないことがあったらガンガンググる。ググりまくり。

 

参考書→実践(分からない所はググる)→参考書レベルアップ

 

あと、ブログのカスタマイズとデザインテーマ作るのはマジでおすすめ。多くの人に見てもらえるので、やりがいがあるでしょ。

 

ではでは、今日はこのくらいで。勉強頑張ってください。私も頑張ります。

 

他にもこんな記事書いてます。

超初心者のためのHTML・CSS入門講座

全くの未経験が独学でWEBデザイナーに転職するまで

このブログで作ったあれこれ。ポートフォリオ風にまとめました。

このブログについて - NO TITLE