プログラミング

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の勉強を頑張ってみてください!

 
 

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

 

初めてのwebサイト案件

 

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

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

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

 

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

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

 

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

 

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

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

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

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

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

 

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

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

 

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

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

 

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

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

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

 

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


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

 

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

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

 

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

【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

 

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

エンジニアって一体何なんだ

 
3ヶ月前までの私の勝手な定義でいうと、エンジニア=Webサービスが作れる人だった。ざっくり。別に間違ってはいない。

でもエンジニアって一概にエンジニアで一括りにできない、webサイトを作れる人、アプリを作れる人、サーバを管理・運用する人、家電のプログラムを開発する人、もっとたくさんの人が全てエンジニアという括りになっていたのでちょっと調べてみた。

母校がいい感じの「IT職種図鑑」なんての出してたので、これを参考にしました!

 

スクリーンショット 2015-07-05 9.16.47

 

これを見ると私が目指しているのは一部のエンジニアのなかのプログラマーってところらしい。職種っていうのをみてもエンジニア>プログラマー?。

リクナビ進学図鑑ってのを見ても、大変な数の職種。
 

今勉強しているはどちらかというとWebデザイナーよりなのでエンジニアまでの道のりは長そうです。

いろいろ調べてもなんかしっくりこないので誰かもっとわかりやすく教えてくれたらな〜と思います。エンジニアになりたいって思ったら、自分が何をエンジニアとして想像しているのかきちんと調べることが大切だと思いました。

2ヶ月半で勉強・習得したweb関連のこと

 
セブに来て2ヶ月半以上が経ちました。

 

この前書いた記事「二兎追うものは一兎も得ず」をふまえて、今自分が何を習得しているのか、今後どうするのかきちんと把握することにしました。

 

各現状まとめ

 

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

 
・HTML(5)とCSS(3)・・・静的webページなら完コピできるくらいになった
・JQuery・・・概念は学んだ。この動作書け等言われたら即対応は微妙。→ 繰り返し書く必要あり(但し、フロントエンドの人はコピペも多いと聞いた。)
・PHP・・・概念オンリー。難しい。がっつり何ヶ月かやらなきゃ身につかない。 → 一旦置いておく。

 

デザイン関連の状況

 
・Photoshop・・・以前少し使っていたこともあり、動作に問題は無い。コマンドキーを使いこなしたり、デザイン性を磨く必要性あり。
・Illustrator・・・使えるけど、ベジ曲線・アンカー不得意。→ 少し練習するが今はそこまで極めない。

 

WordPress

・サーバの登録、ドメイン登録、WordPressとの連携から自作のテーマをテンプレートに落としこむというのを一通りやった。自分のブログを作りながら手探りでやっている状況。

 

今後の目標・やること

 

思うこと

今悩んでいることの一つとして、自分はweb制作会社に入ってwebデザインをやってwebサイトを作りたいのか、企業に入ってエンジニアになってサービスを作りたいのか分からないということ。企業に入ってエンジニアをやるからには、サーバサイドの言語もやらなきゃいけなかったりもする。(フロントエンドエンジニアとかいうのがありますが今の所置いといて…)それに二つは就活の仕方も違う。エンジニアであれば何を作った、どんな言語が扱えるのかが重要らしい。

サーバサイドの言語は実際学んでも練習がしにくい。企業での研修で身につける人も多い。

私の行っている学校はフリーランスになるためというコンセプトを押しているけど、私は卒業したら企業に入りたい。でも企業に入ってどちらがしたいのか分からない。

そこらへんはじっくり考えて答え出していきたいなと思う。
 

技術面の目標

・HTMLとCSS…サイト真似して打ちまくって速度・精度をあげる、レスポンシブもっと精度上げる
・JQuery…一旦見直し。授業でやったこと復習。
・WordPress…やり方まとめる

・できたらAndroidアプリかiPhoneアプリ作りたい(常駐のエンジニアさんに相談中)
・Ruby on Railsも学びたい。(ログインとかできるサイト作りたい。)

 

とりあえずうってうってうちまくる。

それだけな気がします。精進。

 
 

(注意:言語や就職の状況に関しては、人から聞いたことや私の思い込みの部分もあります。間違っていたらすいません。)