HTML&CSSを1ヶ月で習得するための無料の勉強法とは

 

まず初めに

 

プログラミングの勉強ってまず何から始めていいか分からない・・・

一般的なサイトを作るために必要なマークアップ言語のHTMLとCSS。このブログの見た目・レイアウトはHTMLとCSSでできています。(スマホ用のメニューだけはJavascriptという言語だったり、実際動かしているのはPHPという言語です。)

プログラミングに入る前の基本のきでもある、このHTMLとCSSっていうのは習得するだけであれば1ヶ月でできてしまうのではないかと思いました!ですので、その勉強法をいくつか紹介したいなと思います!お前学校いってんじゃんって思った方、行く前にHTMLとCSSだけは独学で勉強してから行きました。またこっちに来てからこうすれば早く習得できるんじゃないかと思ったので、それを踏まえた勉強法です。

以下みなさんのお力になれればと思います!
 

勉強する前に用意しておきたい環境

・ブラウザ(GooglechromeやSafariなど)

 このサイト見ている人は用意する必要はないです。デベロッパーツールが使えるのでおすすめはChromeブラウザです。

・コードを書くためのテキストエディタ

 初心者の方にはSublimetextというのがオススメです。
ダウンロードや使い方はこちら
サクラエディタやmiでも大丈夫です。

5つの勉強法

ddd3dad613828f087d6aaaa8edf03129_s

⑴Progateを使う

⑵ドットインストールを使う

⑶メンターとなる人を見つける

⑷簡単なWebサイトをコピーしまくる

⑸デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す

 

⑴⑵は両方やって欲しいのが本音ですが、どちらかだけでも大丈夫です。
⑶はできたら見つけて欲しいなと思います。つまずいたときに役に立ってくれます。

あとは⑷⑸を利用して、技術をものにしていきましょう!
 

⑴Progateを使う

スクリーンショット 2015-08-03 17.26.51

一番おすすめしたいのが

Progate

という学習用のwebサービスです。
Progateというのは、ゲーム感覚でHTMLやCSSといったプログラミング言語を身につけることができます。
 

スクリーンショット 2015-08-03 17.32.44

HTML&CSS基礎編、応用編とあるのですが、どちらもクリアしていくにつれ徐々にサイトができあがってくのでとても満足感があります。あっ!いつのまにかwebサイトができていたなんてことになります。

個人的にレベルが上がっていく感じも好きです!
  
スクリーンショット 2015-08-03 17.32.10

スクリーンショット 2015-08-03 17.33.47

実際の勉強画面がこんな感じになっています。

 

⑵ドットインストールを使う

スクリーンショット 2015-08-03 17.15.11

プログラミン言語やサイト作成、アプリ開発を勉強するための動画サイト

ドットインストール

実際の画面での操作状況を動画で見ることができます。レッスンが細切れになっていたり、一回一回が短いので飽きずに続けることができます。
  

スクリーンショット 2015-08-03 17.18.41

ドットインストールを使ったおすすめの勉強法は、画面を2分割して左側でドットインストールを見ながら、右側のエディタで同じように打って、実際どう映るのか自分自身で試すことです。

 

⑶メンターとなる人を見つける

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

上記の二つや実際に本を読みながら勉強することも重要なのですが、もうすでにプログラミングができてメンターとなる人が身近にいるとなおさらいいと思います。

なぜならつまずいたり、わからなくなったりした場合、原因を見つけるのが難しいのがプログラミングです。そういったときに身近に質問できる人がいれば、すぐ解決できる場合もあるのでおすすめです。

 

⑷簡単なWebサイトをコピーしまくる

上記で基本を身につけたら、後はもう実践して力をつけていくだけです。だらだら概念だけを勉強し続けても実際に作れなければ意味がありません。なので簡単なサイトからコピーしていくのがいいと思います。

じゃあどうやってそういう参考サイトを見つけるのってことなのですが、いい感じのサイトが集まったwebサイトがあります。

 
HTML&CSSを1ヶ月で習得するための無料の勉強法とは

bookma!

このサイトは世界のイケてるサイトを集めたサイトです。色指定でサイトを選ぶことができます。下のイケサイよりもおしゃれなサイトが多いなと個人的に思います。

  

HTML&CSSを1ヶ月で習得するための無料の勉強法とは

イケサイ

