酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

HTML/CSS/JavaScript 初歩の初歩

最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。

(11-09 12:45) Progate, atomを追加


Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

導入編

Webサイトを作ることは楽しい!

スクリーンショット 2014-05-04 7.29.51

プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに
プログラミング経験0のデザイナさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。

今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられる方法だと思っています!

今できることの範囲内で、作りたいWebサイトは?

今知っている知識、今できることの範囲内でできるWebサイトを考えてみてください。大切なことは最大でも4-5時間あれば十分できてしまう作業量の範囲内にすること。1日を超えてしまうとモチベーションが下がったり、難易度が高すぎて途中で挫折してしまう可能性がありもったいないです。

おすすめテキストエディタ

Atom
GitHub社がオープンソースで開発しているエディタ、Mac、Windowsに対応していてパッケージのインストールなどが楽ちん。

Sublime Text2
多くのプログラマーが好んで使っている、おすすめのテキスト・エディターです。WindowsもMacにも対応しています。ダウンロードして評価する場合は無料です。継続して使う場合はシェアウェアとなります。

HTML

HTMLとは、インターネット・エクスプローラ(IE)やクローム(Chrome)などのブラウザにわかりやすい文章のこと。

HTMLの基本テクニック
HTMLの要点中の要点が書かれています。最低限ここを見ておくだけで最低限のHTMLは書けるようになります。

HTML入門 (全16回) | ドットインストール
HTMLについてわかりやすく解説した動画(約3分)が全16回あります。最初から全部を覚えようとしたり、真似して書く必要はありません。タイトルを見ながら、興味が有るところや作りたいことに関係しそうなところをつまみ食いしてみてください。

CSS

HTMLが、ブラウザが解釈しやすい文章。CSSはその文章の飾りや体裁を整えるための言語。

初級 CSS 解説{初心者向けの、ごく簡単な、スタイルシート の使い方の説明です。}
HTMLとCSSを使う方法が書かれています。もし分かりづらければコメントください!

CSS3入門 (全19回) | ドットインストール
CSSについてわかりやすく解説した動画(約3分)が全19回あります。最初からすべてを理解する必要は全然無いです。自分の興味があるタイトルや内容があればちょっと見てみるくらいがオススメです。

JavaScript

HTMLが文章構造、CSSがデザイン、Javascriptは主にブラウザ側での「動き」を表現するための言語。

JavaScriptではじめるプログラミング超初心者講座
Javascriptはすごく奥が深いので、まずはここを見てこんなことができるだなってイメージを持ってもらえれば十分です。

JavaScript入門 (全24回) | ドットインストール
JavaScriptについてわかりやすく解説した動画(約3分)が全16回あります。ブラウザの中で動くものを作りたいと思ったら、ちょっと覗いてみてください。自分のやりたことにマッチするタイトルの動画があればちょっと見てみるくらいで十分です。

プログラムを学ぶことの意義

Facebook元役員「プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。」
かなりインパクトの有るタイトルですが、内容はプログラムを学ぶことがどんな未来につながるか、海外では今どんなことが起こっているかを俯瞰的に理解できる素晴らしい記事です!


ここからは参考リンク

書きながら覚えるHTML/CSS/Javascript

Progate
Hackathon Houseによく来ていた学生さんが中心になって開発をしているサービス。 Webサービスを作り出すことを体系的に学ぶ事ができる。日本人が躓きやすいポイントをしっかりとフォローしてます!

CODEPREP
オンラインでプログラミングを書きながら覚えることができます。HTML5、CSS、Javascriptを基礎から応用まで勉強できます!

Codecademy
日本語と英語がまじってはいますが、CODEPREPと同じく、オンラインでブラウザ上でプログラムを覚える事が出来る仕組みです。

CSSをより使いこなす

CSS基礎文法最速マスター
CSSの要点が詰まっている。やや中級者向けの内容なので、わからなければ読み飛ばしてください。

Javascriptをより使いこなす

JavaScript基礎文法最速マスター
中級者向けの内容ですが、知っておくと後からの理解が早まりそうな内容です。ちょっとJavaScriptを触ってから読み直すと、理解が深まるかも。

Qiitaでアウトプット

Qiita
僕は未来の自分が困らないようにブログを書いています。そうすることで、次に同じことをやるときに効率的に作業ができるようになりました。またこのアウトプットを続けたことで、ブログ経由でいろいろな出会いを得られたり、転職ができたりしました。

Mac限定ですが、QiitaはKobitoというMacアプリがあり、メモを気軽に公開できます。Macな人で自分でブログを始める前の練習でQiitaにアップするのはすごくいい方法だと思います!

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

お願い事項

このやり方は賛否両論あると思いますが、僕が個人的に試行錯誤を重ねた経験や沢山の人からアドバイスをもらった結果の仮説です。未完成な仮説をネットにアップすることは申し訳ないと思いつつも、シェアすることでより良くなると信じています。もしもっといい方法があればぜひコメントお願いします!

Special Thanks

Sublime Textの料金体系について勘違いしていました。『@economixmeister』さん、ありがとうございます!

短期間でプログラミング言語を覚えるのに役に立ちそうなサイトまとめ

デザイナがエンジニアリング(プログラム)を学ぶコツ

変更来歴

(04/27 16:50) 書きながら覚えるHTML/CSS/Javascriptを追加
(05-04 07:50) Webサイトを作ることは楽しい!を追加
(11-09 12:45) Progate, atomを追加

おすすめの書籍