「HTMLやCSSは覚えるのは簡単だ」という記事を多く見かけますが、実際にやってみると意外にも手こずるものです。

覚えるだけ、ということなら簡単な話ですが、実際に書いて作るという工程まで踏んでみると、最初のうちはしばしば手が止まってしまうこともあるでしょう。
それもそのはずで、実際の現場で働くプロでさえ何度も書き直ししながら最終的なプロダクトまで落とし込んでいるので、触ったばかりの皆さんが難しく思うのも無理はありません。

今回はそんな、HTMLやCSS、jQueryなどを0の状態からどうすれば上達するのかという話をしていきます。
またその他の、実際の現場で使うツールなどの紹介もしていきます。

どうすればスキルが上達するのか

参考書は買ったけど時間がなくてまだ読んでない人、もうすでに勉強を始めている人、もしくは覚えることが多すぎて参考書を破いてしまった人、などなどいるかもしれません。
とりあえず今までのことは忘れ、一度、参考書を机の中にしまってグーグルを開いてみましょう

実際の現場では、何か新しいことを始める時に触りの部分で参考書などを読むことはありますが、ほとんどの事柄は大体グーグル先生に聞いて解決することが多いです。
というのも、確かに参考書は分かりやすく簡潔に書かれていますが、実際の現場で使えるような部分までカバーしているような本はほとんどありません。また、以前から言っているように、技術の移り変わりが激しいのもあり、参考書が出る頃には書かれている内容が古くなってしまっている場合もあります。
そのため、これから始めようと思っている人も、もうすでに諦めかけている人も、一度、参考書をしまって分からないこと・知りたいことをネットで検索して調べるようにしてみましょう。そのような「検索力」を身につけておくことで、現場に入った時でも困らないようになります。

また、中々手を動かせないでいる人は、「基礎からやらなければ」という考えを一度捨てて、実際に自分が作りたいものを思い浮かべて、作ることから始めていきましょう。
自分が分からないこと、知りたいことは、作っていく・調べていくうちに自ずと見えてきます。

私も勉強をし始めた頃は、参考書をずっと眺めるだけで全然上達しませんでしたが、実際にポートフォリオを作り始めてみたら次第に調べる能力がついてきてメキメキと上達していくのがわかりました。
もちろん最初は中々上手く進まないと思いますが、根気強く勉強しながら作っていきましょう。
成長する過程は一次曲線でなく、コツを掴むと急に上達していくものなので、そういったコツを掴めるまでまずは頑張ってみましょう。

ただ、人によっては取っ掛かりが掴めるまで多くの時間が掛かってしまう場合もあるかと思います。
「そもそもそんなレベルじゃないから参考書から教えて!」という人向けに、私が実際に参考にしていたおすすめの技術系記事や参考書を紹介していきます。

スポンサードサーチ

初心者向けのおすすめ技術系記事や参考書

ここでは「何もかも分からない状態」の方向けに、おすすめの技術系記事や参考書を紹介していきます。
また、HTMLやCSS以外にも、実際の現場で使われているツールやサービスなども併せて紹介していきますので、今はまだ「こうゆうの使うんだ〜」ぐらいの認識でいいので今後の学習の参考にしてみてください。

HTMLとCSS

まずHTMLとCSSですが、初学者は「ドットインストール」という動画講義形式の学習サービスがおすすめです。

やはり動画で解説しているので、初学者にとっては取っ掛かりを掴みやすいです。
なおかつ、無料で受講できるのでこちらはぜひ参考にしてみてください。

また、こちらの「ほんっとにはじめてのHTML5とCSS3」というサイトもおすすめです。ディレクターをやっているコーディング初心者の友人は、これを読んで3日ほどで書けるようになりました。ドットインストールを見てみてもよく分からなかったという人は、こちらも併せて読んでみるといいでしょう。

ただし、「ドットインストール」「ほんっとにはじめてのHTML5とCSS3」はあくまでも基礎の基礎という位置付けなので、それだけだとポートフォリオを作るというレベルまでは持っていけないでしょう。

そこでおすすめしたのが、「サイト作りでスキルアップを図る「HTML5/CSS3モダンコーディング」」という参考書です。

サイト作りでスキルアップを図る「HTML5/CSS3モダンコーディング」

こちらの参考書は吉田真麻さんという方が書いていて、以前はグットパッチという会社でフロントエンドエンジニアをやられていました。
私は以前この方の動画講義を見たこともありますが、その中でもちゃんと丁寧に教えてくれていて分かりやすく、しかも「この使い方知りたかった!」というところまでカバーしてくれていました。
この参考書も初学者というよりは少し上の人たちが読むレベルの参考書ですが、このレベルの内容を理解しておけば面接の際にもきっと役立つはずです。