イケサイは日本のサイトをメインに紹介しています。ここのいいところはサイトを種類別に見ることができること、コーポレートサイトや通販サイトなどといいうように、種類別にサイトを検索することができます。

  

スクリーンショット 2015-08-03 17.02.01

ランディングページ集めました。

ランディングページという1ページだけでできたサイトを集めたサイトです。真似するのが比較的簡単でハードルが低いので初心者さんにはおすすめのサイトです。

 

イケてるサイトを集めているので、構造が難しかったり動いたりするサイトがあります。できるだけ簡単なサイトから取り組んでいった方が達成感もあるし、途中で挫折しにくいと思います。自分でいいなと思ったサイトを選んで真似してみてください!

 

デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す

わからなくなったらデベロッパーツールとHTML&CSS辞典があればなんとか対処することもできます。

スクリーンショット 2015-08-03 17.06.47

デベロッパーツールとは

Googlechromeについてる、どんなCSSで書かれているか見ることができるものです。
反映がうまくされない部分をデベロッパーツールで押すと、そこがどんな風に書かれているのかを見ることができます。

 

HTML、CSSリファレンス

またこのタグなんだっけとか、行間を指定するタグなんだっけというのにはHTML、CSSリファレンスがオススメです。タグの説明やタグを探すことができる辞典みたいなものです。どういうCSSを書けばいいのかが一目でわかります。

 

最後にひとつだけ

上記の方法であれば独学で無料で勉強できるのですが、一つだけ注意点があります。プログラミング言語は時の流れが速かったりトレンドが急に変わったりします。実際にHTMLでも今はHTML5が主流ですが、昔はXHTMLといったものもありました。疑問点が出て探す時や本を買うときは、いつ発表されたものなのかというのも念頭に置いておいてください。今は違うなんてことがたまにあります。

上記の点をふまえて是非HTML&CSSの勉強を頑張ってみてください!

 
 

私自身数ヶ月前にプログラミングやコーディングを始めた初心者にすぎません。いろいろと間違いがあるかもしれないので、見つけた!って方はお問い合わせで一報下さると助かります。

 

セブ島生活残り一ヶ月でしたい10のリスト

 
セブ島生活も5ヶ月目に突入しました!と同時に残り一ヶ月のセブ生活となりました。

割とインドア派なのですが、後一ヶ月でこれはやってみたいなーってのを書き留めておきたいと思います。
  

1. オスロブでジンベイザメと泳ぐ

Swimming in the sea at Oslob with Whale sharks.(こういうの好きです)8月末に行きます!

2. トップスで綺麗な夜景を見る

Watching a night view at Tops.(こういうのも好き)8/21達成

3. フィルポータルの記事を後10個書く

Writing ten articles about cebu.(セブいいとこたくさんありますよん)

4. web案件できたら最低後1つは携わる

Making at least one website.(働くの大好き)無事いただけました!8/5完了

5. セブにいる色んな人とご飯に行く

Going to lunch or dinner with some people.
(最近全然です、誘えないので誘ってください笑)初対面の人とごはんやお茶に行く機会が数回ありました!十分です。ありがとうございました^^

6. webAPIを使ったwebサービスを実装する

Making a web service using webAPI.(いいの思いついた)

7. バロット(フィリピンのゲテモノ食べ物)を食べる

Eating a bault.(記念に。)

8. サンミゲルたくさん飲む

Drinking a lot of Sanmiguel beer.(セブ来てビール好きになりました)飲んでる!!!

9. カルボンかコロン(現地の)マーケットに行く

Going to Calbon or Colon market.(現地感溢れることあんましてない)8/1完了

10. ヒルトゥガン島かボホール島のチョコレートヒルに行く

Going to Hiltungan island or Bohol island.(観光も)

  
さほどやりたいことがないのに気づいて絞りだすのに苦労しました。10個全ては難しいかもしれないけど、やれるだけやりたいなと思います。セブいるんならここ行っとけよ!とかここおすすめだよ!ってとこあれば教えて下さい( ´ ▽ ` )ノ

残り1ヶ月楽しみます。
 

初めてのwebサイト案件

 

たまには頑張ったぜアピールでもしてもいいですか!笑
 
webサイト案件を手伝わせてもらっていて、初めてお給料がもらえるプログラマー(コーダー)らしい仕事をしました!本当はこんな案件って載せたいんですけど、さすがに無理なので全部終わってクライアントの許可がおりたら載せたいなと思います!

 
内容はというと
11ページ2カラムのサイト。
やたらfloat。
やたらテーブルタグ。
やたら余白。
 

でもやっぱコーディングしてる時は時間過ぎるのが早いし、HTML打ってからCSSで整えてデザイン通りになるのが楽しかったです。

 

チームのプログラマーの方がお問い合わせフォームやら検索機能やらを頑張っていて、早くそこまでできる人間になりたいなー同じ話したいなーとじわじわ感じます。

 
とりあえず今勉強しているPHPと向き合います。
PHPはハテナマークがたくさん飛び交って大変ですが闘います。

 

3ヶ月半で学んだ勉強・習得したweb関連のこと

 
セブに来て3ヶ月半以上が経ちました。風邪を引いたと同時にやる気もなぜかなくなり、双方ようやく治りました!

 

この前書いた記事「2ヶ月半で学んだ勉強・習得したweb関連のこと」の続編です。現状把握と今後のための備忘録です。

 

各現状まとめ

 

プログラミング関連の状況

 
・HTML(5)とCSS(3)・・・精度があがってきた(気がする)
・JQuery・・・プラグインとコピペでどうにかいけるんじゃないかと思い始めたあかんあかん。書けることは書ける。
・Javascript・・・個人的にドットインストールで勉強中。ハイブリッドアプリを作ってみたい。
・PHP・・・補習授業でがっつり。フレームワークを使ってログイン付き掲示板を作れるようになる過程。ドットインストールも並行しながら勉強中。

 

デザイン関連の状況

 
・Photoshop・・・仕事でバナー作ったり。画像修正したり。効果的な操作方法みたいなの習得したい。
・Illustrator・・・一旦放置なう。

 

今後の目標・やること

 

技術面の目標

・HTMLとCSS…案件や仕事を通して精度を高める。ツールを使って自分のコーディングの癖などを直していく。
・Javascript…サクサク打ちたい。サクサク。
・PHP…講師の目標ではフレームワークを使ってログイン付き掲示板を作れるようになってから、外部APIを使って作りたい仮のサービスを作ってく。うん作りたい。できたらセブにいる間に。

アプリ開発、Rubyに関しては一旦放置。とりあえずPHP(開発環境LAMP)を使ってwebサービスを作れるようになるまでいざ精進。全然まだまだなので、既存で使える言語の精度をあげることに集中したいなと思います。

 

デザイン関連の目標

サイトデザインやバナー作成などさせてもらっているので、デザイン力をあげていきたいので、勉強法を模索・考え実行に移していきたいなと思う。

 

仕事での目標

学習の山場を越えて、PHP以外はもう実践になってくるので責任持って少ない時間で高品質のものを作っていきたい。

 

まとめ

コーディングは並行で続けつつ、PHPでサービス開発を学びつつ、独学でJavascriptというような感じです。最近は偶然画像加工関連仕事をもらったりでそんながっつりプログラミングってわけでもないので、もっとがつがつやりたいなと思います。

帰ってからのこともそろそろ考え始めたいなと思います。うんなんかまとまりないです、以上。

 
 

Web制作チーム発動!サイト完成しました!

 

スクリーンショット 2015-07-18 0.02.34

以前の記事で、Web制作チームができてここから案件を営業かけてやっていくって感じなのですが、自分たちのサイトも作りました!

コーディング担当でした。13インチ以上で見たらあかんことになってるとか、画像が重すぎる(パンダするの忘れましたごめんなさい)とか色々不備ありまくりなのですが、作ったら誰かに見せたいのが人間の本望なので、URL載せます。修正は後々かけていきます。

 
制作チーム「MAGDAGDAG」のサイトはこちら
 

webデザインの先輩の方々、指摘たくさん下さい!!!

 

こっち(セブ)にいる間に案件1、2個は携われたらなと思います。ちょっとサイト作って欲しいなーなんて思ってる方、割と格安で作れると思うので、是非お手伝いさせてください!!連絡お待ちしております!

あ、お問いあわせフォームがまだ繋がっていないので、私のサイトから連絡いただけると助かります。(すみません)

 

そろそろWORKSも更新します!

身体は資本ですねって話

 

アイキャッチ画像は京都今出川付近の樹々丸という古民家風の和食屋さんです。定食がとても美味しいので、今出川、同志社にお越しの際は是非。笑

 

もっと更新の速度を上げようと思っていたのですが、この5日間まるっと風邪にて寝込みつつコーディングをしておりました。(いやほぼ寝てました。)

 

体は資本だなと本当に思います。
 

高校時代は3年間皆勤賞をとるぐらい健康体だったのですが、(勉強に遅れたくないから行ってたも同然だったのですが)大学に入ってから見事に3ヶ月に一回ぐらいのペースでドカンと体調を崩すようになりました。多分親の作るごはんと適度な運動がないからなのかなと思います。

 

ずっと前に読んだ記事で

体は資本、体調を崩すたびに人間の体力の幅は減る

っていう言葉を見て、間違いないと。

 

体調を崩す度にどんどん体力とか免疫力の幅が減っていっている気がします。気をつけないと。

この国には、食物繊維(ごぼうとか)とか発酵食品(味噌、豆腐)、鉄分が取れるひじきほうれん草もなかったり、あっても高かったり。大好きな食べ物たちですが、日本人の長生きに貢献してるんちゃうのと心の中で思っています。

 

そろそろ日本食が恋しいので、いつもの定食屋に行こうかなと思います。だいたい焼き魚定食。今回は鯖かな〜。

 

【トップ固定】フィリピン・セブ島でのIT留学に関する記事まとめ

 

後々記事が増えてきて見にくくなるなと思ったのと、カテゴリーだと更新日時での順番になって見にくいため、一覧を作ることにしました。随時更新していく予定です。(リンクが付いていないものはまだ未更新です。)

 

記事一覧

● インターネットにはまったきっかけ⑴
● インターネットにはまったきっかけ⑵
● 私が留学しようと思った理由
● ACTHOUSEの留学プログラムを選んだ理由
● ACTHOUSEは実際どんな感じか
● 1週間を通しての日常
● 1ヶ月半で勉強・習得したweb関連のこと
● 2ヶ月半で勉強・習得したweb関連のこと
● 3ヶ月半で勉強・習得したweb関連のこと
● 5ヶ月で勉強・習得したweb関連のこと
● 実際英会話はどうだったか、英語に関して
● 留学を終えて
今後について

他にも思いついたら更新していきます!
 

久々にコーディングしながら思ったこと

 

同じ留学のメンバーと講師スタッフで、制作チームをつくるため、その制作チームサイトのコーディングを今日していました。

コーディングしながら思ったこと。

⑴コーディングはちょくちょくしていないと忘れる
⑵開発の方もやっぱり面白そうだなってこと

 

⑴コーディングはちょくちょくしていないと忘れる


今回このような1カラムのサイトでスティッキヘッダーとかスライドショーなどの動きをつけるって感じで、とりあえずHTMLとCSSはできたのですが、その過程でもfloatにハマったり、paddingがとか、センターにどう持ってこようとかやっぱりちょくちょく忘れていました。
どれだけ座学で習っても、忘れることは忘れるし、やっぱり手を動かして色んなサイトコピーしまくるのが大切ですね。

 

⑵開発の方もやっぱり面白そうだなってこと

今同時にPHPとかサーバサイドのことも教えてもらっているのですが、上記のような静的なサイトだと、何か情報やメッセージを伝えたり、サービスや会社のことを知ってもらうことができてもユーザーを巻き込むってことはこれではやりにくいなと。コミュニティサイトであったり、掲示板であったり、通販サイトであったり、勉強サイトであったりはユーザーを巻き込んでアクションができるのが面白いなと思いました。だからもっともっとそっち側のことも吸収しよう勉強しようと思います。

 

週末はJavascriptとJQuery漬けです。忘れつつもあるというか、Javascriptは全然なので調べつつ教えてもらいつつ、メモもしつつ、実装していきます。コーディングはイライラもするけどやっぱり楽しいです。
 
ライターをしているフィリピンのポータルサイト「Phil Potal」の記事も更新できたらと思います。最近記事の影響かはわからないけど行きつけのカフェに日本人が増えて嬉しいような悲しいような妙な気分です。笑

当たり前が通用しない世界

 
日本と1時間時差があるフィリピンセブ島です。
 

今日英会話の授業の時のトピックが「great invention(優れた発明)」でした。そこで、洗濯機の話になったんですよ。そしたら先生、
 

だいたいのフィリピン人は洗濯機使わないで素手で洗うよって。

 
「ありえない。嘘でしょ〜〜〜!!!」
 

どうやら本当らしいです。
 

めんどくさがりやなので、将来絶対乾燥機付き洗濯機を買おうと思っていた矢先。(皿洗いの次に洗濯ものを干すのがめんどくさい。)

「だって洗濯機使ったらテレビ見ることできるし、facebook(フィリピン人大好き)もできるし、コーヒー飲む時間だってできるよ、時間短縮じゃん!」と言っても納得してくれない。手洗いの方が汚れがよく落ちると。どのくらいかかるのって聞いたら週末3〜4時間。あげくドレスやユニフォームは実家に帰って親に洗ってもらうんだと。
 

「Time is limited.」って言ったら笑われました。

 

どれだけ勧めてもどれだけ理屈を言っても納得してくれなくて、あげく日本人は最新機械好き〜なんて言われていやいやいや違うと。

なんでだろう、便利なのに、節約した時間でいろいろできるのに、謎めくフィリピン人。日本人の当たり前が通用しない世界。フィリピン人ってあんまり節約とか短縮の概念ないかもと。

 
今までも日本と違うって思ったところはたくさんあったけど、今回は全然腑に落ちませんでした。

 

phillipino

写真は関係ないのですが、ITパークのMINISTOPの名物店員。めっちゃ元気、めっちゃ話しかけてくる。セブのミニストップは、チキンとごはん60pesoとソフトクリーム15pesoがとてお美味しいです。ぜひ。

【PHP学び始めました】〜1.PHPとは / 開発環境〜

 
留学のカリキュラムで一通り終わって、その中でPHPやJavascriptも概念だけはざっくり習ったのですが、エンジニアになるためにはサーバサイドの言語も習得しなくちゃあかんと思ったので、講師の人にお願いして習い始めました!
 

PHPとは

PHPは動的にサイトを作るためのサーバサイドのプログラミング言語です。サーバサイド???動的???じゃわかりづらいですよね。

サーバサイド

HTMLファイルやCSSファイルを保存してあるWebサーバのことで、サーバでは「ユーザがリクエストしたことに対してデータを返す」ということを行っています。(参照:PHPとは?Web業界で働きたいプログラミング初心者のためのエンジニア基礎入門)PHPを使ったブログだと、記事のタイトルをクリックしたと同時に記事のページをPHPの命令が持ってきてくれるという感じになります。

動的ページ

動的なページとは簡単に言うとその場で作られたページのこと、つまりユーザーからリクエストがあってから初めてページを作り表示するページのことを指します。(参照:http://genxbeats.com/post/id/static-page-vs-dynamic-page)

PHPを使うと何ができるの?

ログインの機能をもったWebサービスやブログのようなサービスを作ることができるものです。WordPressというブログで有名なサービスもPHPを使っていたり、YAHOO!もPHPを使っています。似た言語にPerl、Python
Java、Rubyなどがあります。こういった言語がなければTwitterやfacebookを私たちが使うことはできないのです。

PHPはかなり幅広く使われていて人気なのですが、最近はRubyもベンチャー企業を中心に人気です。クックパッドはRubyを使って開発されています。

 

PHPの開発環境

今回私はPHPを勉強するために、VirtualBoxを使って仮想サーバ(パソコンの中にもう一個パソコンがある状態)を設定し、開発環境は勧められたままにLAMPにしました。

L:Linux…プログラムとパソコンがどう連携して動くかという『基礎部分』のソフトのこと
A:Apache…Webサーバ用アプリケーションソフト
M:Mysql…データベースを管理してくれるアプリケーションソフト
P:PHP(Perl,Python)

他にもいろいろな開発環境があるらしいです。

 

講義をしてもらった後に早速課題が出ました。
課題:入力フォームから送られた値$_GET[‘input’]をurlエンコードして表示させよ
* ヒント:urlencodeを$encode_strに格納、表示させる
* urlencode:http://php.net/manual/ja/function.urlencode.php

 

…..すっかり忘れてたので、ドットインストールで出直してきます。
(まだまだ初心者なので間違いの記述等あれば、お問い合わせから教えてもらえると助かります!)