jQuery

次に、jQueryの勉強は「これ一択!」という参考書があります。
それが「jQuery最高の教科書」という参考書です。名前の通り本当に最高です。

jQuery最高の教科書

この本が出た当初、周りにいたフロントエンドのエンジニアは全員読んでいました笑
私もJavaScriptを勉強し始めた当初全然わからなかったのですが、この本を読んでから本当に理解が進むようになりました。

この本はシフトブレインさんという、イケイケの広告を作っている会社が作っています。
何が最高なのかというと、この本を作る際にちゃんと初学者にも分かるように、全くjQueryを知らない新人さんをプロジェクトに参加させて初学者の目線をしっかりと取り入れているところです。
今でこそ私もそこそこ書けるようになりましたが、書き始めた当初って「えっ、そこでつまづくの?!」みたいなところでよく分からなくなったりすることってよくあると思います。
他の参考書ではそういった細かいところまでは触れられてないんですが、この本は実際の初学者の方を交えているだけあって本当にわかりやすいです。

さらに、作って覚えるタイプの参考書になっているので、実際にポートフォリオを作る際にも活用できます。
ぜひこの本は一冊手にとって勉強することをおすすめします。

WordPress

WordPressという名前を一度ぐらいは聞いたことがあるんじゃないでしょうか。
こちらは皆さんの知っている使い方だと、ブログなどを作る際に使う投稿や編集などを管理できるシステムです。簡単な言い方をするとCMSと言われていて、このブログでもWordPressを導入しています。

実際の現場でもWordPressを導入することはよくあって、覚えておくと面接の際にもポイントアップするかもしれません。また、ポートフォリオなどにWordPressを使ってみてもいいかもしれません。

WordPressでおすすめしたいのが高橋のりさんという方が書いている「Webデザインレシピ」というブログです。
ブログでこんなに丁寧に書かれてるのは他に無いっていうぐらい参考になるブログだったのですが、残念なことになぜか今は閉鎖されてしまっているようです。。
ただこの方、ブログで書かれていたことと同じ内容の本も出されているので、こちらを参考にWordPressを使ってみるといいでしょう。

基礎からのWordPress

この「基礎から教えるWordPress」という参考書も、実際に作りながら覚えていく形の本になるので、実践的な内容になっています。
中身が本当に濃いので多少分厚くなってますが、色々参考になると思うので是非読んでみてほしい一冊です。

GitとGithub

最後に「Git」「Github」の話をしていきます。
こちらは現時点では「こうゆうのを使うんだ〜」ぐらいの、参考程度に見てもらえればと思います。

そもそも、「Git」や「Github」とは何か、という話をしていきます。

昔々、まだGitというシステムが存在しないWEB業界では、毎日更新していたHTMLやCSSなどのファイルを、開発サーバー上でディレクトリに「ファイル名_yymmdd」などの日付をつけて管理していました。そして本番アップの日が来たら、最新の日付が付いたファイルを本番サーバーにアップしていました。
しかし、いざアップしたものを本番サイトで確認したら、そこには最新の修正内容は反映されておらず、全然別の修正内容が反映されていました。
実は、今回修正した人以外にも別の修正をしていた人がいて、同じ日付で最新ファイルを上書いてしまって、このような事故が起こりました。

というのが実際の現場でGitが浸透した理由です。実際Git管理していなかったがために起きた事故はたくさんありました。

Gitとは何かというのをまだ言っていませんでしたが、上の文章を見て、感のいい人はだいたいわかったと思います。
そう、Gitとはファイルのバージョンを管理するシステムです。さらにバージョンを見る以外にも「誰が」「いつ」「どのような」修正をしたかを管理できてしまうシステムです。
そしてGithubとは、そのGitで管理されたものを保存したり、公開できたりするサービスのことです。

最近の現場では、GitもしくはSVN(サブバージョン)を導入していない会社は稀だというぐらい、どこの会社も使っているので覚えておいて損はないでしょう。
また、ポートフォリオなどと同じく、転職の際に企業側に提出するソースもGithubなどを通じて見てもらったりするので、できることなら転職前に触れるようにしておいた方がいいでしょう。もちろん個人レベルでは無料で使えます。

詳しい使い方などはこちらの「猿でもわかるGit入門」というサイトがおすすめです。
今はまだGitコマンドなどをそこまで理解する必要もありません。SourceTreeなどのクライアントサービスを使って操作できるレベルでも十分です。

またこちらの「Gitが、おもしろいほどわかる基本の使い方33」という参考書は、そういったSourceTreeなどを実際に使って解説している参考書なのでおすすめです。併せて読んでみてもいいかもしれません。

Gitが、おもしろいほどわかる基本の使い方33